# Decal implementation in older drei version

**URL:** <https://discourse.threejs.org/t/decal-implementation-in-older-drei-version/45832>\
**Category:** Questions\
**Tags:** drei, decal\
**Created:** [December 15, 2022, 2:01pm UTC](https://discourse.threejs.org/t/decal-implementation-in-older-drei-version/45832 "2022-12-15T14:01:25Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![lukas2](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lukas2/32/31796_2.png) [@lukas2](https://discourse.threejs.org/u/lukas2)\
**Post date:** [December 15, 2022, 2:01pm UTC](https://discourse.threejs.org/t/decal-implementation-in-older-drei-version/45832/1 "2022-12-15T14:01:25Z")

</div>

Hello,

```javascript
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?

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [December 15, 2022, 5:40pm UTC](https://discourse.threejs.org/t/decal-implementation-in-older-drei-version/45832/2 "2022-12-15T17:40:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![lukas2](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lukas2/32/31796_2.png) [@lukas2](https://discourse.threejs.org/u/lukas2)\
**Post date:** [December 15, 2022, 6:05pm UTC](https://discourse.threejs.org/t/decal-implementation-in-older-drei-version/45832/3 "2022-12-15T18:05:17Z")

</div>

@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:**

```javascript
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:**

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/5/65ef42b5ae29bec328238c09b4d3c2e0ee8bb66f.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/5/65ef42b5ae29bec328238c09b4d3c2e0ee8bb66f.mp4)

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [December 15, 2022, 6:25pm UTC](https://discourse.threejs.org/t/decal-implementation-in-older-drei-version/45832/4 "2022-12-15T18:25:16Z")

</div>

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