Blender导出gltf格式ThreeJS不显示问题-

1. 检查代码

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
。。。。。。

 initRoomGltf() {
    const _this = this;
     // const loader = new OBJLoader();
     const loader = new GLTFLoader();
     // load a resource
     loader.load(
       // resource URL
       // this.commonFunc.getPath('移动.obj'),
       this.commonFunc.getPath('移动.gltf'),
       // called when resource is loaded
       function (gltf) {
         console.log('initRoom loaded', gltf);
         gltf.scene.position.set(0, -2, 0);
         _this.scene.add(gltf.scene);
       },
       // called when loading is in progresses
       function (xhr) {
         console.log((xhr.loaded / xhr.total) * 100 + '% loaded');
       },
       // called when loading has errors
       function (error) {
         console.log('An error happened', error);
       }
     );
  }

注意加载 _this.scene.add(gltf.scene);

如果加载obj，是 _this.scene.add(obj);

initRoomObj() {
    const _this = this;

    let textureLoader = new THREE.TextureLoader();
    let material = new THREE.MeshPhongMaterial({
      // color: 0xFF0000,
      map: textureLoader.load(this.commonFunc.getPath('主体_B.png')),
      roughnessMap: textureLoader.load(this.commonFunc.getPath('主体_R.png'))
    });
    let opacityMaterial = new THREE.MeshStandardMaterial({
      color: 0x000000,
      map: textureLoader.load(this.commonFunc.getPath('透明材质_B.png')),
      roughnessMap: textureLoader.load(this.commonFunc.getPath('透明材质_R.png'))
    });
    opacityMaterial.transparent = true; //开启透明
    // opacityMaterial.opacity = 1; //设置透明度

    const loader = new OBJLoader();
    // load a resource
    loader.load(
      // resource URL
      this.commonFunc.getPath('移动集装箱机房.obj'),
      // called when resource is loaded
      function (obj) {
        console.log('initRoom loaded', obj);
        obj.position.set(0, -2, 0);
        _this.scene.add(obj);
    
        obj.traverse(function (child) {
            console.log('initRoom child', child.name);
            // 对不同物体加载不同材质
            if (child.isMesh && child.name.startsWith('zhuti_')) {
              child.material = material;
              // child.visible = false;
            } else {
              child.material = new THREE.MeshPhysicalMaterial({
                color: DEFAULT_COLOR
              });
            }
          });
      },
      // called when loading is in progresses
      function (xhr) {
        console.log((xhr.loaded / xhr.total) * 100 + '% loaded');
      },
      // called when loading has errors
      function (error) {
        console.log('An error happened', error);
      }
    );
  }

2. Blender导入时注意选项

导出Obj，这个需要手动加载材质

推荐导出gltf，这个可打包材质到一个文件中，之前导出没注意看，一直不显示物体，或者材质没有加载，折腾很长时间。

gltf文件可以直接打开查看是不是材质已经打包进去了

Gltf加载颜色失真问题

颜色偏差: http://webgl3d.cn/pages/c2fd5c/

  this.renderer.outputEncoding = THREE.sRGBEncoding;