Decal implementation in older drei version

Questions
,
1

Hello,

import { Decal } from '@react-three/drei';

<mesh>
  <Decal />
</mesh>

That’s exactly what I’m looking for, but I can’t upgrade to React 18. Is there an option/alternative to do this in an older version than @react-three/drei version 9?

2

no, this is a new feature, it didn’t exist pre react 18 fiber. you can just copy the component through and place it into your app, although there might be some adjustments.

3

@drcmda yes, this is an idea.

I did it using new DecalGeometry(), but the effect is very strange (the shape is shaking). Do you have some idea how to stop this issue?

Code:

const decalGeometry = new DecalGeometry(
  meshRef.current,
  threeEvent.point,
  new THREE.Euler(1, 1, 1),
  new THREE.Vector3(10, 10, 10),
);

const decalMaterial = new THREE.MeshBasicMaterial({
  color: 'red',
});

const decalMesh = new THREE.Mesh(decalGeometry, decalMaterial);

scene.add(decalMesh);

Effect:

4

you can look into the drei component (the source that is), it takes care of positioning, rotation and zfighting.