3d.gltf model 未在浏览器上显示

Question

我正在尝试将 a.gltf 3d 动画 model 加载到网站，但它没有显示在页面上，并且控制台上没有错误。

let container;
let camera;
let renderer;
let scene;
let house;
let clock = new THREE.Clock();

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

    scene = new THREE.Scene();


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

    camera = new THREE.PerspectiveCamera(fov,aspect,near,far);
    camera.position.set(-10,25,100);

    

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

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

    renderer = new THREE.WebGLRenderer({antialias:true,alpha:true});
    renderer.setSize(container.clientWidth,container.clientHeight);
    renderer.setPixelRatio(window.devicePixelRatio);

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

    container.appendChild(renderer.domElement);

    let loader = new THREE.GLTFLoader();
    loader.load('./3drobo/scene.gltf',function(gltf){
        mixer = new THREE.AnimationMixer( gltf.scene );
        var action = mixer.clipAction( gltf.animations[ 0 ] );
        action.play();
        scene.add( gltf.scene );
        animate();
    })
  }
  function animate() {

    requestAnimationFrame( animate );

    var delta = clock.getDelta();

    if ( mixer ) mixer.update( delta );

    renderer.render( scene, camera );

    //stats.update();

}

init();

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Instic | The Coding Bots</title>
    <link rel="stylesheet" href="css/index.css" />
  </head>
  <body>
    <nav class="navbar">
      <ul class="nav-list">
        <div class="logo">
          <img src="./css/static/mainlogo.png" alt="" />
        </div>
        <li><a href="">HOME</a></li>
        <li><a href="">SERVICES</a></li>
        <li><a href="">PROJECTS</a></li>
        <li><a href="">TEAM</a></li>
        <li><a href="">CONTACT</a></li>
      </ul>
    </nav>
    <section class="mainsection">
      <div class="content">
        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil nemo
          quos esse, harum, officiis libero, quia dolores placeat architecto ut
          et explicabo recusandae doloribus quas nisi unde enim atque itaque.
        </p>
      </div>
      <div class="scene"></div>
    </section>

    <script src="js/three.min.js"></script>
    <script src="js/GLTFLoader.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script src="js/stats.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/postprocessing@6.21.5/build/postprocessing.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

它之前显示但在更改 fov 值后它从页面上消失了，我将 fov 值设置回相同但它没有在页面上显示宽度和高度自动设置为 0px

;

Answer 1

您的场景的高度和宽度为 0，因为...
您将 .scene div 设置为容器变量，并使用renderer.setSize(container.clientWidth,container.clientHeight); 设置渲染器/画布的高度和宽度。
但是在场景初始化时，.scene div 的高度和宽度为 0，因为其中还没有任何内容，它覆盖了.scene canvas高度和宽度 css。
代替..

.scene canvas {
  height: 100vh;
  width: 100%
}

尝试

.scene {
  height: 100vh;
  width: 100%
}

3d.gltf model 未在浏览器上显示

问题描述

1 个解决方案

解决方案1
2 2021-05-10 22:57:20

3d.gltf model 未在浏览器上显示

问题描述

1 个解决方案

解决方案1 2 2021-05-10 22:57:20

解决方案1
2 2021-05-10 22:57:20