Decal implementation in older drei version


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

  <Decal />

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?

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.

@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?


const decalGeometry = new DecalGeometry(
  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);



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