Three.js - Uncaught ReferenceError: THREE is not defined

Question

When I run my javascript code. I get the following error "Uncaught ReferenceError: THREE is not defined". The line mentioned is:

var renderer = new THREE.WebGLRenderer();

// I have attached the three.js library in the script tag. I don't know what seems to be problem.

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set = (0, 0, 10);
camera.lookAt(camera.position);
scene.add(camera);

var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(0.0, 1.0, 0.0));
geometry.vertices.push(new THREE.Vector3(-1.0, -1.0, 0.0));
geometry.vertices.push(new THREE.Vector3(1.0, -1.0, 0.0));
geometry.faces.push(new THREE.Face3(0, 1, 2));

var material = new THREE.BasicMeshMaterial({
    color: 0xFFFFFF,
    side: THREE.DoubleSide
});

var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(-1.5, 0.0, 4.0);
scene.add(mesh);

function render() {
    renderer.render(scene, camera);
}

render();

kigiri · Accepted Answer · 2016-12-11 18:24:17Z

17

You need to include three.js before

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>

answered Dec 11, 2016 at 18:24

kigiri

3,45825 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user5955461 Over a year ago

after adding the about script src, I am getting this error now! "Uncaught TypeError: THREE.BasicMeshMaterial is not a constructor"

prisoner849 Over a year ago

it should be THREE.MeshBasicMaterial()

Adenosine Triphosphate Over a year ago

still getting the error

Richard RJUK · Accepted Answer · 2018-11-27 19:59:21Z

2

I had similar problem, specifying character encoding in the header worked for me

<head>
	<title>Cube by Charden</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	.
  .
  .
  .
  
</head>

answered Nov 27, 2018 at 19:59

Richard RJUK

5715 silver badges11 bronze badges

Comments

Siim Kasepõld · Accepted Answer · 2020-02-11 20:10:14Z

2

my mistake was including three.js file from /src/Three.js folder. make sure to use ./build/three.js

answered Feb 11, 2020 at 20:10

Siim Kasepõld

691 silver badge3 bronze badges

Comments

Wracker · Accepted Answer · 2016-12-13 13:05:15Z

it's hard to pinpoint the error since you only provided the code where you try using Three.js but what you do not show is how you load the module and in what order are all the other initialization scripts executed.So I strongly recommend sharing a simple example either through jsfiddle or use the Code Snippet feature in your main post.)

To ensure the three.min.js is loaded:

check your browser's console for any errors
check the network section in your browser's console, to see if the three.min.js is listen there.

index.html

<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
</head>
  <body>
  </body>
 </html>
<script>
  var container = document.createElement( 'div' );
  document.body.appendChild( container );
  scene = new THREE.Scene();
    ....
</script>

Joe Amphlett · Accepted Answer · 2020-10-17 22:50:18Z

1

For anyone checking on this, I had the same problem. Realised I messed up by putting <script src="./libs/three.js"></script> after the script that actually uses three in my html file.

answered Oct 17, 2020 at 22:50

Joe Amphlett

214 bronze badges

Comments

Xbox One · Accepted Answer · 2021-03-15 06:43:12Z

-1

Effectively check the path of the file three.js in my case it's in a carp

edited Mar 15, 2021 at 6:43

Xbox One

3134 silver badges15 bronze badges

answered Feb 27, 2020 at 22:07

Luis Holgado

1

2 Comments

Midhere Over a year ago

Can you update your answer in English? It would be helpful to those who don't understand Spanish.

Brydenr Over a year ago

Do posts have to be in English on Stack Exchange?

Collectives™ on Stack Overflow

Three.js - Uncaught ReferenceError: THREE is not defined

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

2 Comments

Linked

Related