Dwinzo-Beta
/
Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: Introduce Point and ReferencePoint components for better point management in AisleCreator

This commit is contained in:
Jerald-Golden-B 2025-05-29 18:17:24 +05:30
parent 2f5b20e2d5
commit 16e3f51448
3 changed files with 162 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
app/src/modules/builder/aisle/aisleCreator/aisleCreator.tsx
View File

@ -5,6 +5,8 @@ import { useActiveLayer, useSocketStore, useToggleView, useToolMode } from '../.
import { useAisleStore } from '../../../../store/builder/useAisleStore';
import ReferenceAisle from './referenceAisle';
import { useBuilderStore } from '../../../../store/builder/useBuilderStore';
import ReferencePoint from '../../point/referencePoint';
import Point from '../../point/point';
function AisleCreator() {
const { scene, camera, raycaster, gl, pointer } = useThree();
@ -40,16 +42,8 @@ function AisleCreator() {
});
});
// Add temporary points
tempPoints.forEach(point => {
if (!seenUuids.has(point.uuid)) {
seenUuids.add(point.uuid);
points.push(point);
}
});
return points;
}, [aisles, tempPoints]);
}, [aisles]);
useEffect(() => {
@ -252,17 +246,15 @@ function AisleCreator() {
return (
<>
<group >
{tempPoints.map((point) => (
<ReferencePoint key={point.uuid} point={point} />
))}
</group>
<group >
{allPoints.map((point) => (
<mesh
key={point.uuid}
position={new THREE.Vector3(...point.position)}
>
<sphereGeometry args={[0.1, 16, 16]} />
<meshBasicMaterial
color={0xffff00}
/>
</mesh>
<Point key={point.uuid} point={point} userData={{ pointType: 'Aisle' }} />
))}
</group>

77
app/src/modules/builder/point/point.tsx Normal file
View File

@ -0,0 +1,77 @@
import * as THREE from 'three';
import * as Constants from '../../../types/world/worldConstants';
import { useRef, useState, useEffect, useMemo } from 'react';
import { useToolMode } from '../../../store/builder/store';
function Point({ point, userData }: { readonly point: Point, readonly userData: any }) {
const materialRef = useRef<THREE.ShaderMaterial>(null);
const [isHovered, setIsHovered] = useState(false);
const { toolMode } = useToolMode();
const boxScale: [number, number, number] = Constants.pointConfig.boxScale;
const defaultInnerColor = Constants.pointConfig.defaultInnerColor;
const borderColor = Constants.pointConfig.aisleOuterColor;
useEffect(() => {
if (materialRef.current && toolMode === 'move') {
materialRef.current.uniforms.uInnerColor.value.set(
isHovered ? borderColor : defaultInnerColor
);
materialRef.current.uniformsNeedUpdate = true;
} else if (materialRef.current && toolMode !== 'move') {
materialRef.current.uniforms.uInnerColor.value.set(defaultInnerColor);
materialRef.current.uniformsNeedUpdate = true;
}
}, [isHovered, borderColor, defaultInnerColor, toolMode]);
const uniforms = useMemo(() => ({
uColor: { value: new THREE.Color(borderColor) },
uInnerColor: { value: new THREE.Color(defaultInnerColor) },
}), [borderColor, defaultInnerColor]);
if (!point) {
return null;
}
return (
<mesh
uuid={point.uuid}
position={new THREE.Vector3(...point.position)}
onPointerOver={() => setIsHovered(true)}
onPointerOut={() => setIsHovered(false)}
userData={userData}
>
<boxGeometry args={boxScale} />
<shaderMaterial
ref={materialRef}
uniforms={uniforms}
vertexShader={`
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`}
fragmentShader={`
varying vec2 vUv;
uniform vec3 uColor;
uniform vec3 uInnerColor;
void main() {
// Define the size of the white square as a proportion of the face
float borderThickness = 0.2; // Adjust this value for border thickness
if (vUv.x > borderThickness && vUv.x < 1.0 - borderThickness &&
vUv.y > borderThickness && vUv.y < 1.0 - borderThickness) {
gl_FragColor = vec4(uInnerColor, 1.0); // Inner square
} else {
gl_FragColor = vec4(uColor, 1.0); // Border
}
}
`}
/>
</mesh>
);
}
export default Point;

75
app/src/modules/builder/point/referencePoint.tsx Normal file
View File

@ -0,0 +1,75 @@
import * as THREE from 'three';
import * as Constants from '../../../types/world/worldConstants';
import { useRef, useState, useEffect, useMemo } from 'react';
import { useToolMode } from '../../../store/builder/store';
function ReferencePoint({ point }: { readonly point: Point }) {
const materialRef = useRef<THREE.ShaderMaterial>(null);
const [isHovered, setIsHovered] = useState(false);
const { toolMode } = useToolMode();
const boxScale: [number, number, number] = Constants.pointConfig.boxScale;
const defaultInnerColor = Constants.pointConfig.defaultInnerColor;
const borderColor = Constants.pointConfig.aisleOuterColor;
useEffect(() => {
if (materialRef.current && toolMode === 'move') {
materialRef.current.uniforms.uInnerColor.value.set(
isHovered ? borderColor : defaultInnerColor
);
materialRef.current.uniformsNeedUpdate = true;
} else if (materialRef.current && toolMode !== 'move') {
materialRef.current.uniforms.uInnerColor.value.set(defaultInnerColor);
materialRef.current.uniformsNeedUpdate = true;
}
}, [isHovered, borderColor, defaultInnerColor, toolMode]);
const uniforms = useMemo(() => ({
uColor: { value: new THREE.Color(borderColor) },
uInnerColor: { value: new THREE.Color(defaultInnerColor) },
}), [borderColor, defaultInnerColor]);
if (!point) {
return null;
}
return (
<mesh
position={new THREE.Vector3(...point.position)}
onPointerOver={() => setIsHovered(true)}
onPointerOut={() => setIsHovered(false)}
>
<boxGeometry args={boxScale} />
<shaderMaterial
ref={materialRef}
uniforms={uniforms}
vertexShader={`
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`}
fragmentShader={`
varying vec2 vUv;
uniform vec3 uColor;
uniform vec3 uInnerColor;
void main() {
// Define the size of the white square as a proportion of the face
float borderThickness = 0.2; // Adjust this value for border thickness
if (vUv.x > borderThickness && vUv.x < 1.0 - borderThickness &&
vUv.y > borderThickness && vUv.y < 1.0 - borderThickness) {
gl_FragColor = vec4(uInnerColor, 1.0); // Inner square
} else {
gl_FragColor = vec4(uColor, 1.0); // Border
}
}
`}
/>
</mesh>
);
}
export default ReferencePoint;