Decal BuffergGeometry Merged with BufferGeometry (Part 1)

Copy 
1import { useState, useMemo } from 'react';
2import { Canvas } from '@react-three/fiber';
3import { OrbitControls, Box, Decal as D, Sphere } from '@react-three/drei';
4import { Vector3 } from 'three';
5import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js';
6
7
8const Spheres = ({ reTriangulatedPositions }) => {
9    if (!reTriangulatedPositions || reTriangulatedPositions.length === 0) {
10        return null;
11    }
12
13    const randomColor = Math.random() * 0xffffff; // Random color in hex
14    
15    return (
16        <group>
17            {reTriangulatedPositions.map((s, i) => (
18                <Sphere key={i} position={s} args={[0.1, 10, 10]}>
19                    <meshStandardMaterial color={randomColor} />
20                </Sphere>
21            ))}
22        </group>
23    );
24};

Copy 
1const Decal = () => {
2    const [decalRef, setDecalRef] = useState([]);
3    const [originalRef, setOriginalRef] = useState([]);
4
5
6    const data = useMemo(() => {
7        if (decalRef.geometry && originalRef.geometry) {
8            const decalGeom = decalRef.geometry;
9            let originalGeom = originalRef.geometry.clone();
10
11            originalGeom.index = null;
12
13            const combinedGeom = new BufferGeometryUtils.mergeGeometries([decalGeom, originalGeom], false)
14            const vectors = [];
15
16            if (combinedGeom?.attributes?.position) {
17                for (let i = 0; i < combinedGeom.attributes.position.count; i++) {
18                    vectors.push(new Vector3().fromBufferAttribute(combinedGeom.attributes.position, i))
19                }
20            }
21            return vectors;
22
23        }
24    }, [decalRef, originalRef])
25
26    return (
27        <Canvas>
28            <OrbitControls />
29            <ambientLight />
30            <gridHelper />
31            <Box ref={setOriginalRef} args={[1,1,1]}>
32                <meshStandardMaterial attach="material" color="orange" wireframe/>
33                <D
34                    ref={setDecalRef}
35                    position={[0, 0.51, 0]}
36                    rotation={[0, 0, 0]}
37                    scale={0.5}
38                >
39                    <planeGeometry args={[1,1,1]} />
40                    <meshBasicMaterial
41                        color={'black'}
42                        polygonOffset
43                        polygonOffsetFactor={-1}
44                        wireframe
45                    />
46                </D>
47            </Box>
48            <Spheres reTriangulatedPositions={data} />
49        </Canvas>
50    );
51};
52
53export default Decal;