'THREE' is not defined

Questions
1

Hi,
Please find the code below. When I open the file in the browser, I get this error ‘THREE’ is not defined. Please tell me how to fix. I copied an example from a website and trying to make it to work on my computer.

Thanks in advance

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three.js PointCloud Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
	<body>
			<script src="../graphicsbook-web-site/graphicsbook-1.2-web-site/script/three.min.js"></script>

			<script>

				var canvas, scene, renderer, camera;  // Standard basic objects for three.js

				var pointCloud;  // The object that represents the visible cloud of points.

				var MAX_POINTS = 10000;  // Number of points available
				var points;  // An array of Vector3, containing all possible points
				var spinSpeeds;  // An array of Quarterians, containing point rotations for "spin" animation
				var driftSpeeds; // An array of Vector3, contianing point velocities for "drift" animation

				var geometry;  // Object of type THREE.Geometry containing the visible points.
				var material;  // Object of type THREE.Shadow.camera.Material for point color and size.

				var scene = new THREE.Scene();
				renderer.setClearColor(0x333333);
				var camera = new THREE.PerspectiveCamera(30,canvas.width/canvas.height,1,10);
				
				
				var renderer = new THREE.WebGLRenderer();
				renderer.setSize( window.innerWidth, window.innerHeight );
				document.body.appendChild( renderer.domElement );
				
				
				camera.position.z = 5;
				points = new Array(MAX_POINTS);

				var i = 0;
				var yaxis = new THREE.Vector3(0,1,0);
				while (i < MAX_POINTS) {
					var x = 2*Math.random() - 1;
					var y = 2*Math.random() - 1;
					var z = 2*Math.random() - 1;
					if ( x*x + y*y + z*z < 1 ) {  // only use points inside the unit sphere

						points[i] = new THREE.Vector3(x,y,z);
						i++;
					}
				}

				var geometry = new THREE.Geometry();
				for (i = 0; i < 1000; i++) {
					geometry.vertices.push(points[i]);
				}
				material = new THREE.PointsMaterial({
						color: "yellow",
						size: 2,
						sizeAttenuation: false
					});
				pointCloud = new THREE.Points(geometry,material);
				scene.add(pointCloud);				
			</script>
	</body>
</html>
2

Not sure why. Top few lines were chopped off.

3 
<script src="../graphicsbook-web-site/graphicsbook-1.2-web-site/script/three.min.js"></script>

I bet three.min.js is not available under the given path. You can try to use this URL instead: https://threejs.org/build/three.js. However, be aware that this URL leads to the latest version of three.js (R110 right now). The code of graphicsbook-web-site might depend on a lower release.

1 Like
4

Thank you. I will try your suggestion. Code I copied here is only part of an example (A Three.js pointsCloud) which works on http://math.hws.edu/graphicsbook/c5/s1.html and also on my computer.

5

I tried with https://threejs.org/build/three.js and also by copying three.js to the working folder.
What I get is blank page.

Thanks

6

@Thiru
Hi!
Slightly modified your code (see comments):
https://jsfiddle.net/prisoner849/231zyfo9/

7

Hi
Thank you. Still it is not working for me. I get this message
SCRIPT5007: SCRIPT5007: Unable to get property ‘width’ of undefined or null reference and pointing to this line
var camera = new THREE.PerspectiveCamera(30,canvas.width/canvas.height,1,10);

8

Because you didn’t set any value to canvas variable, thus it’s undefined.
I used window.innerWidth / window.innerHeight instead.

9

Thanks.
Now I am getting this message

  1. SCRIPT438: SCRIPT438: Object doesn’t support property or method ‘setAnimationLoop’

and points to
renderer.setAnimationLoop(()=>{renderer.render(scene, camera)}); // added render loop

10

Whar revision of three.js do you use?

11

Thank you so much for pointing to three.js. It works now. I cant tell you which version I am using. It looks like I have different versions in different folders where I have examples from different sources. . After your last message I went back to Mugen’s suggestion to use https://threejs.org/build/three.js

Thanks again.

1 Like