adds floor

src/components/GameCanvas.tsx

@@ -1,10 +1,11 @@
 import { FC } from "react";
-import { Object3D, Mesh } from "three";
+import { Object3D, Mesh, Vector3 } from "three";
 import { Canvas } from "@react-three/fiber";
 import { useGLTF } from "@react-three/drei";
 
 import PlayArea from "../components/PlayArea";
 import { Game } from "../types/gameTypes";
+import { createFloor } from "../objects/floor";
 
 type GameCanvasProps = {
   session: string;
@@ -17,6 +18,8 @@ const GameCanvas: FC<GameCanvasProps> = ({ gameData }) => {
   const aspectRatio =
     window.innerWidth / (window.innerHeight / heightProportion);
 
+  const floorObject = createFloor(new Vector3(0, 0, 0));
+
   if (!gameData) return null;
 
   return (
@@ -60,6 +63,7 @@ const GameCanvas: FC<GameCanvasProps> = ({ gameData }) => {
         <gridHelper args={[100, 100]} />
         <axesHelper args={[5]} />
         <PlayArea gameData={gameData} />
+        <primitive object={floorObject} />
       </Canvas>
     </div>
   );

src/objects/floor.ts

@@ -0,0 +1,35 @@
+import {
+  BoxGeometry,
+  TextureLoader,
+  MeshBasicMaterial,
+  SRGBColorSpace,
+  Vector3,
+  Mesh,
+} from "three";
+
+const textureLoader = new TextureLoader();
+const floorSize = 200;
+const floorGeometry = new BoxGeometry(
+  floorSize * 1,
+  floorSize * 0.001,
+  floorSize * 1
+);
+
+const floorTexture = textureLoader.load("/textures/floor.jpg");
+floorTexture.colorSpace = SRGBColorSpace;
+
+export const createFloor = (position: Vector3) => {
+  const floorMaterial = [
+    new MeshBasicMaterial(),
+    new MeshBasicMaterial(),
+    new MeshBasicMaterial({ map: floorTexture }),
+    new MeshBasicMaterial({ map: floorTexture }),
+    new MeshBasicMaterial(),
+    new MeshBasicMaterial(),
+  ];
+  const floor = new Mesh(floorGeometry, floorMaterial);
+  floor.name = "floor";
+  floor.position.copy(position);
+
+  return floor;
+};