You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
1.7 KiB
64 lines
1.7 KiB
/*
|
|
Auto-generated by: https://github.com/pmndrs/gltfjsx
|
|
*/
|
|
|
|
import * as THREE from 'three'
|
|
import React, { useMemo, useRef, useState } from 'react'
|
|
import { useGLTF } from '@react-three/drei/useGLTF'
|
|
|
|
import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
|
|
import { Color, FrontSide, MeshLambertMaterial } from 'three'
|
|
|
|
type GLTFResult = GLTF & {
|
|
nodes: {
|
|
computer_mesh: THREE.Mesh
|
|
computer_mesh_1: THREE.Mesh
|
|
computer_mesh_2: THREE.Mesh
|
|
}
|
|
materials: {
|
|
keyboard: THREE.MeshStandardMaterial
|
|
marble: THREE.MeshStandardMaterial
|
|
computer_screen: THREE.MeshStandardMaterial
|
|
}
|
|
}
|
|
|
|
export default function Model(props: JSX.IntrinsicElements['group']) {
|
|
const group = useRef<THREE.Group>()
|
|
const [currentMaterial, setCurrentMaterial] = useState(false)
|
|
const { nodes, materials } = useGLTF('/computer.glb') as GLTFResult
|
|
|
|
const onMaterial = useMemo(() => {
|
|
const m = new MeshLambertMaterial({
|
|
color: new Color('#57bc78'),
|
|
emissive: new Color('#97ffbd'),
|
|
side: FrontSide,
|
|
flatShading: false,
|
|
})
|
|
|
|
return m
|
|
}, [])
|
|
|
|
const mat = currentMaterial ? onMaterial : materials.computer_screen
|
|
|
|
return (
|
|
<group ref={group} {...props} dispose={null} onClick={(e) => console.log('click')}>
|
|
<mesh
|
|
onClick={(e) => console.log('click')}
|
|
geometry={nodes.computer_mesh.geometry}
|
|
/>
|
|
<mesh
|
|
onClick={(e) => console.log('click')}
|
|
material={materials.marble}
|
|
geometry={nodes.computer_mesh_1.geometry}
|
|
/>
|
|
<mesh
|
|
onClick={(e) => console.log('click')}
|
|
material={mat}
|
|
geometry={nodes.computer_mesh_2.geometry}
|
|
/>
|
|
</group>
|
|
)
|
|
}
|
|
|
|
useGLTF.preload('/computer.glb')
|