Three.js - TypeError: THREE.Scene is not a constructor
Solution 1
As noted in the comments above, the problem is the wrong three.js
-file being included in the page. You should always use the file from the ./build
-folder of the three.js repository, or a version hosted by cdnjs: https://cdnjs.com/libraries/three.js/
Solution 2
I hit this snag because I was calling new THREE.scene
instead of new THREE.Scene
(capital S!)
Solution 3
I have had the same issue but with
THREE.MeshLambertMaterial
and the issue did appear because I wrote incorrectly
THREE.MeshLamberMaterial without the letter 't'
maybe it can be of help for someone :)
Murat Aykanat
Updated on July 21, 2022Comments
-
Murat Aykanat almost 2 years
I am just trying out Three.js so I can implement it to a project of mine, however when I run the first example in the documentation:
<html> <head> <title>My first Three.js app</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% } </style> </head> <body> <script src="three.js"></script> <script> var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; var render = function () { requestAnimationFrame( render ); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); }; render(); </script> </body> </html>
I get this error:
TypeError: THREE.Scene is not a constructor
I tried adding scene.js, but it threw another error inside scene.js so it didn't work. I am using version r80 and I heard there was some non-working samples in the documentation, however I am not sure what's wrong here.
Any help would be appreciated.