pb/skyjo-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

some render performance optimizations

Browse source
This commit is contained in:
pb-coding 2023-10-20 10:50:13 +02:00
parent d7e95cf900
commit 882013ec09
2 changed files with 69 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
src/components/EnvironmentModels.tsx Normal file
View file

@ -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 (
<>
<mesh>
<boxGeometry args={[2, 2, 2]} />
<meshStandardMaterial color={0x00ff00} />
</mesh>
<Model
name="table"
path="/models/table.glb"
position={[0, 1.8, 2]}
scale={[2, 2, 2]}
/>
<Model
name="armchair"
path="/models/arm-chair/modern_arm_chair_01_1k.gltf"
position={[0, 0, 16]}
rotation={[0, 3.15, 0]}
scale={[20, 20, 20]}
/>
<Model
name="green-chair"
path="/models/GreenChair_01_1k.gltf/GreenChair_01_1k.gltf"
position={[0, 0, -18]}
rotation={[0, 0, 0]}
scale={[25, 25, 25]}
/>
<Model
name="sofa"
path="/models/sofa/sofa_02_1k.gltf"
position={[-25, 0, 2]}
rotation={[0, 1.55, 0]}
scale={[25, 25, 25]}
/>
<primitive object={floorObject} />
<primitive object={carpetObject} />
</>
);
});
export default EnviromentModels;

55
src/components/GameCanvas.tsx
View file

@ -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<GameCanvasProps> = ({ 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<GameCanvasProps> = ({ gameData }) => {
castShadow
shadow-mapSize={[1024, 1024]}
/>*/}
<mesh>
<boxGeometry args={[2, 2, 2]} />
<meshStandardMaterial color={0x00ff00} />
</mesh>
<Model
name="table"
path="/models/table.glb"
position={[0, 1.8, 2]}
scale={[2, 2, 2]}
/>
<Model
name="armchair"
path="/models/arm-chair/modern_arm_chair_01_1k.gltf"
position={[0, 0, 16]}
rotation={[0, 3.15, 0]}
scale={[20, 20, 20]}
/>
<Model
name="green-chair"
path="/models/GreenChair_01_1k.gltf/GreenChair_01_1k.gltf"
position={[0, 0, -18]}
rotation={[0, 0, 0]}
scale={[25, 25, 25]}
/>
<Model
name="sofa"
path="/models/sofa/sofa_02_1k.gltf"
position={[-25, 0, 2]}
rotation={[0, 1.55, 0]}
scale={[25, 25, 25]}
/>
<EnvironmentModels />
<gridHelper args={[100, 100]} />
<axesHelper args={[5]} />
{isLocalEnv && <OrbitControls />}
<PlayArea gameData={gameData} />
<primitive object={floorObject} />
<primitive object={carpetObject} />
</Canvas>
</div>
);