Three.js 导入 3d 模型答案

【问题标题】：Three.js Import 3d ModelThree.js 导入 3d 模型
【发布时间】：2020-06-23 09:04:43
【问题描述】：

我已按照几个教程导入 3d 模型。我已经使用 A-Frame 标签成功导入，但是当我尝试使用 Three.js 进行导入时，它不起作用。我从 youtube 上找到的教程中复制粘贴了以下代码。 https://www.youtube.com/watch?v=1TeMXIWRrqE

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8 />
    <link rel="stylesheet" type="text/css" href="main.css" />
  </head>
  <body>
    <script src="three.js"></script>
    <script src="GLTFLoader.js"></script>
    <script src="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('Model/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>

它给我的错误...

 在新的 THREE.OrbitControls (OrbitControls.js:1101)
    在初始化 (index.html:22)
    在 index.html:62

提前致谢。

【问题讨论】：

那么你得到的错误是什么？这只是给出了一条线，没有多大帮助..
OrbitControls.js 中出现错误。在这一行 scope.domElement.addEventListener( 'contextmenu', onContextMenu, false );
好的，但是错误说明了什么？是未定义、空异常、超出范围还是其他？

标签： javascript html three.js aframe

【解决方案1】：

您在启动 new THREE.OrbitControls(); 时缺少一个参数，它需要一个 camera 和一个 HTMLElement，但您只是通过了摄像头。 See the docs here。您可以通过添加渲染器的画布来修复它：

renderer = new THREE.WebGLRenderer({antialias:true});
document.body.appendChild(renderer.domElement);
controls = new THREE.OrbitControls(camera, renderer.domElement);

【讨论】：

谢谢，马奎佐先生。错误消失了，但 3d 模型仍未显示。没有错误，页面中只有 4 个警告。
抱歉，这完全是一个完全不同的问题。随意用一个工作示例提出一个新问题。可以是任意数量的事物之一。