时间戳

首页 > 解决方案 > 模型不会渲染

javascript - 模型不会渲染

问题描述

我一直在尝试将搅拌机中的模型放入我的网站。我尝试过使用不同的教程，并检查了我的模型是否在 three.js 之外工作并且它有效所以如果我遗漏了任何帮助，将不胜感激。我在想也许这是我必须下载的东西但我似乎找不到任何东西。

import {GLTFLoader} from 'https://cdn.jsdelivr.net/npm/three@0.118.1/examples/jsm/loaders/GLTFLoader.js';
import {OrbitControls} from 'https://cdn.jsdelivr.net/npm/three@0.118/examples/jsm/controls/OrbitControls.js';


class BasicWorldDemo {
  constructor() {
    this._Initialize();
  }

  _Initialize() {
    this._threejs = new THREE.WebGLRenderer({
      antialias: true,
    });
    this._threejs.shadowMap.enabled = true;
    this._threejs.shadowMap.type = THREE.PCFSoftShadowMap;
    this._threejs.setPixelRatio(window.devicePixelRatio);
    this._threejs.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(this._threejs.domElement);

    window.addEventListener('resize', () => {
      this._OnWindowResize();
    }, false);

    const fov = 60;
    const aspect = 1920 / 1080;
    const near = 1.0;
    const far = 1000.0;
    this._camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    this._camera.position.set(75, 20, 0);

    this._scene = new THREE.Scene();

    let light = new THREE.DirectionalLight(0xFFFFFF, 1.0);
    light.position.set(20, 100, 10);
    light.target.position.set(0, 0, 0);
    light.castShadow = true;
    light.shadow.bias = -0.001;
    light.shadow.mapSize.width = 2048;
    light.shadow.mapSize.height = 2048;
    light.shadow.camera.near = 0.1;
    light.shadow.camera.far = 500.0;
    light.shadow.camera.near = 0.5;
    light.shadow.camera.far = 500.0;
    light.shadow.camera.left = 100;
    light.shadow.camera.right = -100;
    light.shadow.camera.top = 100;
    light.shadow.camera.bottom = -100;
    this._scene.add(light);

    light = new THREE.AmbientLight(0x101010);
    this._scene.add(light);

    const controls = new OrbitControls(
      this._camera, this._threejs.domElement);
    controls.target.set(0, 20, 0);
    controls.update();

    const loader = new THREE.CubeTextureLoader();
    const texture = loader.load([
        './resources/posx.jpg',
        './resources/negx.jpg',
        './resources/posy.jpg',
        './resources/negy.jpg',
        './resources/posz.jpg',
        './resources/negz.jpg',
    ]);
    this._scene.background = texture;

    const plane = new THREE.Mesh(
        new THREE.PlaneGeometry(100, 100, 10, 10),
        new THREE.MeshStandardMaterial({
            color: 0xFFFFFF,
          }));
    plane.castShadow = false;
    plane.receiveShadow = true;
    plane.rotation.x = -Math.PI / 2;
    this._scene.add(plane);

    // const box = new THREE.Mesh(
    //   new THREE.BoxGeometry(2, 2, 2),
    //   new THREE.MeshStandardMaterial({
    //       color: 0xFFFFFF,
    //   }));
    // box.position.set(0, 1, 0);
    // box.castShadow = true;
    // box.receiveShadow = true;
    // this._scene.add(box);

    // for (let x = -8; x < 8; x++) {
    //   for (let y = -8; y < 8; y++) {
    //     const box = new THREE.Mesh(
    //       new THREE.BoxGeometry(2, 2, 2),
    //       new THREE.MeshStandardMaterial({
    //           color: 0x808080,
    //       }));
    //     box.position.set(Math.random() + x * 5, Math.random() * 4.0 + 2.0, Math.random() + y * 5);
    //     box.castShadow = true;
    //     box.receiveShadow = true;
    //     this._scene.add(box);
    //   }
    // }

    // // const box = new THREE.Mesh(
    // //   new THREE.SphereGeometry(2, 32, 32),
    // //   new THREE.MeshStandardMaterial({
    // //       color: 0xFFFFFF,
    // //       wireframe: true,
    // //       wireframeLinewidth: 4,
    // //   }));
    // // box.position.set(0, 0, 0);
    // // box.castShadow = true;
    // // box.receiveShadow = true;
    // // this._scene.add(box);

    this._RAF();
  }

  _LoadModel() { 
      const loader = new GLTFLoader();
      loader.load('./resources/untitled.glb',  (gltf) => {
          gltf.Scene.traverse(c => {
              c.castShadow = true;
          });
          this._scene.add(gltf.scene);
      });
  }

  _OnWindowResize() {
    this._camera.aspect = window.innerWidth / window.innerHeight;
    this._camera.updateProjectionMatrix();
    this._threejs.setSize(window.innerWidth, window.innerHeight);
  }

  _RAF() {
    requestAnimationFrame(() => {
      this._threejs.render(this._scene, this._camera);
      this._RAF();
    });
  }
}


let _APP = null;

window.addEventListener('DOMContentLoaded', () => {
  _APP = new BasicWorldDemo();
});```

标签： javascriptthree.js

解决方案

我看到了几个问题。

轻松修复

首先，您的traverse通话已开启gltf.Scene（带有大写字母S）。这个大写的属性名称不正确，我很惊讶您的浏览器没有抛出错误。像您一样使用gltf.scene将其添加到您的场景中。

接下来，您共享的代码永远不会调用_LoadModel. 这可能是您的模型没有出现的一个重要原因，除非您在其他地方调用它。

其他注意事项

我从来没有见过这样的结构，但除了我指出的问题之外，它应该可以工作。如果没有，请考虑在此处简化您的一些想法，例如将所有内容从_Initialize移至constructor，并重新组织动画循环以不在每次迭代中创建新函数。您完全有可能在某处失去范围。

推荐阅读