80 lines
3.4 KiB
TypeScript
80 lines
3.4 KiB
TypeScript
import { useEffect, useMemo } from "react";
|
|
import { Canvas } from "@react-three/fiber";
|
|
import { KeyboardControls } from "@react-three/drei";
|
|
import { useSceneContext } from "./sceneContext";
|
|
|
|
import Builder from "../builder/builder";
|
|
import Visualization from "../visualization/visualization";
|
|
import Setup from "./setup/setup";
|
|
import Simulation from "../simulation/simulation";
|
|
import Collaboration from "../collaboration/collaboration";
|
|
import useModuleStore from "../../store/useModuleStore";
|
|
import { useParams } from "react-router-dom";
|
|
import { getAllProjects } from "../../services/dashboard/getAllProjects";
|
|
import { getUserData } from "../../functions/getUserData";
|
|
import { useLoadingProgress, useSocketStore } from "../../store/builder/store";
|
|
import { Color } from "three";
|
|
|
|
export default function Scene({ layout }: { readonly layout: 'Main Layout' | 'Comparison Layout' }) {
|
|
const map = useMemo(() => [
|
|
{ name: "forward", keys: ["ArrowUp", "w", "W"] },
|
|
{ name: "backward", keys: ["ArrowDown", "s", "S"] },
|
|
{ name: "left", keys: ["ArrowLeft", "a", "A"] },
|
|
{ name: "right", keys: ["ArrowRight", "d", "D"] },
|
|
], []);
|
|
const { assetStore } = useSceneContext();
|
|
const { assets } = assetStore();
|
|
const { userId, organization } = getUserData();
|
|
const { projectId } = useParams();
|
|
const { projectSocket } = useSocketStore();
|
|
const { activeModule } = useModuleStore();
|
|
const { loadingProgress } = useLoadingProgress();
|
|
|
|
useEffect(() => {
|
|
if (!projectId && loadingProgress > 1) return;
|
|
getAllProjects(userId, organization)
|
|
.then((projects) => {
|
|
if (!projects || !projects.Projects) return;
|
|
let project = projects.Projects.find((val: any) => val.projectUuid === projectId || val._id === projectId);
|
|
const canvas = document.getElementById("sceneCanvas")?.getElementsByTagName('canvas')[0];
|
|
if (!canvas) return;
|
|
const screenshotDataUrl = (canvas as HTMLCanvasElement)?.toDataURL("image/png");
|
|
const updateProjects = {
|
|
projectId: project?.projectUuid,
|
|
organization,
|
|
userId,
|
|
projectName: project?.projectName,
|
|
thumbnail: screenshotDataUrl,
|
|
};
|
|
if (projectSocket) {
|
|
projectSocket.emit("v1:project:update", updateProjects);
|
|
}
|
|
}).catch((err) => {
|
|
console.error(err);
|
|
});
|
|
}, [activeModule, assets, loadingProgress])
|
|
|
|
return (
|
|
<KeyboardControls map={map}>
|
|
<Canvas
|
|
id="sceneCanvas"
|
|
shadows
|
|
color="#aaaa"
|
|
eventPrefix="client"
|
|
onContextMenu={(e) => {
|
|
e.preventDefault();
|
|
}}
|
|
onCreated={(e) => {
|
|
e.scene.background = layout === 'Main Layout' ? null : new Color(0x19191d);
|
|
}}
|
|
gl={{ powerPreference: "high-performance", antialias: true, preserveDrawingBuffer: true }}
|
|
>
|
|
<Setup />
|
|
<Collaboration />
|
|
<Builder />
|
|
<Simulation />
|
|
<Visualization />
|
|
</Canvas>
|
|
</KeyboardControls>
|
|
);
|
|
} |