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