我的三个 JS class 仅将网格设置应用于场景中 2 个模型中的 1 个

Question

我正在用三个 js 创建一个场景，其中有两个 .glb 格式的模型；我正在按照预先录制的 class 进行操作，并且我已完全按照所有步骤进行操作。我们为 model.js 中的模型创建一个 class，并在 index.js 中定义它们。一切正常，直到从 model.js 我们为模型创建了一个 material 并且它只加载其中一个。我检查了所有内容，在这里搜索了类似的答案，但我找不到错误，因为一切似乎都很好。

这是model.js（class）

import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'

class Model {
    constructor(obj){
        //console.log(obj)
        this.name = obj.name
        this.file = obj.file
        this.scene = obj.scene

        this.loader = new GLTFLoader()
        this.dracoLoader = new DRACOLoader()
        this.dracoLoader.setDecoderPath('./draco/')
        this.loader.setDRACOLoader(this.dracoLoader)

        this.init()
    }

    init (){
        this.loader.load(this.file, (response) => {
           console.log(response)

            this.mesh = response.scene.children[0]
            this.material = new THREE.MeshBasicMaterial({
                color: 'blue',
                wireframe: true
            })
            this.mesh.material = this.material
            this.scene.add(this.mesh)
        })
    }
}

export default Model

这是我的index.js（现场）

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import Model from './model';

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


/*------------------------------
Scene & Camera
------------------------------*/
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 
  50, 
  window.innerWidth / window.innerHeight,
  0.1,
  100
);
camera.position.z = 5;
camera.position.y = 1;


/*------------------------------
Mesh
------------------------------*/
const geometry = new THREE.BoxGeometry(2, 2, 2);
const material = new THREE.MeshBasicMaterial( { 
  color: 0x00ff00,
} );
const cube = new THREE.Mesh( geometry, material );
//scene.add( cube );


/*------------------------------
OrbitControls
------------------------------*/
const controls = new OrbitControls( camera, renderer.domElement );


/*------------------------------
Helpers
------------------------------*/
const gridHelper = new THREE.GridHelper( 10, 10 );
scene.add( gridHelper );
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );


/*------------------------------
Models
------------------------------*/
const laptop = new Model({
  name: 'laptop',
  file: './models/laptop.glb',
  scene: scene
})

const humano = new Model({
  name: 'humano',
  file: './models/humano.glb',
  scene: scene
})


/*------------------------------
Loop
------------------------------*/
const animate = function () {
  requestAnimationFrame( animate );
  renderer.render( scene, camera );
};
animate();


/*------------------------------
Resize
------------------------------*/
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize( window.innerWidth, window.innerHeight );
}
window.addEventListener( 'resize', onWindowResize, false );

它是这样的：

我试图在整个索引中搜索它，但没有成功。

我怀疑这是错误，但事实是我是新手，我不知道我的 children 元素是如何或为什么会空出来的。这是我的老师控制台这是我的....

Answer 1

我也是 Three.js 新手，但它 looks like DracoLoader 加载的是 geometry 而不是网格，因此您制作模型的方式可能会导致问题。使用下载的几何体和 material 实例化新的 THREE.Mesh 是否解决了问题：

    init (){
        this.loader.load(this.file, (response) => {
           console.log(response)

            this.geometry = response.scene.children[0];
            this.material = new THREE.MeshBasicMaterial({
                color: 'blue',
                wireframe: true
            })
            this.mesh = new THREE.Mesh( this.geometry, this.material );
            this.scene.add(this.mesh)
        })
    }

我的三个 JS class 仅将网格设置应用于场景中 2 个模型中的 1 个

My threeJS class only apply meshs settings to 1 of 2 models in my scene

three.js

webgl

gltf

3d-model