This commit is contained in:
2025-09-11 15:58:25 +05:30
parent 09d208f093
commit f3302d3f33
6 changed files with 32 additions and 63 deletions

View File

@@ -3,16 +3,12 @@ import { useEffect } from "react";
import { useThree } from "@react-three/fiber";
import type { CameraControls } from "@react-three/drei";
import { useThreeDStore } from "../../../../store/ui/useModuleStore";
import * as CONSTANTS from "../../../../types/world/worldConstants";
const CameraShortcutsControls = () => {
const { camera, controls } = useThree();
const { toggleThreeD, setToggleThreeD } = useThreeDStore();
const isTextInput = (element: Element | null): boolean =>
element instanceof HTMLInputElement ||
element instanceof HTMLTextAreaElement ||
element?.getAttribute("contenteditable") === "true";
const isTextInput = (element: Element | null): boolean => element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element?.getAttribute("contenteditable") === "true";
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
@@ -20,7 +16,6 @@ const CameraShortcutsControls = () => {
const cc = controls as CameraControls;
// get current target
const target = new Vector3();
cc.getTarget(target);
@@ -45,14 +40,11 @@ const CameraShortcutsControls = () => {
LookAt(pos);
break;
case "Numpad9": {
// Opposite view logic
// Opposite
if (Math.abs(dir.z) > Math.abs(dir.x) && Math.abs(dir.z) > Math.abs(dir.y)) {
pos = new Vector3(0, 0, -Math.sign(dir.z) * distance).add(target);
LookAt(pos);
} else if (
Math.abs(dir.x) > Math.abs(dir.z) &&
Math.abs(dir.x) > Math.abs(dir.y)
) {
} else if (Math.abs(dir.x) > Math.abs(dir.z) && Math.abs(dir.x) > Math.abs(dir.y)) {
pos = new Vector3(-Math.sign(dir.x) * distance, 0, 0).add(target);
LookAt(pos);
} else {
@@ -62,29 +54,18 @@ const CameraShortcutsControls = () => {
break;
}
case "Numpad5": {
// Only apply when on Top view
if (!toggleThreeD) {
console.log("cc: ", cc.camera);
setToggleThreeD(true);
(cc as any).mouseButtons.left = CONSTANTS.threeDimension.leftMouse;
(cc as any).mouseButtons.right = CONSTANTS.threeDimension.rightMouse;
} else {
console.log("cc: ", cc.camera);
cc.setLookAt(0, distance, 0, target.x, target.y, target.z, false).then(
() => {
setToggleThreeD(false);
(cc as any).mouseButtons.left = CONSTANTS.twoDimension.leftMouse;
(cc as any).mouseButtons.right = CONSTANTS.twoDimension.rightMouse;
}
);
cc.setLookAt(0, distance, 0, target.x, target.y, target.z, false).then(() => {
setToggleThreeD(false);
});
}
break;
}
}
function LookAt(pos: Vector3) {
console.log('hi lookat');
cc.setLookAt(pos.x, pos.y, pos.z, target.x, target.y, target.z, true);
}
};

View File

@@ -45,7 +45,7 @@ export default function SwitchView() {
return (
<>
{(toggleView || !toggleThreeD) ? (
{toggleView || !toggleThreeD ? (
<OrthographicCamera
makeDefault
position={CONSTANTS.twoDimension.defaultPosition}

View File

@@ -7,26 +7,10 @@ const Ground = ({ plane }: any) => {
return (
<mesh name="Ground">
<mesh
name="Grid"
position={!toggleView ? CONSTANTS.gridConfig.position3D : CONSTANTS.gridConfig.position2D}
>
<gridHelper
args={[
gridValue.size,
gridValue.divisions,
CONSTANTS.gridConfig.primaryColor,
CONSTANTS.gridConfig.secondaryColor,
]}
/>
<mesh name="Grid" position={!toggleView ? CONSTANTS.gridConfig.position3D : CONSTANTS.gridConfig.position2D}>
<gridHelper args={[gridValue.size, gridValue.divisions, CONSTANTS.gridConfig.primaryColor, CONSTANTS.gridConfig.secondaryColor]} />
</mesh>
<mesh
ref={plane}
rotation-x={CONSTANTS.planeConfig.rotation}
position={!toggleView ? CONSTANTS.planeConfig.position3D : CONSTANTS.planeConfig.position2D}
name="Plane"
receiveShadow
>
<mesh ref={plane} rotation-x={CONSTANTS.planeConfig.rotation} position={!toggleView ? CONSTANTS.planeConfig.position3D : CONSTANTS.planeConfig.position2D} name="Plane" receiveShadow>
<planeGeometry args={[planeValue.width, planeValue.height]} />
<meshBasicMaterial color={CONSTANTS.planeConfig.color} />
</mesh>

View File

@@ -61,7 +61,20 @@ export default function Shadows() {
{/* {(lightRef.current?.shadow) &&
<cameraHelper visible={shadows} args={[lightRef.current.shadow.camera]} />
} */}
<directionalLight ref={lightRef} castShadow={shadows} shadow-mapSize-width={CONSTANTS.shadowConfig.shadowmapSizewidth} shadow-mapSize-height={CONSTANTS.shadowConfig.shadowmapSizeheight} shadow-camera-far={CONSTANTS.shadowConfig.shadowcamerafar} shadow-camera-near={CONSTANTS.shadowConfig.shadowcameranear} shadow-camera-top={CONSTANTS.shadowConfig.shadowcameratop} shadow-camera-bottom={CONSTANTS.shadowConfig.shadowcamerabottom} shadow-camera-left={CONSTANTS.shadowConfig.shadowcameraleft} shadow-camera-right={CONSTANTS.shadowConfig.shadowcameraright} shadow-bias={CONSTANTS.shadowConfig.shadowbias} shadow-normalBias={CONSTANTS.shadowConfig.shadownormalBias} />
<directionalLight
ref={lightRef}
castShadow={shadows}
shadow-mapSize-width={CONSTANTS.shadowConfig.shadowmapSizewidth}
shadow-mapSize-height={CONSTANTS.shadowConfig.shadowmapSizeheight}
shadow-camera-far={CONSTANTS.shadowConfig.shadowcamerafar}
shadow-camera-near={CONSTANTS.shadowConfig.shadowcameranear}
shadow-camera-top={CONSTANTS.shadowConfig.shadowcameratop}
shadow-camera-bottom={CONSTANTS.shadowConfig.shadowcamerabottom}
shadow-camera-left={CONSTANTS.shadowConfig.shadowcameraleft}
shadow-camera-right={CONSTANTS.shadowConfig.shadowcameraright}
shadow-bias={CONSTANTS.shadowConfig.shadowbias}
shadow-normalBias={CONSTANTS.shadowConfig.shadownormalBias}
/>
<object3D ref={targetRef} />
<mesh position={CONSTANTS.shadowConfig.shadowMaterialPosition} rotation={CONSTANTS.shadowConfig.shadowMaterialRotation} receiveShadow>
<planeGeometry args={[planeValue.width, planeValue.height]} />

View File

@@ -1,8 +1,8 @@
import * as THREE from 'three';
import * as THREE from "three";
import { Sky } from "@react-three/drei";
import { useAzimuth, useElevation, useSunPosition } from "../../../store/builder/store";
import { useEffect, useRef, useState } from "react";
import * as CONSTANTS from '../../../types/world/worldConstants';
import * as CONSTANTS from "../../../types/world/worldConstants";
export default function Sun() {
const savedTheme: string | null = localStorage.getItem("theme");
@@ -24,20 +24,16 @@ export default function Sun() {
sunPositionRef.current.setFromSphericalCoords(1, phi, theta);
setSunPosition(sunPositionRef.current);
forceUpdate(prev => prev + 1);
forceUpdate((prev) => prev + 1);
}, [elevation, azimuth]);
return (
<>
{(azimuth !== undefined && elevation !== undefined && savedTheme !== "dark") && (
{azimuth !== undefined && elevation !== undefined && savedTheme !== "dark" && (
<>
<Sky
distance={CONSTANTS.skyConfig.skyDistance}
sunPosition={[
sunPositionRef.current.x,
sunPositionRef.current.y,
sunPositionRef.current.z,
]}
sunPosition={[sunPositionRef.current.x, sunPositionRef.current.y, sunPositionRef.current.z]}
turbidity={turbidity}
rayleigh={CONSTANTS.skyConfig.defaultRayleigh}
mieCoefficient={CONSTANTS.skyConfig.mieCoefficient}

View File

@@ -1,20 +1,16 @@
import { useEffect } from "react";
import { DepthOfField, Bloom, EffectComposer, N8AO } from "@react-three/postprocessing";
// import OutlineInstances from "./outlineInstances/outlineInstances";
import OutlineInstances from "./outlineInstances/outlineInstances";
import { useDeletableEventSphere, useSelectedEventSphere } from "../../../store/simulation/useSimulationStore";
import { useEffect } from "react";
export default function PostProcessing() {
const { selectedEventSphere } = useSelectedEventSphere();
const { deletableEventSphere } = useDeletableEventSphere();
useEffect(() => {
}, [selectedEventSphere, deletableEventSphere])
useEffect(() => {}, [selectedEventSphere, deletableEventSphere]);
return (
<EffectComposer autoClear={false}>
<N8AO color="black" aoRadius={20} intensity={7} distanceFalloff={4} aoSamples={32} denoiseRadius={6} denoiseSamples={16} />
{/* <DepthOfField focusDistance={0} focalLength={0.15} bokehScale={2} /> */}
@@ -22,7 +18,6 @@ export default function PostProcessing() {
{/* <Bloom intensity={0.1} luminanceThreshold={0.9} luminanceSmoothing={0.025} mipmapBlur={false} /> */}
<OutlineInstances />
</EffectComposer>
);
};
}