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

import * as THREE from 'three';
import { useMemo, useRef, useState } from 'react';
import * as Constants from '../../../../../types/world/worldConstants';

import defaultMaterial from '../../../../../assets/textures/floor/wall-tex.png';
import material1 from '../../../../../assets/textures/floor/factory wall texture.jpg';
import { useWallStore } from '../../../../../store/builder/useWallStore';
import { useWallClassification } from './helpers/useWallClassification';
import { useFrame, useThree } from '@react-three/fiber';
import { useWallVisibility } from '../../../../../store/builder/store';
import { Decal } from '@react-three/drei';
import { Base } from '@react-three/csg';

function Wall({ wall }: { readonly wall: Wall }) {
    const { walls } = useWallStore();
    const { getWallType, isWallFlipped } = useWallClassification(walls);
    const wallType = getWallType(wall);
    const [visible, setVisible] = useState(true);
    const { wallVisibility } = useWallVisibility();
    const meshRef = useRef<any>();
    const { camera } = useThree();

    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]}
            >
                {materials.map((material, index) => (
                    <primitive key={index} visible={visible} object={material} attach={`material-${index}`} />
                ))}

                {wall.decals.map((decal) => {
                    return (
                        <Decal
                            // debug
                            position={[decal.decalPosition[0], decal.decalPosition[1], wall.wallThickness / 2]}
                            rotation={[0, 0, decal.decalRotation]}
                            scale={[decal.decalScale, decal.decalScale, 0.001]}
                        >
                            <meshBasicMaterial
                                map={material1WallTexture}
                                side={THREE.DoubleSide}
                                polygonOffset
                                polygonOffsetFactor={-1}
                            />
                        </Decal>
                    )
                })}
            </Base>
        </mesh>
    );
}

export default Wall;