68 lines
1.7 KiB
TypeScript
68 lines
1.7 KiB
TypeScript
import { FC } from "react";
|
|
import { Object3D, Mesh } from "three";
|
|
import { Canvas } from "@react-three/fiber";
|
|
import { useGLTF } from "@react-three/drei";
|
|
|
|
import PlayArea from "../components/PlayArea";
|
|
import { Game } from "../types/gameTypes";
|
|
|
|
type GameCanvasProps = {
|
|
session: string;
|
|
gameData: Game | null;
|
|
};
|
|
|
|
const GameCanvas: FC<GameCanvasProps> = ({ gameData }) => {
|
|
const tableModel = useGLTF("/models/table.glb");
|
|
const heightProportion = 1.4;
|
|
const aspectRatio =
|
|
window.innerWidth / (window.innerHeight / heightProportion);
|
|
|
|
if (!gameData) return null;
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
width: window.innerWidth,
|
|
height: window.innerHeight / heightProportion,
|
|
}}
|
|
>
|
|
<Canvas
|
|
camera={{
|
|
position: [0, 43, 10],
|
|
fov: 75,
|
|
near: 0.1,
|
|
far: 1000,
|
|
aspect: aspectRatio,
|
|
}}
|
|
>
|
|
<ambientLight color={0xa3a3a3} intensity={0.1} />
|
|
<directionalLight
|
|
color={0xffffff}
|
|
position={[0, 50, 20]}
|
|
castShadow
|
|
shadow-mapSize={[1024, 1024]}
|
|
/>
|
|
<mesh>
|
|
<boxGeometry args={[2, 2, 2]} />
|
|
<meshStandardMaterial color={0x00ff00} />
|
|
</mesh>
|
|
<primitive
|
|
object={tableModel.scene}
|
|
position={[0, 1.8, 2]}
|
|
scale={[2, 2, 2]}
|
|
traverse={(node: Object3D) => {
|
|
if (node instanceof Mesh) {
|
|
// node.castShadow = true;
|
|
node.receiveShadow = true;
|
|
}
|
|
}}
|
|
/>
|
|
<gridHelper args={[100, 100]} />
|
|
<axesHelper args={[5]} />
|
|
<PlayArea gameData={gameData} />
|
|
</Canvas>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default GameCanvas;
|