Dwinzo_Demo/app/src/modules/builder/wall/Instances/instance/wall.tsx

import * as THREE from 'three';
import { Base } from '@react-three/csg';
import { useMemo, useRef, useState } from 'react';
import { Decal, MeshDiscardMaterial } from '@react-three/drei';
import { useFrame, useThree } from '@react-three/fiber';

import defaultMaterial from '../../../../../assets/textures/floor/wall-tex.png';
import material1 from '../../../../../assets/textures/floor/factory wall texture.jpg';

import useModuleStore from '../../../../../store/useModuleStore';
import { useSceneContext } from '../../../../scene/sceneContext';
import { useWallClassification } from './helpers/useWallClassification';
import { useToggleView, useWallVisibility } from '../../../../../store/builder/store';
import { useBuilderStore } from '../../../../../store/builder/useBuilderStore';
import * as Constants from '../../../../../types/world/worldConstants';
import DecalInstance from '../../../Decal/decalInstance';

function Wall({ wall }: { readonly wall: Wall }) {
    const { wallStore } = useSceneContext();
    const { walls, addDecal } = wallStore();
    const { selectedWall, setSelectedWall, setSelectedDecal } = useBuilderStore();
    const { togglView } = useToggleView();
    const { activeModule } = useModuleStore();
    const { camera } = useThree();
    const { wallVisibility } = useWallVisibility();
    const { getWallType, isWallFlipped } = useWallClassification(walls);
    const [visible, setVisible] = useState(true);
    const meshRef = useRef<any>();
    const wallType = getWallType(wall);

    const wallFlipped = isWallFlipped(wall);

    const [rawStart, rawEnd] = wall.points;
    const [startPoint, endPoint] = wallFlipped ? [rawStart, rawEnd] : [rawEnd, rawStart];

    const startX = startPoint.position[0];
    const startZ = startPoint.position[2];
    const endX = endPoint.position[0];
    const endZ = endPoint.position[2];

    const wallLength = Math.sqrt((endX - startX) ** 2 + (endZ - startZ) ** 2);
    const angle = Math.atan2(endZ - startZ, endX - startX);

    const centerX = (startX + endX) / 2;
    const centerZ = (startZ + endZ) / 2;
    const centerY = wall.wallHeight / 2;

    const textureLoader = new THREE.TextureLoader();

    const [defaultWallTexture, material1WallTexture] = useMemo(() => {
        const inside = textureLoader.load(defaultMaterial);
        inside.wrapS = inside.wrapT = THREE.RepeatWrapping;
        inside.repeat.set(wallLength / 10, wall.wallHeight / 10);
        inside.colorSpace = THREE.SRGBColorSpace;

        const outside = textureLoader.load(material1);
        outside.wrapS = outside.wrapT = THREE.RepeatWrapping;
        outside.repeat.set(wallLength / 10, wall.wallHeight / 10);
        outside.colorSpace = THREE.SRGBColorSpace;

        return [inside, outside];
    }, [wallLength, wall.wallHeight]);

    const materials = useMemo(() => {
        return [
            new THREE.MeshStandardMaterial({ color: Constants.wallConfig.defaultColor, side: THREE.DoubleSide, visible: visible }),  // Left
            new THREE.MeshStandardMaterial({ color: Constants.wallConfig.defaultColor, side: THREE.DoubleSide, visible: visible }),  // Right
            new THREE.MeshStandardMaterial({ color: Constants.wallConfig.defaultColor, side: THREE.DoubleSide, visible: visible }),  // Top
            new THREE.MeshStandardMaterial({ color: Constants.wallConfig.defaultColor, side: THREE.DoubleSide, visible: visible }),  // Bottom
            new THREE.MeshStandardMaterial({
                color: Constants.wallConfig.defaultColor,
                side: THREE.DoubleSide,
                map: wall.insideMaterial === 'Default Material' ? defaultWallTexture : material1WallTexture,
            }),
            new THREE.MeshStandardMaterial({
                color: Constants.wallConfig.defaultColor,
                side: THREE.DoubleSide,
                map: wall.outsideMaterial === 'Default Material' ? defaultWallTexture : material1WallTexture,
            }),
        ];
    }, [defaultWallTexture, material1WallTexture, wall]);

    const geometry = useMemo(() => new THREE.BoxGeometry(wallLength, wall.wallHeight, wall.wallThickness), [wallLength, wall.wallHeight, wall.wallThickness]);

    useFrame(() => {
        if (!meshRef.current) return;
        const v = new THREE.Vector3();
        const u = new THREE.Vector3();

        if (!wallVisibility && wallType.type === 'room') {
            meshRef.current.getWorldDirection(v);
            camera.getWorldDirection(u);
            if (!u || !v) return;
            setVisible((2 * v.dot(u)) <= 0.1);
        } else {
            setVisible(true);
        }
    })

    return (
        <mesh
            name={`Wall-${wall.wallUuid}`}
            key={wall.wallUuid}
            userData={wall}
        >
            <Base
                ref={meshRef}
                geometry={geometry}
                position={[centerX, centerY, centerZ]}
                rotation={[0, -angle, 0]}
                userData={wall}
            >
                {materials.map((material, index) => (
                    <primitive key={index} visible={visible} object={material} attach={`material-${index}`} />
                ))}
            </Base>
            <mesh
                castShadow
                geometry={geometry}
                position={[centerX, centerY, centerZ]}
                rotation={[0, -angle, 0]}
                userData={wall}
                name={`WallReference_${wall.wallUuid}`}
                onClick={(e) => {
                    if (visible && !togglView && activeModule === 'builder') {
                        if (e.object.userData.wallUuid) {
                            setSelectedWall(e.object);
                            setSelectedDecal(null);

                            if (wall.decals.length > 0) return;
                            const decal: Decal = {
                                decalUuid: THREE.MathUtils.generateUUID(),
                                decalName: 'Decal',
                                decalId: 'Default Decal',
                                decalPosition: [0, 0, wall.wallThickness / 2 + 0.001],
                                decalRotation: 0,
                                decalScale: 1,
                                decalType: { type: 'Wall', wallUuid: wall.wallUuid }
                            }
                            addDecal(wall.wallUuid, decal);

                        }
                    }
                }}
                onPointerMissed={() => {
                    if (selectedWall && selectedWall.userData.wallUuid === wall.wallUuid) {
                        setSelectedWall(null);
                    }
                }}
            >
                <MeshDiscardMaterial />

                {wall.decals.map((decal) => (
                    <DecalInstance visible={visible} key={decal.decalUuid} decal={decal} />
                ))}
            </mesh>
        </mesh>
    );
}

export default Wall;