ReferenceError: THREE is not defined

[bunyaminmrcn]

I'm currently working on expo-three with latest dependencies (expo SDK) and test it(jest-expo). But got some error ,can't solve this Any idea why thats happen. Here is screenshot of my test. And my package.json is:

package_json.txt

expo-three : 3.0.2-alpha.1

[Gradner]

The THREE OrbitControls file that is included in the THREE.js examples directory isn't actually a module with any exports, it was meant to be loaded by just including it in the head of your HTML file after three.js so it assumes that "THREE" is already a part of the global namespace.

You'd likely have to modify the OrbitControls.js file to import or require THREE, or turn it into a function that you can pass your imported "THREE" variable into when loading.

That all said, THREE.OrbitControls relies heavily on keyboard/mouse events and the dom, so I'm not sure whether it would be useful in the context of Expo if you plan on implementing it on any mobile platform.

In order to help you troubleshoot this issue, you'd need to provide App.js and the version of OrbitControls.js you're using in your project to be able to say for certain what's causing this error. Do you have a repo setup for your app?

[bberak]

@Gradner thanks for the explanation. The example source code uses a lot of these imports:

import 'three/examples/js/controls/OrbitControls';
require('three/examples/js/postprocessing/EffectComposer');
require('three/examples/js/postprocessing/RenderPass');
require('three/examples/js/postprocessing/ShaderPass');
require('three/examples/js/postprocessing/MaskPass');

However, when I run the above - I get the typical 'Unable to resolve module three.../EffectComposer' errors. If ThreeJS is not listed as a direct dependency of the example project - I'm trying to figure out how to get these imports to work..