美文网首页
threejs 导入fbx文件后,贴图加不上

threejs 导入fbx文件后,贴图加不上

作者: 时间煮鱼 | 来源:发表于2023-04-22 16:33 被阅读0次
先确认是否添加了灯光!!!没有灯光是不显示材质的

正常引入代码,往常导入fbx文件后,按照如下代码就能添加上贴图。但是,不行~~~

const fbxLoader = new FBXLoader();
      fbxLoader.load(`fbx/顶升AGV/顶升AGV.FBX`, (fbx) => {
        const mesh = fbx.clone();
        mesh.traverse((child) => {
          if (child.isMesh) {
            var loader = new THREE.TextureLoader();
            loader.load(
              'fbx/顶升AGV/顶升AGV.jpg', // 本地路径的图片
              // 加载完贴图后的回调函数
              texture => {
                child.material.map = texture;
                child.material.needsUpdate = true;
              },
              // 加载出错时候的回调函数
              err => {
                console.error('An error happened.' + err);
              }
            );
          }
        });
        
        scene.add(mesh);
      });

浏览器报threejs警告:

THREE.FBXLoader: unknown material type "unknown". Defaulting to MeshPhongMaterial.

点击警告查看源码之后,发现是因为该fbx模型的材质类型是unknown,这就导致直接设置

child.material.map = texture; 不生效,使用材质应为MeshPhongMaterial

修改代码(因我确定fbx下只有一个children)

const fbxLoader = new FBXLoader();
      const textureLoader = new THREE.TextureLoader();
      fbxLoader.load(`fbx/顶升AGV/顶升AGV.FBX`, (fbx) => {
        const mesh = fbx.children[0].clone();
        // 创建材质
        const texture = textureLoader.load('fbx/顶升AGV/顶升AGV.jpg'); // 本地路径的图片
        //新建材质
        var material = new THREE.MeshPhongMaterial({ map: texture });
        mesh.material = material;
        scene.add(mesh);
      });

或者(fbx下只有一个children,对每一个children进行添加贴图)

const fbxLoader = new FBXLoader();
      const textureLoader = new THREE.TextureLoader();
      fbxLoader.load(`fbx/顶升AGV/顶升AGV.FBX`, (fbx) => {
        const mesh = fbx.clone();
        mesh.traverse((child) => {
          if (child.isMesh) {
            const texture = textureLoader.load('fbx/顶升AGV/顶升AGV.jpg'); // 本地路径的图片
            const material = new THREE.MeshPhongMaterial({ map: texture });
            child.material = material;
          }
        })
        scene.add(mesh);
      });

问题解决!

相关文章

网友评论

      本文标题:threejs 导入fbx文件后,贴图加不上

      本文链接:https://www.haomeiwen.com/subject/afisjdtx.html