added shader reader, seperated shader files to glsl files and added zone corner reference

This commit is contained in:
2025-09-10 16:01:01 +05:30
parent ffafe61e43
commit f6a88860ec
13 changed files with 262 additions and 250 deletions

View File

@@ -1,9 +1,15 @@
import * as THREE from 'three';
import * as Constants from '../../../../types/world/worldConstants';
import { useRef, useMemo } from 'react';
import * as THREE from "three";
import { useRef, useMemo } from "react";
import * as Constants from "../../../../types/world/worldConstants";
import useShaderReader from "../../../../utils/scene/useShaderReader";
import vertexShaderUrl from "../../../../assets/shaders/point/point.vert.glsl";
import fragmentShaderUrl from "../../../../assets/shaders/point/point.frag.glsl";
function ReferencePoint({ point }: { readonly point: Point }) {
const materialRef = useRef<THREE.ShaderMaterial>(null);
const vertexShader = useShaderReader(vertexShaderUrl);
const fragmentShader = useShaderReader(fragmentShaderUrl);
const boxScale: [number, number, number] = Constants.pointConfig.boxScale;
const colors = {
@@ -12,64 +18,37 @@ function ReferencePoint({ point }: { readonly point: Point }) {
defaultDeleteColor: Constants.pointConfig.deleteColor,
};
const uniforms = useMemo(() => ({
uOuterColor: { value: new THREE.Color(colors.defaultOuterColor) },
uInnerColor: { value: new THREE.Color(colors.defaultInnerColor) },
}), [colors.defaultInnerColor, colors.defaultOuterColor, colors.defaultDeleteColor]);
const uniforms = useMemo(
() => ({
uOuterColor: { value: new THREE.Color(colors.defaultOuterColor) },
uInnerColor: { value: new THREE.Color(colors.defaultInnerColor) },
}),
[colors.defaultInnerColor, colors.defaultOuterColor, colors.defaultDeleteColor]
);
if (!point) {
return null;
}
let pointName = 'Point';
if (point.pointType === 'Wall') {
pointName = 'Wall-Point';
} else if (point.pointType === 'Floor') {
pointName = 'Floor-Point';
} else if (point.pointType === 'Aisle') {
pointName = 'Aisle-Point';
} else if (point.pointType === 'Zone') {
pointName = 'Zone-Point';
let pointName = "Point";
if (point.pointType === "Wall") {
pointName = "Wall-Point";
} else if (point.pointType === "Floor") {
pointName = "Floor-Point";
} else if (point.pointType === "Aisle") {
pointName = "Aisle-Point";
} else if (point.pointType === "Zone") {
pointName = "Zone-Point";
}
if (!point || !vertexShader || !fragmentShader) return null;
return (
<mesh
position={new THREE.Vector3(...point.position)}
name={pointName}
uuid={point.pointUuid}
userData={point}
>
<mesh position={new THREE.Vector3(...point.position)} name={pointName} uuid={point.pointUuid} userData={point}>
<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 uOuterColor;
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(uOuterColor, 1.0); // Border
}
}
`}
/>
<shaderMaterial ref={materialRef} uniforms={uniforms} vertexShader={vertexShader} fragmentShader={fragmentShader} />
</mesh>
);
}
export default ReferencePoint;
export default ReferencePoint;