diff --git a/public/textures/floor.jpg b/public/textures/floor.jpg new file mode 100644 index 0000000..9601071 Binary files /dev/null and b/public/textures/floor.jpg differ diff --git a/src/components/GameCanvas.tsx b/src/components/GameCanvas.tsx index 74b2086..735f4f3 100644 --- a/src/components/GameCanvas.tsx +++ b/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 = ({ 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 = ({ gameData }) => { + ); diff --git a/src/objects/floor.ts b/src/objects/floor.ts new file mode 100644 index 0000000..080dbad --- /dev/null +++ b/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; +};