使用从 .obj 加载的 BufferGeometry 时，纹理贴图未应用于材质答案

【问题标题】：texture maps not applied to material when using BufferGeometry loaded from .obj使用从 .obj 加载的 BufferGeometry 时，纹理贴图未应用于材质
【发布时间】：2022-02-01 09:11:31
【问题描述】：

我正在努力将纹理贴图应用于加载的对象。
（从magica体素导出的.obj）。
我将它的子几何用于网格。
加载对象并应用任何材料都可以正常工作。
但是贴图（在这种情况下是法线，粗糙度）被完全忽略了。

import { useLoader } from '@react-three/fiber'
import { useTexture } from '@react-three/drei'

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
import CaseObject from '../object/case.obj'

import texture from '../texture/plastic/color.jpg'
import roughnessMap from '../texture/plastic/roughness_map.jpg'
import normalMap from '../texture/plastic/normal_map.jpg'

function Case (props) {
  const object = useLoader(OBJLoader, CaseObject)
  const geometry = object.children[0].geometry

  const matProps = useTexture({
    map: texture,
    roughnessMap: roughnessMap,
    normalMap: normalMap,
  })

  return <mesh
    castShadow={true}
    receiveShadow={true}
  >
    <bufferGeometry {...geometry} />
    <meshStandardMaterial
      {...matProps}
    />
  </mesh>
}

export default Case

【问题讨论】：

标签： three.js 3d textures mesh react-three-fiber

【解决方案1】：

上面的人是对的。在添加图像之前，您必须通过以下方式加载它：
new THREE.TextureLoader().load('../texture/plastic/normal_map.jpg')

【讨论】：

谢谢，但这是由 useTexture 内部完成的。以上确实适用于其他几何形状......

【解决方案2】：

我不知道 react-three-fiber，但看起来您正在导入 .jpg 图像并直接将它们指定为粗糙度和法线贴图。这些属性需要THREE.Texture 对象，而不是直接图像。如果import 语句的结果是图像，请确保先将它们转换为纹理

new THREE.Texture(normalMap)

...但是如果您的import 的结果是带有图像地址的字符串，那么您必须使用new THREE.TextureLoader().load(normalMap) 加载它。

【讨论】：

谢谢！ useTexture() 在内部执行此操作。实际上完全相同的代码适用于其他几何图形...