bug fix
This commit is contained in:
@@ -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(
|
||||
() => {
|
||||
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;
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function LookAt(pos: Vector3) {
|
||||
console.log('hi lookat');
|
||||
cc.setLookAt(pos.x, pos.y, pos.z, target.x, target.y, target.z, true);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -45,7 +45,7 @@ export default function SwitchView() {
|
||||
|
||||
return (
|
||||
<>
|
||||
{(toggleView || !toggleThreeD) ? (
|
||||
{toggleView || !toggleThreeD ? (
|
||||
<OrthographicCamera
|
||||
makeDefault
|
||||
position={CONSTANTS.twoDimension.defaultPosition}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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]} />
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user