diff --git a/index.html b/index.html index 79cc5f9..05f0bce 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ /> - Vite + React + TS + Play Skyjo!
diff --git a/public/models/GreenChair_01_1k.gltf/GreenChair_01.bin b/public/models/GreenChair_01_1k.gltf/GreenChair_01.bin new file mode 100644 index 0000000..0b00772 Binary files /dev/null and b/public/models/GreenChair_01_1k.gltf/GreenChair_01.bin differ diff --git a/public/models/GreenChair_01_1k.gltf/GreenChair_01_1k.gltf b/public/models/GreenChair_01_1k.gltf/GreenChair_01_1k.gltf new file mode 100644 index 0000000..6082301 --- /dev/null +++ b/public/models/GreenChair_01_1k.gltf/GreenChair_01_1k.gltf @@ -0,0 +1,155 @@ +{ + "asset": { + "generator": "Khronos glTF Blender I/O v1.6.16", + "version": "2.0" + }, + "scene": 0, + "scenes": [ + { + "name": "Scene", + "nodes": [ + 0 + ] + } + ], + "nodes": [ + { + "mesh": 0, + "name": "GreenChair_01" + } + ], + "materials": [ + { + "doubleSided": true, + "name": "GreenChair_01", + "normalTexture": { + "index": 0 + }, + "pbrMetallicRoughness": { + "baseColorTexture": { + "index": 1 + }, + "metallicRoughnessTexture": { + "index": 2 + } + } + } + ], + "meshes": [ + { + "name": "classic-chair.003", + "primitives": [ + { + "attributes": { + "POSITION": 0, + "NORMAL": 1, + "TEXCOORD_0": 2 + }, + "indices": 3, + "material": 0 + } + ] + } + ], + "textures": [ + { + "sampler": 0, + "source": 0 + }, + { + "sampler": 0, + "source": 1 + }, + { + "sampler": 0, + "source": 2 + } + ], + "images": [ + { + "mimeType": "image/jpeg", + "name": "GreenChair_01_nor_gl", + "uri": "textures/GreenChair_01_nor_gl_1k.jpg" + }, + { + "mimeType": "image/jpeg", + "name": "GreenChair_01_diff", + "uri": "textures/GreenChair_01_diff_1k.jpg" + }, + { + "mimeType": "image/jpeg", + "name": "GreenChair_01_metallic-GreenChair_01_roughness", + "uri": "textures/GreenChair_01_arm_1k.jpg" + } + ], + "accessors": [ + { + "bufferView": 0, + "componentType": 5126, + "count": 2934, + "max": [ + 0.3360123336315155, + 1.0579816102981567, + 0.2863401472568512 + ], + "min": [ + -0.3370821177959442, + -0.0005302081117406487, + -0.37804722785949707 + ], + "type": "VEC3" + }, + { + "bufferView": 1, + "componentType": 5126, + "count": 2934, + "type": "VEC3" + }, + { + "bufferView": 2, + "componentType": 5126, + "count": 2934, + "type": "VEC2" + }, + { + "bufferView": 3, + "componentType": 5123, + "count": 12639, + "type": "SCALAR" + } + ], + "bufferViews": [ + { + "buffer": 0, + "byteLength": 35208, + "byteOffset": 0 + }, + { + "buffer": 0, + "byteLength": 35208, + "byteOffset": 35208 + }, + { + "buffer": 0, + "byteLength": 23472, + "byteOffset": 70416 + }, + { + "buffer": 0, + "byteLength": 25278, + "byteOffset": 93888 + } + ], + "samplers": [ + { + "magFilter": 9729, + "minFilter": 9987 + } + ], + "buffers": [ + { + "byteLength": 119168, + "uri": "GreenChair_01.bin" + } + ] +} \ No newline at end of file diff --git a/public/models/GreenChair_01_1k.gltf/textures/GreenChair_01_arm_1k.jpg b/public/models/GreenChair_01_1k.gltf/textures/GreenChair_01_arm_1k.jpg new file mode 100644 index 0000000..d997fce Binary files /dev/null and b/public/models/GreenChair_01_1k.gltf/textures/GreenChair_01_arm_1k.jpg differ diff --git a/public/models/GreenChair_01_1k.gltf/textures/GreenChair_01_diff_1k.jpg b/public/models/GreenChair_01_1k.gltf/textures/GreenChair_01_diff_1k.jpg new file mode 100644 index 0000000..4ea73f2 Binary files /dev/null and b/public/models/GreenChair_01_1k.gltf/textures/GreenChair_01_diff_1k.jpg differ diff --git a/public/models/GreenChair_01_1k.gltf/textures/GreenChair_01_nor_gl_1k.jpg b/public/models/GreenChair_01_1k.gltf/textures/GreenChair_01_nor_gl_1k.jpg new file mode 100644 index 0000000..4803930 Binary files /dev/null and b/public/models/GreenChair_01_1k.gltf/textures/GreenChair_01_nor_gl_1k.jpg differ diff --git a/public/models/arm-chair/modern_arm_chair_01.bin b/public/models/arm-chair/modern_arm_chair_01.bin new file mode 100644 index 0000000..c272734 Binary files /dev/null and b/public/models/arm-chair/modern_arm_chair_01.bin differ diff --git a/public/models/arm-chair/modern_arm_chair_01_1k.gltf b/public/models/arm-chair/modern_arm_chair_01_1k.gltf new file mode 100644 index 0000000..2c53fec --- /dev/null +++ b/public/models/arm-chair/modern_arm_chair_01_1k.gltf @@ -0,0 +1,268 @@ +{ + "asset": { + "generator": "Khronos glTF Blender I/O v3.3.32", + "version": "2.0" + }, + "scene": 0, + "scenes": [ + { + "name": "blend_export.001", + "nodes": [ + 0 + ] + } + ], + "nodes": [ + { + "mesh": 0, + "name": "modern_arm_chair_01" + } + ], + "materials": [ + { + "doubleSided": true, + "name": "modern_arm_chair_01_legs", + "normalTexture": { + "index": 0 + }, + "pbrMetallicRoughness": { + "baseColorTexture": { + "index": 1 + }, + "metallicRoughnessTexture": { + "index": 2 + } + } + }, + { + "doubleSided": true, + "name": "modern_arm_chair_01_pillow", + "normalTexture": { + "index": 3 + }, + "pbrMetallicRoughness": { + "baseColorTexture": { + "index": 4 + }, + "metallicRoughnessTexture": { + "index": 5 + } + } + } + ], + "meshes": [ + { + "name": "Cube.007", + "primitives": [ + { + "attributes": { + "POSITION": 0, + "NORMAL": 1, + "TEXCOORD_0": 2 + }, + "indices": 3, + "material": 0 + }, + { + "attributes": { + "POSITION": 4, + "NORMAL": 5, + "TEXCOORD_0": 6 + }, + "indices": 7, + "material": 1 + } + ] + } + ], + "textures": [ + { + "sampler": 0, + "source": 0 + }, + { + "sampler": 0, + "source": 1 + }, + { + "sampler": 0, + "source": 2 + }, + { + "sampler": 0, + "source": 3 + }, + { + "sampler": 0, + "source": 4 + }, + { + "sampler": 0, + "source": 5 + } + ], + "images": [ + { + "mimeType": "image/jpeg", + "name": "modern_arm_chair_01_legs_nor_gl", + "uri": "textures/modern_arm_chair_01_legs_nor_gl_1k.jpg" + }, + { + "mimeType": "image/jpeg", + "name": "modern_arm_chair_01_legs_diff", + "uri": "textures/modern_arm_chair_01_legs_diff_1k.jpg" + }, + { + "mimeType": "image/jpeg", + "name": "modern_arm_chair_01_legs_metal-modern_arm_chair_01_legs_rough", + "uri": "textures/modern_arm_chair_01_legs_arm_1k.jpg" + }, + { + "mimeType": "image/jpeg", + "name": "modern_arm_chair_01_pillow_nor_gl", + "uri": "textures/modern_arm_chair_01_pillow_nor_gl_1k.jpg" + }, + { + "mimeType": "image/jpeg", + "name": "modern_arm_chair_01_pillow_diff", + "uri": "textures/modern_arm_chair_01_pillow_diff_1k.jpg" + }, + { + "mimeType": "image/jpeg", + "name": "modern_arm_chair_01_pillow_metal-modern_arm_chair_01_pillow_rough", + "uri": "textures/modern_arm_chair_01_pillow_arm_1k.jpg" + } + ], + "accessors": [ + { + "bufferView": 0, + "componentType": 5126, + "count": 3884, + "max": [ + 0.4135356843471527, + 0.8698092699050903, + 0.41110995411872864 + ], + "min": [ + -0.4068087339401245, + 0.0003815953677985817, + -0.56038498878479 + ], + "type": "VEC3" + }, + { + "bufferView": 1, + "componentType": 5126, + "count": 3884, + "type": "VEC3" + }, + { + "bufferView": 2, + "componentType": 5126, + "count": 3884, + "type": "VEC2" + }, + { + "bufferView": 3, + "componentType": 5123, + "count": 16824, + "type": "SCALAR" + }, + { + "bufferView": 4, + "componentType": 5126, + "count": 1967, + "max": [ + 0.3583531975746155, + 1.0232336521148682, + 0.38417327404022217 + ], + "min": [ + -0.3549351990222931, + 0.34748637676239014, + -0.5754517316818237 + ], + "type": "VEC3" + }, + { + "bufferView": 5, + "componentType": 5126, + "count": 1967, + "type": "VEC3" + }, + { + "bufferView": 6, + "componentType": 5126, + "count": 1967, + "type": "VEC2" + }, + { + "bufferView": 7, + "componentType": 5123, + "count": 9924, + "type": "SCALAR" + } + ], + "bufferViews": [ + { + "buffer": 0, + "byteLength": 46608, + "byteOffset": 0, + "target": 34962 + }, + { + "buffer": 0, + "byteLength": 46608, + "byteOffset": 46608, + "target": 34962 + }, + { + "buffer": 0, + "byteLength": 31072, + "byteOffset": 93216, + "target": 34962 + }, + { + "buffer": 0, + "byteLength": 33648, + "byteOffset": 124288, + "target": 34963 + }, + { + "buffer": 0, + "byteLength": 23604, + "byteOffset": 157936, + "target": 34962 + }, + { + "buffer": 0, + "byteLength": 23604, + "byteOffset": 181540, + "target": 34962 + }, + { + "buffer": 0, + "byteLength": 15736, + "byteOffset": 205144, + "target": 34962 + }, + { + "buffer": 0, + "byteLength": 19848, + "byteOffset": 220880, + "target": 34963 + } + ], + "samplers": [ + { + "magFilter": 9729, + "minFilter": 9987 + } + ], + "buffers": [ + { + "byteLength": 240728, + "uri": "modern_arm_chair_01.bin" + } + ] +} \ No newline at end of file diff --git a/public/models/arm-chair/textures/modern_arm_chair_01_legs_arm_1k.jpg b/public/models/arm-chair/textures/modern_arm_chair_01_legs_arm_1k.jpg new file mode 100644 index 0000000..24571e8 Binary files /dev/null and b/public/models/arm-chair/textures/modern_arm_chair_01_legs_arm_1k.jpg differ diff --git a/public/models/arm-chair/textures/modern_arm_chair_01_legs_diff_1k.jpg b/public/models/arm-chair/textures/modern_arm_chair_01_legs_diff_1k.jpg new file mode 100644 index 0000000..32a23df Binary files /dev/null and b/public/models/arm-chair/textures/modern_arm_chair_01_legs_diff_1k.jpg differ diff --git a/public/models/arm-chair/textures/modern_arm_chair_01_legs_nor_gl_1k.jpg b/public/models/arm-chair/textures/modern_arm_chair_01_legs_nor_gl_1k.jpg new file mode 100644 index 0000000..a6d4218 Binary files /dev/null and b/public/models/arm-chair/textures/modern_arm_chair_01_legs_nor_gl_1k.jpg differ diff --git a/public/models/arm-chair/textures/modern_arm_chair_01_pillow_arm_1k.jpg b/public/models/arm-chair/textures/modern_arm_chair_01_pillow_arm_1k.jpg new file mode 100644 index 0000000..dfaba53 Binary files /dev/null and b/public/models/arm-chair/textures/modern_arm_chair_01_pillow_arm_1k.jpg differ diff --git a/public/models/arm-chair/textures/modern_arm_chair_01_pillow_diff_1k.jpg b/public/models/arm-chair/textures/modern_arm_chair_01_pillow_diff_1k.jpg new file mode 100644 index 0000000..e668d04 Binary files /dev/null and b/public/models/arm-chair/textures/modern_arm_chair_01_pillow_diff_1k.jpg differ diff --git a/public/models/arm-chair/textures/modern_arm_chair_01_pillow_nor_gl_1k.jpg b/public/models/arm-chair/textures/modern_arm_chair_01_pillow_nor_gl_1k.jpg new file mode 100644 index 0000000..0fc4291 Binary files /dev/null and b/public/models/arm-chair/textures/modern_arm_chair_01_pillow_nor_gl_1k.jpg differ diff --git a/public/models/sofa/sofa_02.bin b/public/models/sofa/sofa_02.bin new file mode 100644 index 0000000..accedae Binary files /dev/null and b/public/models/sofa/sofa_02.bin differ diff --git a/public/models/sofa/sofa_02_1k.gltf b/public/models/sofa/sofa_02_1k.gltf new file mode 100644 index 0000000..2acf45e --- /dev/null +++ b/public/models/sofa/sofa_02_1k.gltf @@ -0,0 +1,238 @@ +{ + "asset": { + "generator": "Khronos glTF Blender I/O v1.6.16", + "version": "2.0" + }, + "scene": 0, + "scenes": [ + { + "name": "Scene", + "nodes": [ + 0, + 1 + ] + } + ], + "nodes": [ + { + "mesh": 0, + "name": "sofa_02_Base", + "translation": [ + 0.00026735191931948066, + 0.00020578503608703613, + 0.03126468509435654 + ] + }, + { + "mesh": 1, + "name": "sofa_02_Seat", + "translation": [ + 0.00026735191931948066, + 0.00020578503608703613, + 0.03126468509435654 + ] + } + ], + "materials": [ + { + "doubleSided": true, + "name": "sofa_02", + "normalTexture": { + "index": 0 + }, + "pbrMetallicRoughness": { + "baseColorTexture": { + "index": 1 + }, + "metallicRoughnessTexture": { + "index": 2 + } + } + } + ], + "meshes": [ + { + "name": "Plane.001", + "primitives": [ + { + "attributes": { + "POSITION": 0, + "NORMAL": 1, + "TEXCOORD_0": 2 + }, + "indices": 3, + "material": 0 + } + ] + }, + { + "name": "Mesh.007", + "primitives": [ + { + "attributes": { + "POSITION": 4, + "NORMAL": 5, + "TEXCOORD_0": 6 + }, + "indices": 7, + "material": 0 + } + ] + } + ], + "textures": [ + { + "sampler": 0, + "source": 0 + }, + { + "sampler": 0, + "source": 1 + }, + { + "sampler": 0, + "source": 2 + } + ], + "images": [ + { + "mimeType": "image/jpeg", + "name": "sofa_02_nor_gl", + "uri": "textures/sofa_02_nor_gl_1k.jpg" + }, + { + "mimeType": "image/jpeg", + "name": "sofa_02_diff", + "uri": "textures/sofa_02_diff_1k.jpg" + }, + { + "mimeType": "image/jpeg", + "name": "sofa_02_metallic-sofa_02_roughness", + "uri": "textures/sofa_02_arm_1k.jpg" + } + ], + "accessors": [ + { + "bufferView": 0, + "componentType": 5126, + "count": 1616, + "max": [ + 0.9035836458206177, + 0.7094888687133789, + 0.3020688593387604 + ], + "min": [ + -0.9035837054252625, + -5.960464477539063e-8, + -0.5089631676673889 + ], + "type": "VEC3" + }, + { + "bufferView": 1, + "componentType": 5126, + "count": 1616, + "type": "VEC3" + }, + { + "bufferView": 2, + "componentType": 5126, + "count": 1616, + "type": "VEC2" + }, + { + "bufferView": 3, + "componentType": 5123, + "count": 7032, + "type": "SCALAR" + }, + { + "bufferView": 4, + "componentType": 5126, + "count": 212, + "max": [ + 0.7098315358161926, + 0.41038596630096436, + 0.3087882101535797 + ], + "min": [ + -0.7062357068061829, + 0.24655179679393768, + -0.2188045084476471 + ], + "type": "VEC3" + }, + { + "bufferView": 5, + "componentType": 5126, + "count": 212, + "type": "VEC3" + }, + { + "bufferView": 6, + "componentType": 5126, + "count": 212, + "type": "VEC2" + }, + { + "bufferView": 7, + "componentType": 5123, + "count": 1152, + "type": "SCALAR" + } + ], + "bufferViews": [ + { + "buffer": 0, + "byteLength": 19392, + "byteOffset": 0 + }, + { + "buffer": 0, + "byteLength": 19392, + "byteOffset": 19392 + }, + { + "buffer": 0, + "byteLength": 12928, + "byteOffset": 38784 + }, + { + "buffer": 0, + "byteLength": 14064, + "byteOffset": 51712 + }, + { + "buffer": 0, + "byteLength": 2544, + "byteOffset": 65776 + }, + { + "buffer": 0, + "byteLength": 2544, + "byteOffset": 68320 + }, + { + "buffer": 0, + "byteLength": 1696, + "byteOffset": 70864 + }, + { + "buffer": 0, + "byteLength": 2304, + "byteOffset": 72560 + } + ], + "samplers": [ + { + "magFilter": 9729, + "minFilter": 9987 + } + ], + "buffers": [ + { + "byteLength": 74864, + "uri": "sofa_02.bin" + } + ] +} \ No newline at end of file diff --git a/public/models/sofa/textures/sofa_02_arm_1k.jpg b/public/models/sofa/textures/sofa_02_arm_1k.jpg new file mode 100644 index 0000000..f689830 Binary files /dev/null and b/public/models/sofa/textures/sofa_02_arm_1k.jpg differ diff --git a/public/models/sofa/textures/sofa_02_diff_1k.jpg b/public/models/sofa/textures/sofa_02_diff_1k.jpg new file mode 100644 index 0000000..510132b Binary files /dev/null and b/public/models/sofa/textures/sofa_02_diff_1k.jpg differ diff --git a/public/models/sofa/textures/sofa_02_nor_gl_1k.jpg b/public/models/sofa/textures/sofa_02_nor_gl_1k.jpg new file mode 100644 index 0000000..6589de9 Binary files /dev/null and b/public/models/sofa/textures/sofa_02_nor_gl_1k.jpg differ diff --git a/public/music/Local_Forecast.mp3 b/public/music/Local_Forecast.mp3 new file mode 100644 index 0000000..24dd161 Binary files /dev/null and b/public/music/Local_Forecast.mp3 differ diff --git a/public/textures/carpet.jpeg b/public/textures/carpet.jpeg new file mode 100644 index 0000000..e5ab846 Binary files /dev/null and b/public/textures/carpet.jpeg differ diff --git a/public/textures/floor-tile.jpg b/public/textures/floor-tile.jpg new file mode 100644 index 0000000..c790540 Binary files /dev/null and b/public/textures/floor-tile.jpg differ diff --git a/public/textures/red-carpet.jpg b/public/textures/red-carpet.jpg new file mode 100644 index 0000000..7a8fcd4 Binary files /dev/null and b/public/textures/red-carpet.jpg differ diff --git a/public/textures/stone-tile.jpg b/public/textures/stone-tile.jpg new file mode 100644 index 0000000..4298f9a Binary files /dev/null and b/public/textures/stone-tile.jpg differ diff --git a/src/components/GameCanvas.tsx b/src/components/GameCanvas.tsx index 735f4f3..48ecb41 100644 --- a/src/components/GameCanvas.tsx +++ b/src/components/GameCanvas.tsx @@ -1,8 +1,10 @@ import { FC } from "react"; -import { Object3D, Mesh, Vector3 } from "three"; +import { Vector3 } from "three"; import { Canvas } from "@react-three/fiber"; -import { useGLTF } from "@react-three/drei"; +import { OrbitControls, Environment } from "@react-three/drei"; +import Music from "../components/Music"; +import Model from "../components/Model"; import PlayArea from "../components/PlayArea"; import { Game } from "../types/gameTypes"; import { createFloor } from "../objects/floor"; @@ -12,13 +14,30 @@ type GameCanvasProps = { gameData: Game | null; }; +const ENVIRONMENT = import.meta.env.VITE_ENVIRONMENT || ""; + const GameCanvas: FC = ({ gameData }) => { - const tableModel = useGLTF("/models/table.glb"); const heightProportion = 1.4; const aspectRatio = window.innerWidth / (window.innerHeight / heightProportion); - const floorObject = createFloor(new Vector3(0, 0, 0)); + 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; @@ -38,32 +57,53 @@ const GameCanvas: FC = ({ gameData }) => { aspect: aspectRatio, }} > - + + + {/* + />*/} - { - if (node instanceof Mesh) { - // node.castShadow = true; - node.receiveShadow = true; - } - }} /> + + + + + {isLocalEnv && } + ); diff --git a/src/components/Model.tsx b/src/components/Model.tsx new file mode 100644 index 0000000..e4415e9 --- /dev/null +++ b/src/components/Model.tsx @@ -0,0 +1,30 @@ +import { FC } from "react"; +import { useGLTF } from "@react-three/drei"; + +type ModelProps = { + name: string; + path: string; + position: [number, number, number]; + rotation?: [number, number, number]; + scale: [number, number, number]; +}; + +const Model: FC = ({ + path, + position, + rotation = [0, 0, 0], + scale, +}) => { + const model = useGLTF(path); + + return ( + + ); +}; + +export default Model; diff --git a/src/components/Music.tsx b/src/components/Music.tsx new file mode 100644 index 0000000..af1c071 --- /dev/null +++ b/src/components/Music.tsx @@ -0,0 +1,31 @@ +import { FC, useEffect } from "react"; +import { AudioLoader, Audio, AudioListener } from "three"; +import { useThree } from "@react-three/fiber"; + +const Music: FC = () => { + const { camera } = useThree(); // Access the camera using useThree hook + + useEffect(() => { + const listener = new AudioListener(); + camera.add(listener); // Add the listener to the camera + + const sound = new Audio(listener); + const audioLoader = new AudioLoader(); + audioLoader.load("/music/Local_Forecast.mp3", function (buffer) { + sound.setBuffer(buffer); + sound.setLoop(true); + sound.setVolume(0.5); + sound.play(); + }); + + // Cleanup listener on component unmount + return () => { + sound.stop(); + camera.remove(listener); + }; + }, [camera]); + + return <>; +}; + +export default Music; diff --git a/src/objects/floor.ts b/src/objects/floor.ts index 080dbad..703fc79 100644 --- a/src/objects/floor.ts +++ b/src/objects/floor.ts @@ -5,20 +5,33 @@ import { SRGBColorSpace, Vector3, Mesh, + RepeatWrapping, } from "three"; -const textureLoader = new TextureLoader(); -const floorSize = 200; -const floorGeometry = new BoxGeometry( - floorSize * 1, - floorSize * 0.001, - floorSize * 1 -); +export const createFloor = ( + position: Vector3, + sizeObject: { x: number; y: number; z: number }, + texturePath: string, + floorSize: number, + repeating: boolean = false, + repeatX: number = 1, + repeatY: number = 1 +) => { + const textureLoader = new TextureLoader(); + const floorGeometry = new BoxGeometry( + floorSize * sizeObject.x, + floorSize * sizeObject.y, + floorSize * sizeObject.z + ); -const floorTexture = textureLoader.load("/textures/floor.jpg"); -floorTexture.colorSpace = SRGBColorSpace; + const floorTexture = textureLoader.load(texturePath); + floorTexture.colorSpace = SRGBColorSpace; + if (repeating) { + floorTexture.wrapS = RepeatWrapping; + floorTexture.wrapT = RepeatWrapping; + floorTexture.repeat.set(repeatX, repeatY); + } -export const createFloor = (position: Vector3) => { const floorMaterial = [ new MeshBasicMaterial(), new MeshBasicMaterial(),