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
4 years ago
|
/*
|
||
|
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')
|