Wrong shadowing when rotating mesh and using normalMap. Three/Fiber

Questions
, , ,
1

My project setup is very basic and i am stuck on a weird problem.
Whenever i rotate mesh that is using normalMap, the shadows show up on the wrong/different side.
I have tried many different things and i am loosing my mind…

(3 same boxes with different rotation and just a normalMap)
image

<mesh geometry={new THREE.BoxGeometry(0.15,0.15,0.15,1,1,1)} position={[0.2, 0, 0]} rotation= 
  {[Math.PI/2,Math.PI/2,0]} castShadow={true} receiveShadow={true}>
              <meshPhysicalMaterial {...applyTexturePropertiesToTextureProps(texture)}  />
</mesh>
2

Resolved.
I just had to assign material this way:

<mesh material={mat} />
3

quickly skip over this React Three Fiber Documentation it explains how to set threejs properties in jsx. your box geometry for instance will be renewed every time the component renders.

a more flexible way to do it is declarativity, especially scale which you can change runtime without performance hit. constructor args cannot change without re-newing the object.

<mesh scale={0.15} ...>
  <boxGeometry />

if you do need constructor args

  <boxGeometry args={[0.15, 0.15, 0.15, 1, 1, 1]} />
  // Same as: new THREE.BoxGeometry(0.15, 0.15, 0.15, 1, 1, 1)

as for the texture, i assume that you’re sticking an imperatively created material in it as well and that can actually be expensive if it happens more than once, if you didn’t memoize it for instance. the bug you experienced is in applyTexturePropertiesToTextureProps(texture), i would rather fix that. if you post the code for it i may be able to help.