82 lines
3.4 KiB
TypeScript
82 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/ui/useModuleStore";
|
|
import { useParams } from "react-router-dom";
|
|
import { getUserData } from "../../functions/getUserData";
|
|
import { useLoadingProgress } from "../../store/builder/store";
|
|
import { useSocketStore } from "../../store/socket/useSocketStore";
|
|
import { Color, SRGBColorSpace } from "three";
|
|
import { compressImage } from "../../utils/compressImage";
|
|
import { ALPHA_ORG } from "../../pages/Dashboard";
|
|
|
|
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"] },
|
|
{ name: "jump", keys: ["Space"] },
|
|
],
|
|
[]
|
|
);
|
|
const { assetStore, layoutType } = useSceneContext();
|
|
const { assets } = assetStore();
|
|
const { userId, organization } = getUserData();
|
|
const { projectId } = useParams();
|
|
const { projectSocket } = useSocketStore();
|
|
const { activeModule } = useModuleStore();
|
|
const { loadingProgress } = useLoadingProgress();
|
|
|
|
useEffect(() => {
|
|
if (!projectId || loadingProgress !== 0) return;
|
|
const canvas = document.getElementById("sceneCanvas")?.getElementsByTagName("canvas")[0];
|
|
if (!canvas || !(layoutType === "default" || (layoutType === "useCase" && organization === ALPHA_ORG))) return;
|
|
compressImage(canvas.toDataURL("image/png")).then((screenshotDataUrl) => {
|
|
const updateProjects = {
|
|
projectId,
|
|
organization,
|
|
userId,
|
|
thumbnail: screenshotDataUrl,
|
|
};
|
|
if (projectSocket) {
|
|
projectSocket.emit("v1:project:update", updateProjects);
|
|
}
|
|
});
|
|
// eslint-disable-next-line
|
|
}, [activeModule, assets, loadingProgress, projectId, layoutType]);
|
|
|
|
return (
|
|
<KeyboardControls map={map}>
|
|
<Canvas
|
|
id="sceneCanvas"
|
|
shadows
|
|
color="#aaaa"
|
|
eventPrefix="client"
|
|
onContextMenu={(e) => {
|
|
e.preventDefault();
|
|
}}
|
|
performance={{ min: 0.9, max: 1.0 }}
|
|
onCreated={(e) => {
|
|
e.scene.background = layout === "Main Layout" ? null : new Color(0x19191d);
|
|
}}
|
|
gl={{ outputColorSpace: SRGBColorSpace, powerPreference: "high-performance", antialias: true, preserveDrawingBuffer: true }}
|
|
>
|
|
<Setup />
|
|
<Collaboration />
|
|
<Builder />
|
|
<Simulation />
|
|
<Visualization />
|
|
</Canvas>
|
|
</KeyboardControls>
|
|
);
|
|
}
|