时间戳

首页 > 解决方案 > THREE.js GLTFLoader 在加载 3D 模型时不起作用

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

问题描述

嗨，我遇到了无法显示 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 模型。

有人知道解决方案吗？提前致谢！

标签： javascripthtmlthree.js3dgltf

解决方案

你的工作方式container是有问题的，因为clientHeight当你访问它来计算纵横比时为零。我建议你从使用window.innerWidthandwindow.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 );

推荐阅读