Trying to ExpoTHREE.loadObjAsync | Can't find variable: THREE

[chrisbarry]

As soon as I try to run this line of code:

const mesh = await ExpoTHREE.loadObjAsync({asset: require('../assets/models/head.obj')});

My app starts complaining about this. Everything else is fine. I've already got a cube spinning no problem. I've dug into this a lot, but it looks like the OBJLoader.js file is complaining that it can't find THREE.

Is it right that we're using a file out of the examples folder of three?

what about the seperate package of three-obj-loader? Is that needed?

Can't find variable: THREE


<unknown>
    OBJLoader.js:5:6
loadModuleImplementation
    require.js:331:6
guardedLoadModule
    require.js:197:45
loadObjAsync$
    loadModelsAsync.js:48:15
tryCatch
    runtime.js:45:44
invoke
    runtime.js:271:30
tryCatch
    runtime.js:45:44
invoke
    runtime.js:135:28
<unknown>
    runtime.js:145:19
tryCallOne
    core.js:37:14
<unknown>
    core.js:123:25
_callTimer
    JSTimers.js:152:14
_callImmediatesPass
    JSTimers.js:200:17
callImmediates
    JSTimers.js:473:30
__callImmediates
    MessageQueue.js:337:6
<unknown>
    MessageQueue.js:135:6
__guard
    MessageQueue.js:314:10
flushedQueue
    MessageQueue.js:134:17

[chrisbarry]

This looks related - https://github.com/expo/expo-three/issues/116

[jasonkv]

Yeah, they are. I was seeing that too after trying a few fixes none which have worked. One was to use yarn and add this to package.json:

  "resolutions": {
    "@expo/browser-polyfill": "~0.1.0"
  },

Which gives me the error above about the missing variable THREE. It's something in some example folder which is odd.

This happens with a clean project with just the bare minimum and three/expo-three. Can post a sample blank project if it helps.

[chrisbarry]

I installed three-obj-loader

var OBJLoader = require('three-obj-loader'); OBJLoader(THREE);

And put this at the top of the file, now it's working no problem?

Any ideas?

[jasonkv]

That's great. I tried what you suggested and I'm seeing a new error: Unable to resolve "three/examples/js/loaders/ctm/lzma" from "expo-three-master\build\loaderClassForExtension.js" Failed building JavaScript bundle.

What does your package.json look like & the area where you use expo-three?

Thanks

[bberak]

For others getting the can't find variable: THREE problem, add the following lines near the beginning of your program:

import { THREE } from "expo-three";

global.THREE = THREE;

A lot of the code in ThreeJS relies on a global THREE variable (unfortunately).

[bberak]

@jasonkv I had similar issues when trying to load post processing effects from the three/examples folder. I ended up going to the THREE repo and copying the code into my app. Not ideal, but it did the trick. I believe for your issue you'll need to copy and require the appropriate three files from here: https://github.com/mrdoob/three.js/tree/r102/examples/js/loaders/ctm

This will therefore, hopefully, satisfy this code block from expo-three:

case 'ctm':
      // @ts-ignore
      if (!THREE.CTMLoader) {
        require('three/examples/js/loaders/ctm/lzma');
        require('three/examples/js/loaders/ctm/ctm');
        require('three/examples/js/loaders/ctm/CTMLoader');
      }
      // @ts-ignore
      return THREE.CTMLoader;

[jasonkv]

Looks like things are fixed with just the standard import now so perhaps the latest merge fixed it?

[bberak]

Hi @jasonkv,

Are you able to post a snippet of your import statements?

[jasonkv]

It's just the standard, nothing special: import ExpoTHREE from 'expo-three';