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

Question

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

3

JavaScript库three.js和OrbitControls.js存在问题。按照以下教程操作：https://redstapler.co/add-3d-model-to-website-threejs/，但是不起作用，在控制台中显示以下错误信息：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>

- ZHMEN

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mugen87 · Accepted Answer

你的代码存在一些问题：

如果你是基于 OrbitControls 的 change 事件进行按需渲染，那么就不需要动画循环。
OrbitControls 的第二个构造函数参数是必须的。通常应该是 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>