THREE.js GLTFLoader 在加载 3D 模型时不起作用答案

【问题标题】：THREE.js GLTFLoader does not works on loading the 3D modelTHREE.js GLTFLoader 在加载 3D 模型时不起作用
【发布时间】：2021-07-20 18:54:45
【问题描述】：

您好，我遇到了无法显示 3D 模型 THREE.js GLTFLoader() 的问题，以下是我的脚本：

这是html文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./style.css" />
    <title>Document</title>
  </head>
  <body>
    <nav>
        <ul>
            <li>hey</li>
            <li>heysda</li>
        </ul>
    </nav>
    
    <div class="scene"></div>
    <script src="./three.min.js"></script>
    <script src="./GLTFLoader.js"></script>
    <script src="./app.js"></script>
  </body>
</html>

这里是js文件：

//Variables for setup

let container;
let camera;
let renderer;
let scene;
let house;

function init() {
  container = document.querySelector(".scene");

  //Create scene
  scene = new THREE.Scene();

  const fov = 35;
  const aspect = container.clientWidth / container.clientHeight;
  const near = 0.1;
  const far = 1000;

  //Camera setup
  camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(0, 0, 100);

  const ambient = new THREE.AmbientLight(0x404040, 2);
  scene.add(ambient);

  const light = new THREE.DirectionalLight(0xffffff, 2);
  light.position.set(50, 50, 100);
  scene.add(light);
  //Renderer
  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  renderer.setSize(container.clientWidth, container.clientHeight);
  renderer.setPixelRatio(window.devicePixelRatio);

  container.appendChild(renderer.domElement);

  //Load Model
  let loader = new THREE.GLTFLoader();
  loader.load("./house/scene.gltf", function(gltf) {
    scene.add(gltf.scene);
    house = gltf.scene.children[0];
    animate();
  });
}

function animate() {
  requestAnimationFrame(animate);
  house.rotation.z += 0.005;
  renderer.render(scene, camera);
}

init();

function onWindowResize() {
  camera.aspect = container.clientWidth / container.clientHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(container.clientWidth, container.clientHeight);
}

window.addEventListener("resize", onWindowResize);

我在 notepad++ 和 chrome 浏览器上运行了代码，但结果是黑屏，没有显示我的 3D 模型。

有人知道解决办法吗？提前致谢！

【问题讨论】：

您介意在您的线程中分享 glTF 资源吗？
嗨@Mugen87，这里是GITF 文件drive.google.com/drive/folders/…

标签： javascript html three.js 3d gltf

【解决方案1】：

您使用container 的方式存在问题，因为当您访问clientHeight 以计算纵横比时它为零。我建议你一开始就使用window.innerWidth和window.innerHeight。

此外，您的模型还有两个小问题。该模型具有极端比例，因此您不会在当前相机位置看到它。你离得太近了。此外，模型有偏移，因此建议将其居中。试试这个代码：

//Variables for setup

let camera;
let renderer;
let scene;
let house;

init();

function init() {

    //Create scene
    scene = new THREE.Scene();

    const fov = 60;
    const aspect = window.innerWidth / window.innerHeight;
    const near = 0.1;
    const far = 1000;

    //Camera setup
    camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
    camera.position.set( 0, 0, 5 );

    const ambient = new THREE.AmbientLight( 0xffffff, 0.4 );
    scene.add( ambient );

    const light = new THREE.DirectionalLight( 0xffffff, 0.8 );
    light.position.set( 0, 0, 10 );
    scene.add( light );

    //Renderer
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    //Load Model
    const loader = new THREE.GLTFLoader();
    loader.load( './house/scene.gltf', function ( gltf ) {

        house = gltf.scene;

        // scale model down

        house.scale.setScalar( 0.001 );

        // center it

        const box = new THREE.Box3().setFromObject( house );
        const center = box.getCenter( new THREE.Vector3() );

        house.position.x += ( house.position.x - center.x );
        house.position.y += ( house.position.y - center.y );
        house.position.z += ( house.position.z - center.z );

        scene.add( house );

        animate();

    } );

}

function animate() {

    requestAnimationFrame( animate );
    renderer.render( scene, camera );

}

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

window.addEventListener( 'resize', onWindowResize );

【讨论】：

我已经尝试过你的脚本，但还是没有运气...我的3D模型仍然无法显示，请问是不是因为我使用本地主机运行html文件？我应该使用像 127.0.0.1:8000 这样的端口服务器来运行它吗？
这是结果截图：drive.google.com/file/d/1KbZP9M8pP16vtYJS1vpp2jrZdc9zzUCh/…
请删除 <div class="scene"></div> 以及除 JavaScript 导入之外的所有其他标记和 CSS，然后重试。
使用 localhost 绝对没问题。将应用程序托管在 Web 服务器上非常重要。
这里是上面的代码作为一个实例：zinc-bouncy-gauge.glitch.me