diff --git a/app/page.tsx b/app/page.tsx index 9ee2056..72d67c4 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -3,7 +3,9 @@ import dynamic from 'next/dynamic'; import Image from 'next/image'; import styles from 'styles/index/index.module.css'; -const HomeModel = dynamic(() => import('components/models/home-model')); +const ComputerDesk = dynamic( + () => import('components/models/home/computer-desk'), +); export const metadata = { title: 'RUA - Home', @@ -12,6 +14,10 @@ export const metadata = { export default function Page() { return (
+
+ +
+
import('components/models/home/computer-model'), +); + +const ComputerDesk = () => { + const c = useControls('RUARoom', { + positionX: { + value: 0, + min: -10, + max: 10, + step: 0.1, + }, + positionY: { + value: 0, + min: -10, + max: 10, + step: 0.1, + }, + positionZ: { + value: 0, + min: -10, + max: 10, + step: 0.01, + }, + rotationX: { + value: 0, + min: -Math.PI, + max: Math.PI, + step: 0.01, + }, + rotationY: { + value: 0, + min: -Math.PI, + max: Math.PI, + step: 0.01, + }, + rotationZ: { + value: 0, + min: -Math.PI, + max: Math.PI, + step: 0.001, + }, + scale: { + value: 1, + min: 0.1, + max: 10, + step: 0.01, + }, + }); + + return ( + <> + + }> + + + + + + + + + ); +}; + +export default ComputerDesk; diff --git a/components/models/home/computer-model.tsx b/components/models/home/computer-model.tsx new file mode 100644 index 0000000..b5e3558 --- /dev/null +++ b/components/models/home/computer-model.tsx @@ -0,0 +1,154 @@ +'use client'; + +/* +Auto-generated by: https://github.com/pmndrs/gltfjsx +Author: david.campuzano (https://sketchfab.com/david.campuzano) +License: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/) +Source: https://sketchfab.com/3d-models/hacker-room-stylized-a0cfe6edf2dd494c8a95addf6bb13a10 +Title: Hacker Room - Stylized +*/ +import { useGLTF } from '@react-three/drei'; +import { useLoader } from '@react-three/fiber'; +import { JSX } from 'react'; +import * as THREE from 'three'; +import { DRACOLoader, GLTF, GLTFLoader } from 'three-stdlib'; + +type GLTFResult = GLTF & { + nodes: { + computer_computer_mat_0: THREE.Mesh; + server_server_mat_0: THREE.Mesh; + vhs_vhsPlayer_mat_0: THREE.Mesh; + shelf_stand_mat_0: THREE.Mesh; + keyboard_mat_mat_mat_0: THREE.Mesh; + arm_arm_mat_0: THREE.Mesh; + Tv_tv_mat_0: THREE.Mesh; + table_table_mat_0: THREE.Mesh; + Cables_cables_mat_0: THREE.Mesh; + props_props_mat_0: THREE.Mesh; + screen_screens_0: THREE.Mesh; + screen_glass_glass_0: THREE.Mesh; + Ground_ground_mat_0: THREE.Mesh; + peripherals_key_mat_0: THREE.Mesh; + }; + materials: { + computer_mat: THREE.MeshStandardMaterial; + server_mat: THREE.MeshStandardMaterial; + vhsPlayer_mat: THREE.MeshStandardMaterial; + stand_mat: THREE.MeshStandardMaterial; + mat_mat: THREE.MeshStandardMaterial; + arm_mat: THREE.MeshStandardMaterial; + tv_mat: THREE.MeshStandardMaterial; + table_mat: THREE.MeshStandardMaterial; + cables_mat: THREE.MeshStandardMaterial; + props_mat: THREE.MeshStandardMaterial; + screens: THREE.MeshStandardMaterial; + glass: THREE.MeshPhysicalMaterial; + ground_mat: THREE.MeshStandardMaterial; + key_mat: THREE.MeshStandardMaterial; + }; +}; + +export function Model(props: JSX.IntrinsicElements['group']) { + const { nodes, materials } = useLoader( + GLTFLoader, + '/models/hacker-room/hacker_room_-_stylized-processed.glb', + (loader) => { + const dracoLoader = new DRACOLoader(); + dracoLoader.setDecoderPath('/libs/draco/'); + loader.setDRACOLoader(dracoLoader); + }, + ) as unknown as GLTFResult; + + return ( + + + + + + + + + + + + + + + + + ); +} + +useGLTF.preload('/models/hacker-room/hacker_room_-_stylized-processed.glb'); + +export default Model; diff --git a/components/models/home/loading.tsx b/components/models/home/loading.tsx new file mode 100644 index 0000000..eb217a7 --- /dev/null +++ b/components/models/home/loading.tsx @@ -0,0 +1,26 @@ +import { Html, useProgress } from '@react-three/drei'; +import clsx from 'clsx'; +import RUALoading from 'components/rua/loading/rua-loading'; + +const Loading = () => { + const { progress } = useProgress(); + console.log(progress); + + return ( + +
+ +
+ + ); +}; + +export default Loading; diff --git a/package.json b/package.json index 548e862..7a3bbc6 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "remark-rehype": "^11.1.1", "sharp": "^0.34.1", "three": "^0.176.0", + "three-stdlib": "^2.36.0", "unified": "^11.0.5", "zustand": "^5.0.4" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6fa6f6a..a05c020 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -98,6 +98,9 @@ importers: three: specifier: ^0.176.0 version: 0.176.0 + three-stdlib: + specifier: ^2.36.0 + version: 2.36.0(three@0.176.0) unified: specifier: ^11.0.5 version: 11.0.5 diff --git a/public/models/hacker-room/hacker_room_-_stylized-processed.glb b/public/models/hacker-room/hacker_room_-_stylized-processed.glb new file mode 100644 index 0000000..2f09de8 Binary files /dev/null and b/public/models/hacker-room/hacker_room_-_stylized-processed.glb differ diff --git a/public/models/lowpoly-desk/lowpoly_desk-processed.glb b/public/models/lowpoly-desk/lowpoly_desk-processed.glb new file mode 100644 index 0000000..ac178c8 Binary files /dev/null and b/public/models/lowpoly-desk/lowpoly_desk-processed.glb differ