未捕获的类型错误：无法读取未定义的属性（读取“domElement”）[重复]

Question

我是 three.js 的新手，我不知道有什么问题

    <script type="node_modules" src="./node_modules/three/examples/jsm/loaders/GLTFLoader.js"></script>
    <script type="node_modules" src="./node_modules/three/examples/jsm/controls/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, renderer.domElement);
        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);
        renderer = new THREE.WebGLRenderer({antialias:true});
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.body.appendChild(renderer.domElement);

        let loader = new THREE.GLTFLoader();
        loader.load('./test_3d/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();

它返回给我这个错误：

未捕获的类型错误：无法读取未定义的属性（读取“domElement”） 在初始化时（（索引）：25:61）

指的是这部分代码：

controls = new THREE.OrbitControls(camera, renderer.domElement);

Answer 1

我认为塞巴斯蒂安在评论中总结了这一点，但我会继续发布，所以如果仍然不清楚，你可以得到解释。您在这一行初始化变量渲染器：

let scene, camera, renderer;

但在您在这里初始化渲染器之前，该变量内没有任何内容：

renderer = new THREE.WebGLRenderer({antialias:true});

所以当你在这里调用 orbitControls 的渲染器时：

controls = new THREE.OrbitControls(camera, renderer.domElement);

您正在尝试调用其中没有任何内容的渲染器变量。一个简单的解决方法就是将控件的代码移动到渲染器的代码下