'texture maps not applied to material when using BufferGeometry loaded from .obj

I'm struggling to apply texture maps to a loaded object.
(.obj exported from magica voxel).
I'm using it's child-geometry for a mesh.
Loading the Object and applying any material works fine.
But the maps (normal, roughness in that case) are completely ignored.

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.js3dtexturesmeshreact-three-fiber


Solution 1:[1]

The person above is right. Before you add a image, you have to load it by going:
new THREE.TextureLoader().load('../texture/plastic/normal_map.jpg')

Solution 2:[2]

I don’t know react-three-fiber, but it looks like you’re importing .jpg images and directly assigning them as your roughness and normal maps. Those properties are expecting a THREE.Texture object, not a direct image. If the result of your import statement is the image, make sure you convert them into a texture first with

new THREE.Texture(normalMap)

... but if the result of your import is the string with the address of the image, then you'll have to load it with new THREE.TextureLoader().load(normalMap).

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jack Slocum
Solution 2

Related Questions