Skip to content

Commit eed4380

Browse files
chamchi0809chamchi0809
committed
feat: MonitorBG 컴포넌트에서 Videogame을 GameBoy로 변경 및 GameBoy 모델 추가
1 parent 3c698cd commit eed4380

4 files changed

Lines changed: 42 additions & 2 deletions

File tree

‎public/models/GameBoy-transformed.glb‎

67.4 KB
Binary file not shown.

‎public/models/GameBoy.glb‎

2.55 MB
Binary file not shown.

‎src/components/GameBoy.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
/*
2+
Auto-generated by: https://github.com/pmndrs/gltfjsx
3+
Command: npx gltfjsx@6.5.3 public/models/GameBoy.glb -T -j -t -s -E -o src/components/GameBoy.tsx
4+
Files: public/models/GameBoy.glb [2.67MB] > C:\Users\User\IdeaProjects\blog\src\components\GameBoy-transformed.glb [69.01KB] (97%)
5+
*/
6+
7+
import * as THREE from 'three'
8+
import React, {type JSX} from 'react'
9+
import {useGLTF} from '@react-three/drei'
10+
import {type GLTF} from 'three-stdlib'
11+
12+
type GLTFResult = GLTF & {
13+
nodes: {
14+
GameBoy: THREE.Mesh
15+
A: THREE.Mesh
16+
B: THREE.Mesh
17+
['+']: THREE.Mesh
18+
['2']: THREE.Mesh
19+
['1']: THREE.Mesh
20+
}
21+
materials: {
22+
lambert2SG: THREE.MeshPhysicalMaterial
23+
}
24+
}
25+
26+
export default function Model(props: JSX.IntrinsicElements['group']) {
27+
const {nodes, materials} = useGLTF('/models/GameBoy-transformed.glb') as unknown as GLTFResult
28+
return (
29+
<group {...props} dispose={null}>
30+
<mesh castShadow receiveShadow geometry={nodes.GameBoy.geometry} material={materials.lambert2SG} rotation={[Math.PI / 2, 0, 0]}/>
31+
<mesh castShadow receiveShadow geometry={nodes.A.geometry} material={materials.lambert2SG} rotation={[Math.PI / 2, 0, 0]}/>
32+
<mesh castShadow receiveShadow geometry={nodes.B.geometry} material={materials.lambert2SG} rotation={[Math.PI / 2, 0, 0]}/>
33+
<mesh castShadow receiveShadow geometry={nodes['+'].geometry} material={materials.lambert2SG} rotation={[Math.PI / 2, 0, 0]}/>
34+
<mesh castShadow receiveShadow geometry={nodes['2'].geometry} material={materials.lambert2SG} rotation={[Math.PI / 2, 0, 0]}/>
35+
<mesh castShadow receiveShadow geometry={nodes['1'].geometry} material={materials.lambert2SG} rotation={[Math.PI / 2, 0, 0]}/>
36+
</group>
37+
)
38+
}
39+
40+
useGLTF.preload('/models/GameBoy-transformed.glb')

‎src/components/MonitorBG.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {Canvas, useFrame, useThree} from "@react-three/fiber";
2-
import Videogame from "./Videogame.tsx";
2+
import GameBoy from "./GameBoy.tsx";
33
import {CameraShake, ContactShadows, Float, Html} from "@react-three/drei";
44
import * as THREE from "three";
55
import {DoubleSide} from "three";
@@ -12,7 +12,7 @@ export default function MonitorBG() {
1212
<Canvas eventPrefix="client" shadows dpr={[1, 2]} style={{width: '100%', height: '100%'}} camera={[0, 0, CAM_DISTANCE, {fov: 50}] as any}>
1313
<ambientLight color={"#dadacf"} intensity={1.2}/>
1414
<Float rotationIntensity={1.5} floatIntensity={1.5} speed={3}>
15-
<Videogame position={[-1, -1, 0]} rotation={[.2, 0, 0]} scale={.25}/>
15+
<GameBoy position={[-1, -1, 0]} rotation={[.2, 0, 0]} scale={.25}/>
1616
<Html occlude={"raycast"} transform castShadow receiveShadow scale={.25} position={[1, 0, 0]} rotation={[.2, 0, 0]}
1717
material={<meshStandardMaterial side={DoubleSide} opacity={.1}/>}>
1818
<Card/>

0 commit comments

Comments
 (0)