Implement code changes to enhance functionality and improve performance
This commit is contained in:
BIN
app/src/assets/gltf-glb/default.glb
Normal file
BIN
app/src/assets/gltf-glb/default.glb
Normal file
Binary file not shown.
BIN
app/src/assets/gltf-glb/material1.glb
Normal file
BIN
app/src/assets/gltf-glb/material1.glb
Normal file
Binary file not shown.
BIN
app/src/assets/gltf-glb/material2.glb
Normal file
BIN
app/src/assets/gltf-glb/material2.glb
Normal file
Binary file not shown.
BIN
app/src/assets/gltf-glb/material3.glb
Normal file
BIN
app/src/assets/gltf-glb/material3.glb
Normal file
Binary file not shown.
@@ -1,25 +1,25 @@
|
|||||||
import { useFrame, useThree } from "@react-three/fiber";
|
import { useFrame, useThree } from "@react-three/fiber";
|
||||||
import {
|
import {
|
||||||
useActiveTool,
|
useActiveTool,
|
||||||
useAsset3dWidget,
|
useAsset3dWidget,
|
||||||
useCamMode,
|
useCamMode,
|
||||||
useDeletableFloorItem,
|
useDeletableFloorItem,
|
||||||
useDeleteTool,
|
useDeleteTool,
|
||||||
useFloorItems,
|
useFloorItems,
|
||||||
useLoadingProgress,
|
useLoadingProgress,
|
||||||
useRenderDistance,
|
useRenderDistance,
|
||||||
useSelectedFloorItem,
|
useSelectedFloorItem,
|
||||||
useSelectedItem,
|
useSelectedItem,
|
||||||
useSocketStore,
|
useSocketStore,
|
||||||
useToggleView,
|
useToggleView,
|
||||||
useTransformMode,
|
useTransformMode,
|
||||||
} from "../../../store/store";
|
} from "../../../store/store";
|
||||||
import assetVisibility from "../geomentries/assets/assetVisibility";
|
import assetVisibility from "../geomentries/assets/assetVisibility";
|
||||||
import { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import * as Types from "../../../types/world/worldTypes";
|
import * as Types from "../../../types/world/worldTypes";
|
||||||
import assetManager, {
|
import assetManager, {
|
||||||
cancelOngoingTasks,
|
cancelOngoingTasks,
|
||||||
} from "../geomentries/assets/assetManager";
|
} from "../geomentries/assets/assetManager";
|
||||||
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
|
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
|
||||||
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
|
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
|
||||||
@@ -33,421 +33,420 @@ import useModuleStore from "../../../store/useModuleStore";
|
|||||||
import { useEventsStore } from "../../../store/simulation/useEventsStore";
|
import { useEventsStore } from "../../../store/simulation/useEventsStore";
|
||||||
|
|
||||||
const assetManagerWorker = new Worker(
|
const assetManagerWorker = new Worker(
|
||||||
new URL(
|
new URL(
|
||||||
"../../../services/factoryBuilder/webWorkers/assetManagerWorker.js",
|
"../../../services/factoryBuilder/webWorkers/assetManagerWorker.js",
|
||||||
import.meta.url
|
import.meta.url
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
const gltfLoaderWorker = new Worker(
|
const gltfLoaderWorker = new Worker(
|
||||||
new URL(
|
new URL(
|
||||||
"../../../services/factoryBuilder/webWorkers/gltfLoaderWorker.js",
|
"../../../services/factoryBuilder/webWorkers/gltfLoaderWorker.js",
|
||||||
import.meta.url
|
import.meta.url
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
const FloorItemsGroup = ({
|
const FloorItemsGroup = ({
|
||||||
itemsGroup,
|
itemsGroup,
|
||||||
hoveredDeletableFloorItem,
|
hoveredDeletableFloorItem,
|
||||||
AttachedObject,
|
AttachedObject,
|
||||||
floorGroup,
|
floorGroup,
|
||||||
tempLoader,
|
tempLoader,
|
||||||
isTempLoader,
|
isTempLoader,
|
||||||
plane,
|
plane,
|
||||||
}: any) => {
|
}: any) => {
|
||||||
const state: Types.ThreeState = useThree();
|
const state: Types.ThreeState = useThree();
|
||||||
const { raycaster, controls }: any = state;
|
const { raycaster, controls }: any = state;
|
||||||
const { renderDistance } = useRenderDistance();
|
const { renderDistance } = useRenderDistance();
|
||||||
const { toggleView } = useToggleView();
|
const { toggleView } = useToggleView();
|
||||||
const { floorItems, setFloorItems } = useFloorItems();
|
const { floorItems, setFloorItems } = useFloorItems();
|
||||||
const { camMode } = useCamMode();
|
const { camMode } = useCamMode();
|
||||||
const { deleteTool } = useDeleteTool();
|
const { deleteTool } = useDeleteTool();
|
||||||
const { setDeletableFloorItem } = useDeletableFloorItem();
|
const { setDeletableFloorItem } = useDeletableFloorItem();
|
||||||
const { transformMode } = useTransformMode();
|
const { transformMode } = useTransformMode();
|
||||||
const { setSelectedFloorItem } = useSelectedFloorItem();
|
const { setSelectedFloorItem } = useSelectedFloorItem();
|
||||||
const { activeTool } = useActiveTool();
|
const { activeTool } = useActiveTool();
|
||||||
const { selectedItem, setSelectedItem } = useSelectedItem();
|
const { selectedItem, setSelectedItem } = useSelectedItem();
|
||||||
const { setLoadingProgress } = useLoadingProgress();
|
const { setLoadingProgress } = useLoadingProgress();
|
||||||
const { activeModule } = useModuleStore();
|
const { activeModule } = useModuleStore();
|
||||||
const { socket } = useSocketStore();
|
const { socket } = useSocketStore();
|
||||||
const loader = new GLTFLoader();
|
const loader = new GLTFLoader();
|
||||||
const dracoLoader = new DRACOLoader();
|
const dracoLoader = new DRACOLoader();
|
||||||
const { addEvent } = useEventsStore();
|
const { addEvent } = useEventsStore();
|
||||||
|
|
||||||
dracoLoader.setDecoderPath(
|
dracoLoader.setDecoderPath(
|
||||||
"https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/gltf/"
|
"https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/gltf/"
|
||||||
);
|
);
|
||||||
loader.setDRACOLoader(dracoLoader);
|
loader.setDRACOLoader(dracoLoader);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const email = localStorage.getItem("email");
|
const email = localStorage.getItem("email");
|
||||||
const organization = email!.split("@")[1].split(".")[0];
|
const organization = email!.split("@")[1].split(".")[0];
|
||||||
|
|
||||||
let totalAssets = 0;
|
let totalAssets = 0;
|
||||||
let loadedAssets = 0;
|
let loadedAssets = 0;
|
||||||
|
|
||||||
const updateLoadingProgress = (progress: number) => {
|
const updateLoadingProgress = (progress: number) => {
|
||||||
if (progress < 100) {
|
if (progress < 100) {
|
||||||
setLoadingProgress(progress);
|
setLoadingProgress(progress);
|
||||||
} else if (progress === 100) {
|
} else if (progress === 100) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setLoadingProgress(100);
|
setLoadingProgress(100);
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setLoadingProgress(0);
|
setLoadingProgress(0);
|
||||||
}, 1500);
|
}, 1500);
|
||||||
}, 1000);
|
}, 1000);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
getFloorAssets(organization).then((data) => {
|
getFloorAssets(organization).then((data) => {
|
||||||
if (data.length > 0) {
|
if (data.length > 0) {
|
||||||
const uniqueItems = (data as Types.FloorItems).filter(
|
const uniqueItems = (data as Types.FloorItems).filter(
|
||||||
(item, index, self) =>
|
(item, index, self) =>
|
||||||
index === self.findIndex((t) => t.modelfileID === item.modelfileID)
|
index === self.findIndex((t) => t.modelfileID === item.modelfileID)
|
||||||
);
|
);
|
||||||
totalAssets = uniqueItems.length;
|
totalAssets = uniqueItems.length;
|
||||||
if (totalAssets === 0) {
|
if (totalAssets === 0) {
|
||||||
updateLoadingProgress(100);
|
updateLoadingProgress(100);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
gltfLoaderWorker.postMessage({ floorItems: data });
|
gltfLoaderWorker.postMessage({ floorItems: data });
|
||||||
} else {
|
} else {
|
||||||
gltfLoaderWorker.postMessage({ floorItems: [] });
|
gltfLoaderWorker.postMessage({ floorItems: [] });
|
||||||
loadInitialFloorItems(
|
loadInitialFloorItems(
|
||||||
itemsGroup,
|
itemsGroup,
|
||||||
setFloorItems,
|
setFloorItems,
|
||||||
addEvent,
|
addEvent,
|
||||||
renderDistance
|
renderDistance
|
||||||
);
|
);
|
||||||
updateLoadingProgress(100);
|
updateLoadingProgress(100);
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
gltfLoaderWorker.onmessage = async (event) => {
|
|
||||||
if (event.data.message === "gltfLoaded" && event.data.modelBlob) {
|
|
||||||
const blobUrl = URL.createObjectURL(event.data.modelBlob);
|
|
||||||
|
|
||||||
loader.load(blobUrl, (gltf) => {
|
|
||||||
URL.revokeObjectURL(blobUrl);
|
|
||||||
THREE.Cache.remove(blobUrl);
|
|
||||||
THREE.Cache.add(event.data.modelID, gltf);
|
|
||||||
|
|
||||||
loadedAssets++;
|
|
||||||
const progress = Math.round((loadedAssets / totalAssets) * 100);
|
|
||||||
updateLoadingProgress(progress);
|
|
||||||
|
|
||||||
if (loadedAssets === totalAssets) {
|
|
||||||
loadInitialFloorItems(
|
|
||||||
itemsGroup,
|
|
||||||
setFloorItems,
|
|
||||||
addEvent,
|
|
||||||
renderDistance
|
|
||||||
);
|
|
||||||
updateLoadingProgress(100);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
gltfLoaderWorker.onmessage = async (event) => {
|
||||||
assetManagerWorker.onmessage = async (event) => {
|
if (event.data.message === "gltfLoaded" && event.data.modelBlob) {
|
||||||
cancelOngoingTasks(); // Cancel the ongoing process
|
const blobUrl = URL.createObjectURL(event.data.modelBlob);
|
||||||
await assetManager(event.data, itemsGroup, loader);
|
|
||||||
};
|
|
||||||
}, [assetManagerWorker]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
loader.load(blobUrl, (gltf) => {
|
||||||
if (toggleView) return;
|
URL.revokeObjectURL(blobUrl);
|
||||||
|
THREE.Cache.remove(blobUrl);
|
||||||
|
THREE.Cache.add(event.data.modelID, gltf);
|
||||||
|
|
||||||
const uuids: string[] = [];
|
loadedAssets++;
|
||||||
itemsGroup.current?.children.forEach((child: any) => {
|
const progress = Math.round((loadedAssets / totalAssets) * 100);
|
||||||
uuids.push(child.uuid);
|
updateLoadingProgress(progress);
|
||||||
});
|
|
||||||
const cameraPosition = state.camera.position;
|
|
||||||
|
|
||||||
assetManagerWorker.postMessage({
|
if (loadedAssets === totalAssets) {
|
||||||
floorItems,
|
loadInitialFloorItems(
|
||||||
cameraPosition,
|
itemsGroup,
|
||||||
uuids,
|
setFloorItems,
|
||||||
renderDistance,
|
addEvent,
|
||||||
});
|
renderDistance
|
||||||
}, [camMode, renderDistance]);
|
);
|
||||||
|
updateLoadingProgress(100);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const controls: any = state.controls;
|
assetManagerWorker.onmessage = async (event) => {
|
||||||
const camera: any = state.camera;
|
cancelOngoingTasks(); // Cancel the ongoing process
|
||||||
|
await assetManager(event.data, itemsGroup, loader);
|
||||||
|
};
|
||||||
|
}, [assetManagerWorker]);
|
||||||
|
|
||||||
if (controls) {
|
useEffect(() => {
|
||||||
let intervalId: NodeJS.Timeout | null = null;
|
|
||||||
|
|
||||||
const handleChange = () => {
|
|
||||||
if (toggleView) return;
|
if (toggleView) return;
|
||||||
|
|
||||||
const uuids: string[] = [];
|
const uuids: string[] = [];
|
||||||
itemsGroup.current?.children.forEach((child: any) => {
|
itemsGroup.current?.children.forEach((child: any) => {
|
||||||
uuids.push(child.uuid);
|
uuids.push(child.uuid);
|
||||||
});
|
});
|
||||||
const cameraPosition = camera.position;
|
const cameraPosition = state.camera.position;
|
||||||
|
|
||||||
assetManagerWorker.postMessage({
|
assetManagerWorker.postMessage({
|
||||||
floorItems,
|
floorItems,
|
||||||
cameraPosition,
|
cameraPosition,
|
||||||
uuids,
|
uuids,
|
||||||
renderDistance,
|
renderDistance,
|
||||||
});
|
});
|
||||||
};
|
}, [camMode, renderDistance]);
|
||||||
|
|
||||||
const startInterval = () => {
|
useEffect(() => {
|
||||||
if (!intervalId) {
|
const controls: any = state.controls;
|
||||||
intervalId = setInterval(handleChange, 50);
|
const camera: any = state.camera;
|
||||||
|
|
||||||
|
if (controls) {
|
||||||
|
let intervalId: NodeJS.Timeout | null = null;
|
||||||
|
|
||||||
|
const handleChange = () => {
|
||||||
|
if (toggleView) return;
|
||||||
|
|
||||||
|
const uuids: string[] = [];
|
||||||
|
itemsGroup.current?.children.forEach((child: any) => {
|
||||||
|
uuids.push(child.uuid);
|
||||||
|
});
|
||||||
|
const cameraPosition = camera.position;
|
||||||
|
|
||||||
|
assetManagerWorker.postMessage({
|
||||||
|
floorItems,
|
||||||
|
cameraPosition,
|
||||||
|
uuids,
|
||||||
|
renderDistance,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const startInterval = () => {
|
||||||
|
if (!intervalId) {
|
||||||
|
intervalId = setInterval(handleChange, 50);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const stopInterval = () => {
|
||||||
|
handleChange();
|
||||||
|
if (intervalId) {
|
||||||
|
clearInterval(intervalId);
|
||||||
|
intervalId = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
controls.addEventListener("rest", handleChange);
|
||||||
|
controls.addEventListener("rest", stopInterval);
|
||||||
|
controls.addEventListener("control", startInterval);
|
||||||
|
controls.addEventListener("controlend", stopInterval);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
controls.removeEventListener("rest", handleChange);
|
||||||
|
controls.removeEventListener("rest", stopInterval);
|
||||||
|
controls.removeEventListener("control", startInterval);
|
||||||
|
controls.removeEventListener("controlend", stopInterval);
|
||||||
|
if (intervalId) {
|
||||||
|
clearInterval(intervalId);
|
||||||
|
}
|
||||||
|
};
|
||||||
}
|
}
|
||||||
};
|
}, [state.controls, floorItems, toggleView, renderDistance]);
|
||||||
|
|
||||||
const stopInterval = () => {
|
useEffect(() => {
|
||||||
handleChange();
|
const canvasElement = state.gl.domElement;
|
||||||
if (intervalId) {
|
let drag = false;
|
||||||
clearInterval(intervalId);
|
let isLeftMouseDown = false;
|
||||||
intervalId = null;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
controls.addEventListener("rest", handleChange);
|
const onMouseDown = (evt: any) => {
|
||||||
controls.addEventListener("rest", stopInterval);
|
if (evt.button === 0) {
|
||||||
controls.addEventListener("control", startInterval);
|
isLeftMouseDown = true;
|
||||||
controls.addEventListener("controlend", stopInterval);
|
drag = false;
|
||||||
|
|
||||||
return () => {
|
|
||||||
controls.removeEventListener("rest", handleChange);
|
|
||||||
controls.removeEventListener("rest", stopInterval);
|
|
||||||
controls.removeEventListener("control", startInterval);
|
|
||||||
controls.removeEventListener("controlend", stopInterval);
|
|
||||||
if (intervalId) {
|
|
||||||
clearInterval(intervalId);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}, [state.controls, floorItems, toggleView, renderDistance]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const canvasElement = state.gl.domElement;
|
|
||||||
let drag = false;
|
|
||||||
let isLeftMouseDown = false;
|
|
||||||
|
|
||||||
const onMouseDown = (evt: any) => {
|
|
||||||
if (evt.button === 0) {
|
|
||||||
isLeftMouseDown = true;
|
|
||||||
drag = false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const onMouseMove = () => {
|
|
||||||
console.log('isLeftMouseDown: ', isLeftMouseDown);
|
|
||||||
if (isLeftMouseDown) {
|
|
||||||
drag = true;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const onMouseUp = async (evt: any) => {
|
|
||||||
if (controls) {
|
|
||||||
(controls as any).enabled = true;
|
|
||||||
}
|
|
||||||
if (evt.button === 0) {
|
|
||||||
isLeftMouseDown = false;
|
|
||||||
if (drag) return;
|
|
||||||
|
|
||||||
if (deleteTool) {
|
|
||||||
DeleteFloorItems(
|
|
||||||
itemsGroup,
|
|
||||||
hoveredDeletableFloorItem,
|
|
||||||
setFloorItems,
|
|
||||||
socket
|
|
||||||
);
|
|
||||||
}
|
|
||||||
const Mode = transformMode;
|
|
||||||
|
|
||||||
if (Mode !== null || activeTool === "cursor") {
|
|
||||||
if (!itemsGroup.current) return;
|
|
||||||
let intersects = raycaster.intersectObjects(
|
|
||||||
itemsGroup.current.children,
|
|
||||||
true
|
|
||||||
);
|
|
||||||
if (
|
|
||||||
intersects.length > 0 &&
|
|
||||||
intersects[0]?.object?.parent?.parent?.position &&
|
|
||||||
intersects[0]?.object?.parent?.parent?.scale &&
|
|
||||||
intersects[0]?.object?.parent?.parent?.rotation
|
|
||||||
) {
|
|
||||||
// let currentObject = intersects[0].object;
|
|
||||||
// while (currentObject) {
|
|
||||||
// if (currentObject.name === "Scene") {
|
|
||||||
// break;
|
|
||||||
// }
|
|
||||||
// currentObject = currentObject.parent as THREE.Object3D;
|
|
||||||
// }
|
|
||||||
// if (currentObject) {
|
|
||||||
// AttachedObject.current = currentObject as any;
|
|
||||||
// setSelectedFloorItem(AttachedObject.current!);
|
|
||||||
// }
|
|
||||||
} else {
|
|
||||||
const target = controls.getTarget(new THREE.Vector3());
|
|
||||||
await controls.setTarget(target.x, 0, target.z, true);
|
|
||||||
setSelectedFloorItem(null);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const onDblClick = async (evt: any) => {
|
|
||||||
if (evt.button === 0) {
|
|
||||||
isLeftMouseDown = false;
|
|
||||||
if (drag) return;
|
|
||||||
|
|
||||||
const Mode = transformMode;
|
|
||||||
|
|
||||||
if (Mode !== null || activeTool === "cursor") {
|
|
||||||
if (!itemsGroup.current) return;
|
|
||||||
let intersects = raycaster.intersectObjects(
|
|
||||||
itemsGroup.current.children,
|
|
||||||
true
|
|
||||||
);
|
|
||||||
if (
|
|
||||||
intersects.length > 0 &&
|
|
||||||
intersects[0]?.object?.parent?.parent?.position &&
|
|
||||||
intersects[0]?.object?.parent?.parent?.scale &&
|
|
||||||
intersects[0]?.object?.parent?.parent?.rotation
|
|
||||||
) {
|
|
||||||
let currentObject = intersects[0].object;
|
|
||||||
|
|
||||||
while (currentObject) {
|
|
||||||
if (currentObject.name === "Scene") {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
currentObject = currentObject.parent as THREE.Object3D;
|
|
||||||
}
|
}
|
||||||
if (currentObject) {
|
};
|
||||||
AttachedObject.current = currentObject as any;
|
|
||||||
// controls.fitToSphere(AttachedObject.current!, true);
|
|
||||||
|
|
||||||
const bbox = new THREE.Box3().setFromObject(
|
const onMouseMove = () => {
|
||||||
AttachedObject.current
|
if (isLeftMouseDown) {
|
||||||
);
|
drag = true;
|
||||||
const size = bbox.getSize(new THREE.Vector3());
|
}
|
||||||
const center = bbox.getCenter(new THREE.Vector3());
|
};
|
||||||
|
|
||||||
const front = new THREE.Vector3(0, 0, 1);
|
const onMouseUp = async (evt: any) => {
|
||||||
AttachedObject.current.localToWorld(front);
|
if (controls) {
|
||||||
front.sub(AttachedObject.current.position).normalize();
|
(controls as any).enabled = true;
|
||||||
|
}
|
||||||
const distance = Math.max(size.x, size.y, size.z) * 2;
|
if (evt.button === 0) {
|
||||||
const newPosition = center
|
isLeftMouseDown = false;
|
||||||
.clone()
|
if (drag) return;
|
||||||
.addScaledVector(front, distance);
|
|
||||||
|
if (deleteTool) {
|
||||||
controls.setPosition(
|
DeleteFloorItems(
|
||||||
newPosition.x,
|
itemsGroup,
|
||||||
newPosition.y,
|
hoveredDeletableFloorItem,
|
||||||
newPosition.z,
|
setFloorItems,
|
||||||
true
|
socket
|
||||||
);
|
);
|
||||||
controls.setTarget(center.x, center.y, center.z, true);
|
}
|
||||||
controls.fitToBox(AttachedObject.current!, true, {
|
const Mode = transformMode;
|
||||||
cover: true,
|
|
||||||
paddingTop: 5,
|
if (Mode !== null || activeTool === "cursor") {
|
||||||
paddingLeft: 5,
|
if (!itemsGroup.current) return;
|
||||||
paddingBottom: 5,
|
let intersects = raycaster.intersectObjects(
|
||||||
paddingRight: 5,
|
itemsGroup.current.children,
|
||||||
});
|
true
|
||||||
|
);
|
||||||
setSelectedFloorItem(AttachedObject.current!);
|
if (
|
||||||
|
intersects.length > 0 &&
|
||||||
|
intersects[0]?.object?.parent?.parent?.position &&
|
||||||
|
intersects[0]?.object?.parent?.parent?.scale &&
|
||||||
|
intersects[0]?.object?.parent?.parent?.rotation
|
||||||
|
) {
|
||||||
|
// let currentObject = intersects[0].object;
|
||||||
|
// while (currentObject) {
|
||||||
|
// if (currentObject.name === "Scene") {
|
||||||
|
// break;
|
||||||
|
// }
|
||||||
|
// currentObject = currentObject.parent as THREE.Object3D;
|
||||||
|
// }
|
||||||
|
// if (currentObject) {
|
||||||
|
// AttachedObject.current = currentObject as any;
|
||||||
|
// setSelectedFloorItem(AttachedObject.current!);
|
||||||
|
// }
|
||||||
|
} else {
|
||||||
|
const target = controls.getTarget(new THREE.Vector3());
|
||||||
|
await controls.setTarget(target.x, 0, target.z, true);
|
||||||
|
setSelectedFloorItem(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onDblClick = async (evt: any) => {
|
||||||
|
if (evt.button === 0) {
|
||||||
|
isLeftMouseDown = false;
|
||||||
|
if (drag) return;
|
||||||
|
|
||||||
|
const Mode = transformMode;
|
||||||
|
|
||||||
|
if (Mode !== null || activeTool === "cursor") {
|
||||||
|
if (!itemsGroup.current) return;
|
||||||
|
let intersects = raycaster.intersectObjects(
|
||||||
|
itemsGroup.current.children,
|
||||||
|
true
|
||||||
|
);
|
||||||
|
if (
|
||||||
|
intersects.length > 0 &&
|
||||||
|
intersects[0]?.object?.parent?.parent?.position &&
|
||||||
|
intersects[0]?.object?.parent?.parent?.scale &&
|
||||||
|
intersects[0]?.object?.parent?.parent?.rotation
|
||||||
|
) {
|
||||||
|
let currentObject = intersects[0].object;
|
||||||
|
|
||||||
|
while (currentObject) {
|
||||||
|
if (currentObject.name === "Scene") {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
currentObject = currentObject.parent as THREE.Object3D;
|
||||||
|
}
|
||||||
|
if (currentObject) {
|
||||||
|
AttachedObject.current = currentObject as any;
|
||||||
|
// controls.fitToSphere(AttachedObject.current!, true);
|
||||||
|
|
||||||
|
const bbox = new THREE.Box3().setFromObject(
|
||||||
|
AttachedObject.current
|
||||||
|
);
|
||||||
|
const size = bbox.getSize(new THREE.Vector3());
|
||||||
|
const center = bbox.getCenter(new THREE.Vector3());
|
||||||
|
|
||||||
|
const front = new THREE.Vector3(0, 0, 1);
|
||||||
|
AttachedObject.current.localToWorld(front);
|
||||||
|
front.sub(AttachedObject.current.position).normalize();
|
||||||
|
|
||||||
|
const distance = Math.max(size.x, size.y, size.z) * 2;
|
||||||
|
const newPosition = center
|
||||||
|
.clone()
|
||||||
|
.addScaledVector(front, distance);
|
||||||
|
|
||||||
|
controls.setPosition(
|
||||||
|
newPosition.x,
|
||||||
|
newPosition.y,
|
||||||
|
newPosition.z,
|
||||||
|
true
|
||||||
|
);
|
||||||
|
controls.setTarget(center.x, center.y, center.z, true);
|
||||||
|
controls.fitToBox(AttachedObject.current!, true, {
|
||||||
|
cover: true,
|
||||||
|
paddingTop: 5,
|
||||||
|
paddingLeft: 5,
|
||||||
|
paddingBottom: 5,
|
||||||
|
paddingRight: 5,
|
||||||
|
});
|
||||||
|
|
||||||
|
setSelectedFloorItem(AttachedObject.current!);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const target = controls.getTarget(new THREE.Vector3());
|
||||||
|
await controls.setTarget(target.x, 0, target.z, true);
|
||||||
|
setSelectedFloorItem(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onDrop = (event: any) => {
|
||||||
|
if (!event.dataTransfer?.files[0]) return;
|
||||||
|
|
||||||
|
if (selectedItem.id !== "" && event.dataTransfer?.files[0]) {
|
||||||
|
addAssetModel(
|
||||||
|
raycaster,
|
||||||
|
state.camera,
|
||||||
|
state.pointer,
|
||||||
|
floorGroup,
|
||||||
|
setFloorItems,
|
||||||
|
itemsGroup,
|
||||||
|
isTempLoader,
|
||||||
|
tempLoader,
|
||||||
|
socket,
|
||||||
|
selectedItem,
|
||||||
|
setSelectedItem,
|
||||||
|
addEvent,
|
||||||
|
plane
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onDragOver = (event: any) => {
|
||||||
|
event.preventDefault();
|
||||||
|
};
|
||||||
|
|
||||||
|
if (activeModule === "builder") {
|
||||||
|
canvasElement.addEventListener("mousedown", onMouseDown);
|
||||||
|
canvasElement.addEventListener("mouseup", onMouseUp);
|
||||||
|
canvasElement.addEventListener("mousemove", onMouseMove);
|
||||||
|
canvasElement.addEventListener("dblclick", onDblClick);
|
||||||
|
canvasElement.addEventListener("drop", onDrop);
|
||||||
|
canvasElement.addEventListener("dragover", onDragOver);
|
||||||
|
} else {
|
||||||
|
if (controls) {
|
||||||
|
const target = controls.getTarget(new THREE.Vector3());
|
||||||
|
controls.setTarget(target.x, 0, target.z, true);
|
||||||
|
setSelectedFloorItem(null);
|
||||||
}
|
}
|
||||||
} else {
|
|
||||||
const target = controls.getTarget(new THREE.Vector3());
|
|
||||||
await controls.setTarget(target.x, 0, target.z, true);
|
|
||||||
setSelectedFloorItem(null);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const onDrop = (event: any) => {
|
return () => {
|
||||||
if (!event.dataTransfer?.files[0]) return;
|
canvasElement.removeEventListener("mousedown", onMouseDown);
|
||||||
|
canvasElement.removeEventListener("mouseup", onMouseUp);
|
||||||
|
canvasElement.removeEventListener("mousemove", onMouseMove);
|
||||||
|
canvasElement.removeEventListener("dblclick", onDblClick);
|
||||||
|
canvasElement.removeEventListener("drop", onDrop);
|
||||||
|
canvasElement.removeEventListener("dragover", onDragOver);
|
||||||
|
};
|
||||||
|
}, [
|
||||||
|
deleteTool,
|
||||||
|
transformMode,
|
||||||
|
controls,
|
||||||
|
selectedItem,
|
||||||
|
state.camera,
|
||||||
|
state.pointer,
|
||||||
|
activeTool,
|
||||||
|
activeModule,
|
||||||
|
]);
|
||||||
|
|
||||||
if (selectedItem.id !== "" && event.dataTransfer?.files[0]) {
|
useFrame(() => {
|
||||||
addAssetModel(
|
if (controls)
|
||||||
raycaster,
|
if (deleteTool && activeModule === "builder") {
|
||||||
state.camera,
|
// assetVisibility(itemsGroup, state.camera.position, renderDistance);
|
||||||
state.pointer,
|
DeletableHoveredFloorItems(
|
||||||
floorGroup,
|
state,
|
||||||
setFloorItems,
|
itemsGroup,
|
||||||
itemsGroup,
|
hoveredDeletableFloorItem,
|
||||||
isTempLoader,
|
setDeletableFloorItem
|
||||||
tempLoader,
|
);
|
||||||
socket,
|
} else if (!deleteTool) {
|
||||||
selectedItem,
|
if (hoveredDeletableFloorItem.current) {
|
||||||
setSelectedItem,
|
hoveredDeletableFloorItem.current = undefined;
|
||||||
addEvent,
|
setDeletableFloorItem(null);
|
||||||
plane
|
}
|
||||||
);
|
}
|
||||||
}
|
});
|
||||||
};
|
|
||||||
|
|
||||||
const onDragOver = (event: any) => {
|
return <group ref={itemsGroup} name="itemsGroup"></group>;
|
||||||
event.preventDefault();
|
|
||||||
};
|
|
||||||
|
|
||||||
if (activeModule === "builder") {
|
|
||||||
canvasElement.addEventListener("mousedown", onMouseDown);
|
|
||||||
canvasElement.addEventListener("mouseup", onMouseUp);
|
|
||||||
canvasElement.addEventListener("mousemove", onMouseMove);
|
|
||||||
canvasElement.addEventListener("dblclick", onDblClick);
|
|
||||||
canvasElement.addEventListener("drop", onDrop);
|
|
||||||
canvasElement.addEventListener("dragover", onDragOver);
|
|
||||||
} else {
|
|
||||||
if (controls) {
|
|
||||||
const target = controls.getTarget(new THREE.Vector3());
|
|
||||||
controls.setTarget(target.x, 0, target.z, true);
|
|
||||||
setSelectedFloorItem(null);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
canvasElement.removeEventListener("mousedown", onMouseDown);
|
|
||||||
canvasElement.removeEventListener("mouseup", onMouseUp);
|
|
||||||
canvasElement.removeEventListener("mousemove", onMouseMove);
|
|
||||||
canvasElement.removeEventListener("dblclick", onDblClick);
|
|
||||||
canvasElement.removeEventListener("drop", onDrop);
|
|
||||||
canvasElement.removeEventListener("dragover", onDragOver);
|
|
||||||
};
|
|
||||||
}, [
|
|
||||||
deleteTool,
|
|
||||||
transformMode,
|
|
||||||
controls,
|
|
||||||
selectedItem,
|
|
||||||
state.camera,
|
|
||||||
state.pointer,
|
|
||||||
activeTool,
|
|
||||||
activeModule,
|
|
||||||
]);
|
|
||||||
|
|
||||||
useFrame(() => {
|
|
||||||
if (controls)
|
|
||||||
if (deleteTool && activeModule === "builder") {
|
|
||||||
// assetVisibility(itemsGroup, state.camera.position, renderDistance);
|
|
||||||
DeletableHoveredFloorItems(
|
|
||||||
state,
|
|
||||||
itemsGroup,
|
|
||||||
hoveredDeletableFloorItem,
|
|
||||||
setDeletableFloorItem
|
|
||||||
);
|
|
||||||
} else if (!deleteTool) {
|
|
||||||
if (hoveredDeletableFloorItem.current) {
|
|
||||||
hoveredDeletableFloorItem.current = undefined;
|
|
||||||
setDeletableFloorItem(null);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return <group ref={itemsGroup} name="itemsGroup"></group>;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default FloorItemsGroup;
|
export default FloorItemsGroup;
|
||||||
|
|||||||
Reference in New Issue
Block a user