I am following the GLView / expo-three example located here : https://github.com/expo/expo-three
expo-three, although it seems poorly maintained so far, is the recommended way to use Three.js with Expo (using the previous integration results in a warning telling us to use expo-three)
Compared to the example on github, the only difference is that my rendering function is :
return (
<View style={styles.container}>
<Text>TEST TEST TEST</Text>
<Text>Changes you make will automatically reload.</Text>
<Text>Shake your phone to open the developer menu.</Text>
<Expo.GLView
style={{ flex: 1, height: '100%', width: '100%' }}
onContextCreate={this._onGLContextCreate}
/>
</View>
);
Upon inspecting the source code at GLView.js and debugging, the global.__EXGLContexts variable is undefined, which is causing the error.
Am I missing something ?
It would seem that the addEventListener function is not available on window when Three is trying to access it. Yet debugging in my component shows that the method is indeed here, at least after Three has already been loaded.
Aside from that : what are your recommendations for debugging JS in an app using GLView ?
It’s me again ! So the issues I was having are indeed fixed in this version. However I am now trying to load an .obj file using Three.OBJLoader (from three-obj-loader). I’m not getting anything, although the equivalent code works in a browser.
Here’s the code I’m using
var resourcePath = '/resources/';
var texture = await ExpoTHREE.createTextureAsync({
asset: Expo.Asset.fromModule(require('./resources/texture.jpg')),
});
var obj = null;
var objLoader = new THREE.OBJLoader();
var material = new THREE.MeshStandardMaterial( {
color: 0xffffff,
roughness: 1.0,
metalness: 0.0
});
objLoader.setPath(resourcePath);
objLoader.load(
'object.obj',
function (object) {
object.traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.material = material;
child.material.map = texture;
}
});
obj = object;
scene.add( object );
}
);
Now I’m guessing this has to do with the way Expo handles assets, although I have no idea how to handle the obj case.
Never mind, read up on assets and clearly was doing it the wrong way. I managed to mimic the way you coded the texture import in your library ; since there is no way require an .obj file I just stored the text file in a string literal and used the Three.OBJLoader to parse it.
@denis82 fix which part? There are multiple issues in this thread. I’m guessing having GL during remote debugging? Unfortunately the current implementation of remote debugging in React Native runs in a different JavaScript context than the one on your device so this isn’t trivially fixable, and we have no plans at the moment to support that.
You’ll have to debug through other means, like adding extra output.
