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

【问题标题】：Three.js Uncaught TypeError: Cannot read property 'addEventListener' of undefinedThree.js Uncaught TypeError: Cannot read property 'addEventListener' of undefined
【发布时间】：2020-07-29 13:26:27
【问题描述】：

JS库three.js和OrbitControls.js有问题。按照本教程做的一切：

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

但它不起作用，在控制台中它给出以下错误：

未捕获的类型错误：无法读取未定义的属性“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>

请帮忙！

【问题讨论】：

标签： javascript html three.js

【解决方案1】：

您的代码中存在一些问题：

如果基于OrbitControls 的change 事件按需渲染，则不需要动画循环。
OrbitControls 的第二个 ctor 参数是必需的。通常是renderer.domElement，这意味着您必须在控件之前创建渲染器。
您不能将renderer 用作事件侦听器。它应该是一个render() 函数。

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>

【讨论】：