mirror of
https://github.com/DefectingCat/DefectingCat.github.io
synced 2025-07-15 16:51:37 +00:00
feat: add home page model
This commit is contained in:
78
components/models/home/computer-desk.tsx
Normal file
78
components/models/home/computer-desk.tsx
Normal file
@ -0,0 +1,78 @@
|
||||
'use client';
|
||||
|
||||
import { Canvas } from '@react-three/fiber';
|
||||
import { lazy, Suspense } from 'react';
|
||||
import Loading from './loading';
|
||||
import { PerspectiveCamera } from '@react-three/drei/core/PerspectiveCamera';
|
||||
import { Leva, useControls } from 'leva';
|
||||
|
||||
const ComputerModel = lazy(
|
||||
() => 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 (
|
||||
<>
|
||||
<Canvas>
|
||||
<Suspense fallback={<Loading />}>
|
||||
<ambientLight intensity={1} />
|
||||
<directionalLight position={[10, 10, 10]} intensity={0.5} />
|
||||
<ComputerModel
|
||||
scale={0.1}
|
||||
position={[0.6, -6.0, 0]}
|
||||
rotation={[0, -Math.PI, 0]}
|
||||
/>
|
||||
<PerspectiveCamera makeDefault position={[0, 0, 30]} />
|
||||
</Suspense>
|
||||
</Canvas>
|
||||
<Leva />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ComputerDesk;
|
||||
154
components/models/home/computer-model.tsx
Normal file
154
components/models/home/computer-model.tsx
Normal file
@ -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 (
|
||||
<group {...props} dispose={null}>
|
||||
<mesh
|
||||
castShadow
|
||||
receiveShadow
|
||||
geometry={nodes.computer_computer_mat_0.geometry}
|
||||
material={materials.computer_mat}
|
||||
/>
|
||||
<mesh
|
||||
castShadow
|
||||
receiveShadow
|
||||
geometry={nodes.server_server_mat_0.geometry}
|
||||
material={materials.server_mat}
|
||||
/>
|
||||
<mesh
|
||||
castShadow
|
||||
receiveShadow
|
||||
geometry={nodes.vhs_vhsPlayer_mat_0.geometry}
|
||||
material={materials.vhsPlayer_mat}
|
||||
/>
|
||||
<mesh
|
||||
castShadow
|
||||
receiveShadow
|
||||
geometry={nodes.shelf_stand_mat_0.geometry}
|
||||
material={materials.stand_mat}
|
||||
/>
|
||||
<mesh
|
||||
castShadow
|
||||
receiveShadow
|
||||
geometry={nodes.keyboard_mat_mat_mat_0.geometry}
|
||||
material={materials.mat_mat}
|
||||
/>
|
||||
<mesh
|
||||
castShadow
|
||||
receiveShadow
|
||||
geometry={nodes.arm_arm_mat_0.geometry}
|
||||
material={materials.arm_mat}
|
||||
/>
|
||||
<mesh
|
||||
castShadow
|
||||
receiveShadow
|
||||
geometry={nodes.Tv_tv_mat_0.geometry}
|
||||
material={materials.tv_mat}
|
||||
/>
|
||||
<mesh
|
||||
castShadow
|
||||
receiveShadow
|
||||
geometry={nodes.table_table_mat_0.geometry}
|
||||
material={materials.table_mat}
|
||||
/>
|
||||
<mesh
|
||||
castShadow
|
||||
receiveShadow
|
||||
geometry={nodes.Cables_cables_mat_0.geometry}
|
||||
material={materials.cables_mat}
|
||||
/>
|
||||
<mesh
|
||||
castShadow
|
||||
receiveShadow
|
||||
geometry={nodes.props_props_mat_0.geometry}
|
||||
material={materials.props_mat}
|
||||
/>
|
||||
<mesh
|
||||
castShadow
|
||||
receiveShadow
|
||||
geometry={nodes.screen_screens_0.geometry}
|
||||
material={materials.screens}
|
||||
/>
|
||||
<mesh
|
||||
castShadow
|
||||
receiveShadow
|
||||
geometry={nodes.screen_glass_glass_0.geometry}
|
||||
material={materials.glass}
|
||||
/>
|
||||
<mesh
|
||||
castShadow
|
||||
receiveShadow
|
||||
geometry={nodes.Ground_ground_mat_0.geometry}
|
||||
material={materials.ground_mat}
|
||||
/>
|
||||
<mesh
|
||||
castShadow
|
||||
receiveShadow
|
||||
geometry={nodes.peripherals_key_mat_0.geometry}
|
||||
material={materials.key_mat}
|
||||
/>
|
||||
</group>
|
||||
);
|
||||
}
|
||||
|
||||
useGLTF.preload('/models/hacker-room/hacker_room_-_stylized-processed.glb');
|
||||
|
||||
export default Model;
|
||||
26
components/models/home/loading.tsx
Normal file
26
components/models/home/loading.tsx
Normal file
@ -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 (
|
||||
<Html as="div">
|
||||
<div
|
||||
className={clsx(
|
||||
'h-full w-full absolute',
|
||||
'top-0 left-0 flex',
|
||||
'justify-center items-center',
|
||||
'bg-bluish-gray dark:bg-rua-gray-900',
|
||||
'transition-all duration-300',
|
||||
)}
|
||||
>
|
||||
<RUALoading />
|
||||
</div>
|
||||
</Html>
|
||||
);
|
||||
};
|
||||
|
||||
export default Loading;
|
||||
Reference in New Issue
Block a user