ReferenceError: THREE is not defined

Hi all,

I’ve had an game working on Facebook Instants for a year or so and I’ve come back to update it.

I used to just include the tag:

	<script src="js/Three/three.js"></script>

In my index.html and all my three app code would work fine.

I’ve updated to the latest version of three (effectively deleted my old three srouce tree and copied the most recent version in there) and all my references to THREE. throw a

ReferenceError: THREE is not defined error.

I’ve noticed my old version of three.js used to have a load of code in, whereas the new version seems to have a bunch of exports instead and no code.

Can anyone tell me what I need to do to get it back working again? I’ve look at the examples and they seem to do some import logic that I’m not familiar with, all contained withing a script of type ‘module’.

I guess three.js isn’t backwards compatible with my old code?

Many thanks,

Steve.

Using the UMD version of three.js should hopefully solve the issue. Try it with this file:

https://threejs.org/build/three.js

1 Like

Thanks a lot, including that helped solve my problem as well. I had been struggling with the same error. Cheers.

1 Like

Hi,
I am new in this discourse and greetings for everyone.
I have the same problem
I added this
<script src="js/three.js"></script>

three.js file to me JS folder but still got the same error

any help will be appreciated…

It seems you get the runtime error because you are creating an instance of THREE.OrbitControls without including the respective script. Note that THREE.OrbitControls is no part of the core but the examples directory. I’ve updated your code here:

https://astonishing-understood-wash.glitch.me

thanks a lot @Mugen87

seems that server is down…will try later to review your suggestion

Waking up
To keep Glitch fast for everyone, inactive projects go to sleep and wake up on request

@Mugen87
I can now access the full-screen mode but unable to find your change…

did you modified? script-sam-viewer.js only or anything else? not sure how to find your change…

Michal

I’ve just added OrbitControls as an additional import:

<script src="https://threejs.org/builds/three.js"></script> 
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script> 

Has anyone encountered this issue again since? I’ve followed trough by changing three.js to the UMD version but to no avail, I get the same error:
Uncaught ReferenceError: THREE is not defined
at (index):12

this is the code I’m running, I’ve also tried putting a Alert() tag in the beginning of the three.js file to check if it was being loaded and got nothing in return, but other .js test files with alerts I placed on the same folder returned results.

for starters, your script tag on line 9 is written funny.
double check it. In your image it says scr= instead of src=
alter your line 9 to be
<script src="js/three.js"></script>

2 Likes

i have the same error, it is like i load a thee.js file and than execute the other script. but instead the other script executes even before threejs file is loaded, and the disturbing part is it happens randomly, sometimes the code works properly and sometimes they show up this not defined error