diff --git a/src/components/EnvironmentModels.tsx b/src/components/EnvironmentModels.tsx new file mode 100644 index 0000000..e661d9a --- /dev/null +++ b/src/components/EnvironmentModels.tsx @@ -0,0 +1,67 @@ +import { FC, useMemo, memo } from "react"; +import { Vector3 } from "three"; + +import Model from "../components/Model"; +import { createFloor } from "../objects/floor"; + +const EnviromentModels: FC = memo(() => { + const floorObject = useMemo(() => { + return createFloor( + new Vector3(0, 0, 0), + { x: 1, y: 0.001, z: 1 }, + "/textures/floor.jpg", + 200 + ); + }, []); + const carpetObject = useMemo(() => { + return createFloor( + new Vector3(0, 1, 0), + { x: 1, y: 0.001, z: 2 }, + "/textures/red-carpet.jpg", + 60, + true, + 4, + 4 + ); + }, []); + + return ( + <> + + + + + + + + + + + + ); +}); + +export default EnviromentModels; diff --git a/src/components/GameCanvas.tsx b/src/components/GameCanvas.tsx index f96603c..cf32b8d 100644 --- a/src/components/GameCanvas.tsx +++ b/src/components/GameCanvas.tsx @@ -1,13 +1,11 @@ import { FC } from "react"; -import { Vector3 } from "three"; import { Canvas } from "@react-three/fiber"; import { OrbitControls, Environment } from "@react-three/drei"; // import Music from "../components/Music"; -import Model from "../components/Model"; import PlayArea from "../components/PlayArea"; +import EnvironmentModels from "../components/EnvironmentModels"; import { Game } from "../types/gameTypes"; -import { createFloor } from "../objects/floor"; type GameCanvasProps = { session: string; @@ -21,22 +19,6 @@ const GameCanvas: FC = ({ gameData }) => { const aspectRatio = window.innerWidth / (window.innerHeight / heightProportion); - const floorObject = createFloor( - new Vector3(0, 0, 0), - { x: 1, y: 0.001, z: 1 }, - "/textures/floor.jpg", - 200 - ); - const carpetObject = createFloor( - new Vector3(0, 1, 0), - { x: 1, y: 0.001, z: 2 }, - "/textures/red-carpet.jpg", - 60, - true, - 4, - 4 - ); - const isLocalEnv = ENVIRONMENT === "local"; if (!gameData) return null; @@ -66,44 +48,11 @@ const GameCanvas: FC = ({ gameData }) => { castShadow shadow-mapSize={[1024, 1024]} />*/} - - - - - - - - - + {isLocalEnv && } - - );