THREE.js GLTFLoader 在加载 3D model 时不起作用

Question

Hi I am facing a problem on cannot display the 3D model THREE.js GLTFLoader(), the following is my script:嗨，我遇到了无法显示 3D model THREE.js GLTFLoader() 的问题，以下是我的脚本：

Here is the html file:这是 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>

here is the js file:这是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);

I ran the code on notepad++ and chrome browser, but it turned out blank screen without showing my 3D model.我在记事本++和chrome浏览器上运行了代码，但结果是空白屏幕，没有显示我的3D model。

Anyone knows the solution?有人知道解决方案吗？ thanks in advance!提前致谢！

Answer 1

The way how you work with container is problematic since clientHeight is zero when you access it to compute the aspect ratio.您使用container的方式是有问题的，因为当您访问它以计算纵横比时， clientHeight为零。 I suggest you start with using window.innerWidth and window.innerHeight at the beginning.我建议你从使用window.innerWidth和window.innerHeight开始。

Besides, there are two minor issues with your model.此外，您的 model 有两个小问题。 The model has an extreme scale so you won't see it with your current camera position. model 具有极高的比例，因此您不会在当前的相机 position 上看到它。 You are way too close.你离得太近了。 Besides, the model has an offset so it's recommended to center it.此外，model 有偏移，建议居中。 Try it with this code:试试这个代码：

//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 );

THREE.js GLTFLoader 在加载 3D model 时不起作用

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-04-27 15:58:23

THREE.js GLTFLoader 在加载 3D model 时不起作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-04-27 15:58:23

解决方案1
1 已采纳 2021-04-27 15:58:23