Three.js 未捕获类型错误：无法读取未定义的属性“addEventListener”

Question

There is a problem with JS library three.js and OrbitControls.js. JS 库 three.js 和 OrbitControls.js 有问题。 Did everything according to this tutorial:根据本教程做了一切：

https://redstapler.co/add-3d-model-to-website-threejs/ 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未捕获的类型错误：无法读取未定义的属性“addEventListener”

 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 .如果您根据 OrbitControls 的change事件按需呈现，则不需要OrbitControls循环。
The second ctor parameter of OrbitControls is mandatory. OrbitControls的第二个 ctor 参数是必需的。 It's usually be renderer.domElement which means you have to create the renderer before the controls.它通常是renderer.domElement ，这意味着您必须在控件之前创建渲染器。
You can't use renderer as an event listener.您不能将renderer用作事件侦听器。 It should be a render() function.它应该是一个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 未捕获类型错误：无法读取未定义的属性“addEventListener”

问题描述

1 个解决方案

解决方案1
4 2020-07-29 14:10:08

Three.js 未捕获类型错误：无法读取未定义的属性“addEventListener”

问题描述

1 个解决方案

解决方案1 4 2020-07-29 14:10:08

解决方案1
4 2020-07-29 14:10:08