React Three加载多个纹理到相同的3d模型

Question

我有一个组件如下:

function Character(props) {
const obj = useFBX('/character.fbx');
const bodyNormal = useTexture('/textures/body_normal.png')
const bodyColor = useTexture('/textures/body_base_color.png')
return <mesh>
<primitive object={obj} />
<meshBasicMaterial map={bodyNormal} attach="material-0" />
<meshBasicMaterial map={bodyColor} attach="material-1" />
</mesh>
}

我可以看到模型被正确加载，但是纹理没有被加载，我怎么能解决这个问题?

Answer 1

MeshBasicMaterial不能采用法线贴图(它是未照明的，所以它根本不使用照明计算)-使用像MeshStandardMaterial这样的材质将与多个导入的贴图一起工作，您只需将它们全部应用到材质中。

所有可能的地图类型见https://threejs.org/docs/#api/en/materials/MeshStandardMaterial

function Character(props) {
const obj = useFBX('/character.fbx');
const bodyNormal = useTexture('/textures/body_normal.png')
const bodyColor = useTexture('/textures/body_base_color.png')
return <mesh>
<primitive object={obj} />
<meshStandardMaterial map={bodyColor} normalMap={bodyNormal} />
</mesh>
}

假设你是使用useTexture从Drei (https://github.com/pmndrs/drei)，你可以缩短:

const [bodyColor, bodyNormal] = useTexture([
'/textures/body_base_color.png', 
'/textures/body_normal.png',
])

或

const props = useTexture({
map: '/textures/body_base_color.png', 
normalMap: '/textures/body_normal.png',
})
// <meshStandardMaterial {...props} />