parent
34169cc0d8
commit
cb3645a0ea
@ -0,0 +1,63 @@
|
|||||||
|
/*
|
||||||
|
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')
|
@ -1,59 +0,0 @@
|
|||||||
/*
|
|
||||||
Auto-generated by: https://github.com/pmndrs/gltfjsx
|
|
||||||
*/
|
|
||||||
|
|
||||||
import * as THREE from 'three'
|
|
||||||
import React, { useRef } from 'react'
|
|
||||||
import { useGLTF } from '@react-three/drei/useGLTF'
|
|
||||||
|
|
||||||
import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
|
|
||||||
|
|
||||||
type GLTFResult = GLTF & {
|
|
||||||
nodes: {
|
|
||||||
entry_windows_mesh: THREE.Mesh
|
|
||||||
entry_windows_mesh_1: THREE.Mesh
|
|
||||||
dome_ground_mesh027: THREE.Mesh
|
|
||||||
['dome_ground_mesh.027_1']: THREE.Mesh
|
|
||||||
dome_ground_mesh011: THREE.Mesh
|
|
||||||
['dome_ground_mesh.011_1']: THREE.Mesh
|
|
||||||
dome_ground_mesh021: THREE.Mesh
|
|
||||||
['dome_ground_mesh.021_1']: THREE.Mesh
|
|
||||||
}
|
|
||||||
materials: {
|
|
||||||
dome_glass: THREE.MeshStandardMaterial
|
|
||||||
metal_glass: THREE.MeshStandardMaterial
|
|
||||||
marble: THREE.MeshStandardMaterial
|
|
||||||
wooden_floor: THREE.MeshStandardMaterial
|
|
||||||
painting: THREE.MeshStandardMaterial
|
|
||||||
wood: THREE.MeshStandardMaterial
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function Model(props: JSX.IntrinsicElements['group']) {
|
|
||||||
const group = useRef<THREE.Group>()
|
|
||||||
const { nodes, materials } = useGLTF('/museum.glb') as GLTFResult
|
|
||||||
return (
|
|
||||||
<group ref={group} {...props} dispose={null}>
|
|
||||||
<group position={[-5.44, 3.26, -141.11]}>
|
|
||||||
<group position={[0, 11.49, 0]} scale={[2.41, 1.5, 2.41]}>
|
|
||||||
<mesh material={materials.dome_glass} geometry={nodes.entry_windows_mesh.geometry} />
|
|
||||||
<mesh material={materials.metal_glass} geometry={nodes.entry_windows_mesh_1.geometry} />
|
|
||||||
</group>
|
|
||||||
<group position={[0, 0, 0]} scale={[12.83, 7.98, 12.83]}>
|
|
||||||
<mesh material={materials.metal_glass} geometry={nodes.dome_ground_mesh027.geometry} />
|
|
||||||
<mesh material={materials.dome_glass} geometry={nodes['dome_ground_mesh.027_1'].geometry} />
|
|
||||||
</group>
|
|
||||||
<group position={[0, 0, 0]} scale={[12.83, 7.98, 12.83]}>
|
|
||||||
<mesh material={materials.marble} geometry={nodes.dome_ground_mesh011.geometry} />
|
|
||||||
<mesh material={materials.wooden_floor} geometry={nodes['dome_ground_mesh.011_1'].geometry} />
|
|
||||||
</group>
|
|
||||||
<group position={[0, 2.43, 0]} scale={[12.83, 7.98, 12.83]}>
|
|
||||||
<mesh material={materials.painting} geometry={nodes.dome_ground_mesh021.geometry} />
|
|
||||||
<mesh material={materials.wood} geometry={nodes['dome_ground_mesh.021_1'].geometry} />
|
|
||||||
</group>
|
|
||||||
</group>
|
|
||||||
</group>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
useGLTF.preload('/museum.glb')
|
|
Binary file not shown.
Binary file not shown.
@ -1,27 +0,0 @@
|
|||||||
/*
|
|
||||||
auto-generated by: https://github.com/pmndrs/gltfjsx
|
|
||||||
*/
|
|
||||||
import React, { useRef } from 'react'
|
|
||||||
import { useGLTF } from '@react-three/drei/useGLTF'
|
|
||||||
|
|
||||||
export default function Model(props) {
|
|
||||||
const group = useRef()
|
|
||||||
const { nodes, materials } = useGLTF('/model/computer.glb')
|
|
||||||
return (
|
|
||||||
<group ref={group} dispose={null}>
|
|
||||||
<group {...props} scale={[0.3, 0.3, 0.3]}>
|
|
||||||
<mesh material={materials['Material.003']} geometry={nodes.Cube009.geometry} />
|
|
||||||
<mesh
|
|
||||||
material={materials['Material.004']}
|
|
||||||
geometry={nodes['Cube.009_1'].geometry}
|
|
||||||
/>
|
|
||||||
<mesh
|
|
||||||
material={materials['Material.002']}
|
|
||||||
geometry={nodes['Cube.009_2'].geometry}
|
|
||||||
/>
|
|
||||||
</group>
|
|
||||||
</group>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
useGLTF.preload('/model/computer.glb')
|
|
@ -0,0 +1,62 @@
|
|||||||
|
/*
|
||||||
|
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('/model/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}
|
||||||
|
onPointerOver={(e) => {
|
||||||
|
console.log(e.distance)
|
||||||
|
setCurrentMaterial(true)
|
||||||
|
}}
|
||||||
|
onPointerOut={() => setCurrentMaterial(false)}
|
||||||
|
onClick={() => console.log('click')}
|
||||||
|
>
|
||||||
|
<mesh material={materials.keyboard} geometry={nodes.computer_mesh.geometry} />
|
||||||
|
<mesh material={materials.marble} geometry={nodes.computer_mesh_1.geometry} />
|
||||||
|
<mesh material={mat} geometry={nodes.computer_mesh_2.geometry} />
|
||||||
|
</group>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
useGLTF.preload('/model/computer.glb')
|
Loading…
Reference in new issue