先确认是否添加了灯光!!!没有灯光是不显示材质的
正常引入代码,往常导入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);
});
问题解决!
网友评论