ReferenceError: THREE is not defined

[Steven_Haggerty]

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.

[Mugen87]

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

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

[HenryJavangwe]

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

[michaldengusiak]

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

Myfirstsamviewer

any help will be appreciated…

[Mugen87]

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

[michaldengusiak]

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

[michaldengusiak]

@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

[Mugen87]

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> 

[Xeroque]

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.

[seanwasere]

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>

[Dhruv_Vagadiya]

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

[hermann]

I don’t get it. So is it not possible to use the official version of threejs, to include the 3js code in an external file? It just strikes me as so odd if the correct way to install threejs, is something completely different than what’s on the website itself. Will this, slightly modified version of 3js come back to haunt me later?

And when I do use this other version, I get error “Three.Scene is not a constructor”.

I am having the same question as the author here. But apparently not with the same answer.

3js not recognized when within script file

I am trying to install the latest version of 3js. I go by the directions on the 3js website, here: https://threejs.org/docs/index.html#manual/en/introduction/Installation I am doing part: “Install from CDN or static hosting”. I have downloaded the library onto my computer, so I am referring to my own file there. Using this, I can run 3js code. But the problem is, if I try to run that given code in it’s own file, like this: <script src="./thecode.js"></script> I get error: Uncaught Ref…

[Mugen87]

@hermann

So is it not possible to use the official version of threejs, to include the 3js code in an external file?

Of course you can do this. The user @Dhruv_Vagadiya just imports the ESM version of three.js in the wrong way.

Everything should be explained in the Installation guide. So you need an import map and then include the import * as THREE from 'three'; statement in your main script file. The import map is needed so the browser knows how to resolve the three bare module specifier.

I’ve checked your code in your other post. You need type=“module” in your script tag when working with ESM.

[hermann]

I don’t know what ESM is.

But there is type=module already.

<script async src="./threejs/shims/index.js"></script>
<script type="importmap">
{
"imports":{
    "three": "./threejs/index/2/build/three.module.js"
    }   
}
</script>
<script type="module">
import * as THREE from 'three';
</script>

<script type="module" src="./demo.js"></script>

And in the demo file there is only:

const renderer = new THREE.WebGLRenderer();

And that gives me the error.

[Mugen87]

You need the import * as THREE from 'three'; statement inside your demo.js file.

@hermann

I don’t know what ESM is.

I highly recommend you study an online beginner resource about ES6 modules. Otherwise you have not the foundation to work with the library.

[hermann]

So ESM is just EcmaScript Modules, and Ecma is just Javascript so it’s Javascript Modules.
I’ve been programming with Javascript modules for 15 years now.
But there are loops in my knowledge. Clearly. Always getting better.

Thanks for the help.