Three.js Uncaught TypeError: Cannot read property 'addEventListener' of undefined

Question

There is a problem with JS library three.js and OrbitControls.js. Did everything according to this tutorial:

https://redstapler.co/add-3d-model-to-website-threejs/

But it does not work, in the console it gives the following error:

Uncaught TypeError: Cannot read property 'addEventListener' of undefined

 at new THREE.OrbitControls (OrbitControls.js: 1125)
 at init (index.html: 25)
 at index.html: 64

<!DOCTYPE html>
<html>
   <head>
      <meta charset=UTF-8 />
      <link rel="stylesheet" type="text/css" href="css/styles.css" />
   </head>
   <body>
      <script src="/js/three.min.js"></script>
      <script src="js/GLTFLoader.js"></script>
      <script src="js/OrbitControls.js"></script>
      <script>
         let scene, camera, renderer;
         function init() {
         scene = new THREE.Scene();
         scene.background = new THREE.Color(0xdddddd);
         
         camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000);
         camera.rotation.y = 45/180*Math.PI;
         camera.position.x = 800;
         camera.position.y = 100;
         camera.position.z = 1000;
         
         controls = new THREE.OrbitControls(camera);
         controls.addEventListener('change', renderer);
         
         hlight = new THREE.AmbientLight (0x404040,100);
         scene.add(hlight);
         
         directionalLight = new THREE.DirectionalLight(0xffffff,100);
         directionalLight.position.set(0,1,0);
         directionalLight.castShadow = true;
         scene.add(directionalLight);
         light = new THREE.PointLight(0xc4c4c4,10);
         light.position.set(0,300,500);
         scene.add(light);
         light2 = new THREE.PointLight(0xc4c4c4,10);
         light2.position.set(500,100,0);
         scene.add(light2);
         light3 = new THREE.PointLight(0xc4c4c4,10);
         light3.position.set(0,100,-500);
         scene.add(light3);
         light4 = new THREE.PointLight(0xc4c4c4,10);
         light4.position.set(-500,300,500);
         scene.add(light4);
         
         renderer = new THREE.WebGLRenderer({antialias:true});
         renderer.setSize(window.innerWidth,window.innerHeight);
         document.body.appendChild(renderer.domElement);
         
         let loader = new THREE.GLTFLoader();
         loader.load('models/scene.gltf', function(gltf){
         car = gltf.scene.children[0];
         car.scale.set(0.5,0.5,0.5);
         scene.add(gltf.scene);
         animate();
         });
         }
         function animate() {
         renderer.render(scene,camera);
         requestAnimationFrame(animate);
         }
         init();
      </script>
   </body>
</html>

Help Please!

Answer 1

There are some issues in your code:

You don't need an animation loop if you are rendering on demand based in the change event of OrbitControls .
The second ctor parameter of OrbitControls is mandatory. It's usually be renderer.domElement which means you have to create the renderer before the controls.
You can't use renderer as an event listener. It should be a render() function.

 let scene, camera, renderer; init(); render(); function init() { scene = new THREE.Scene(); scene.background = new THREE.Color(0xdddddd); camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 5000); camera.position.x = 8; camera.position.y = 10; camera.position.z = 10; renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.addEventListener('change', render); const hlight = new THREE.AmbientLight(0x404040, 100); scene.add(hlight); const directionalLight = new THREE.DirectionalLight(0xffffff, 100); directionalLight.position.set(0, 1, 0); directionalLight.castShadow = true; scene.add(directionalLight); const light = new THREE.PointLight(0xc4c4c4, 10); light.position.set(0, 300, 500); scene.add(light); const light2 = new THREE.PointLight(0xc4c4c4, 10); light2.position.set(500, 100, 0); scene.add(light2); const light3 = new THREE.PointLight(0xc4c4c4, 10); light3.position.set(0, 100, -500); scene.add(light3); const light4 = new THREE.PointLight(0xc4c4c4, 10); light4.position.set(-500, 300, 500); scene.add(light4); const geometry = new THREE.BoxBufferGeometry(); const material = new THREE.MeshPhongMaterial(); const mesh = new THREE.Mesh( geometry, material ) scene.add( mesh ); } function render() { renderer.render(scene, camera); }

 body { background-color: #000; margin: 0px; overflow: hidden; }

 <script src="https://cdn.jsdelivr.net/npm/three@0.116.1/build/three.js"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.116.1/examples/js/controls/OrbitControls.js"></script>

Three.js Uncaught TypeError: Cannot read property 'addEventListener' of undefined

Question

1 answers

solution1
4 2020-07-29 14:10:08

Three.js Uncaught TypeError: Cannot read property 'addEventListener' of undefined

Question

1 answers

solution1 4 2020-07-29 14:10:08

solution1
4 2020-07-29 14:10:08