diff --git a/packages/client/public/model/Computer.tsx b/packages/client/public/model/Computer.tsx new file mode 100644 index 0000000..c7a7ac6 --- /dev/null +++ b/packages/client/public/model/Computer.tsx @@ -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() + 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 ( + console.log('click')}> + console.log('click')} + geometry={nodes.computer_mesh.geometry} + /> + console.log('click')} + material={materials.marble} + geometry={nodes.computer_mesh_1.geometry} + /> + console.log('click')} + material={mat} + geometry={nodes.computer_mesh_2.geometry} + /> + + ) +} + +useGLTF.preload('/computer.glb') diff --git a/packages/client/public/model/Museum.tsx b/packages/client/public/model/Museum.tsx deleted file mode 100644 index 6b6e3e1..0000000 --- a/packages/client/public/model/Museum.tsx +++ /dev/null @@ -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() - const { nodes, materials } = useGLTF('/museum.glb') as GLTFResult - return ( - - - - - - - - - - - - - - - - - - - - - ) -} - -useGLTF.preload('/museum.glb') diff --git a/packages/client/public/model/computer.glb b/packages/client/public/model/computer.glb new file mode 100644 index 0000000..1f2cf42 --- /dev/null +++ b/packages/client/public/model/computer.glb @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:69cf5cbe8ee6fe125839884f0311df00d9e819027e06142e39faaf4e36080d73 +size 244416 diff --git a/packages/client/public/model/museum.glb b/packages/client/public/model/museum.glb index 9331c5d..411c304 100644 --- a/packages/client/public/model/museum.glb +++ b/packages/client/public/model/museum.glb @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:88b93829036d92e4593c7d60e8c6125b257132efc8cff12181f9b3fdb0a2cb5c -size 4239756 +oid sha256:c22e9fdb061fa6d17a19e5c588c537de30ad65ca4adb8ff0b3e397eb19f1ff33 +size 4239832 diff --git a/packages/client/src/3d/Artwork.tsx b/packages/client/src/3d/Artwork.tsx index ff7a524..58a207d 100644 --- a/packages/client/src/3d/Artwork.tsx +++ b/packages/client/src/3d/Artwork.tsx @@ -1,5 +1,6 @@ import React from 'react' import { Text } from '@react-three/drei' +import Computer from './models/Computer' interface IObraData { full_name: string @@ -37,6 +38,11 @@ const Artwork: React.FC = ({ > {obraData.obra_titulo} + {model ?? null} diff --git a/packages/client/src/3d/models/Computer.js b/packages/client/src/3d/models/Computer.js deleted file mode 100644 index b638803..0000000 --- a/packages/client/src/3d/models/Computer.js +++ /dev/null @@ -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 ( - - - - - - - - ) -} - -useGLTF.preload('/model/computer.glb') diff --git a/packages/client/src/3d/models/Computer.tsx b/packages/client/src/3d/models/Computer.tsx new file mode 100644 index 0000000..04c24c6 --- /dev/null +++ b/packages/client/src/3d/models/Computer.tsx @@ -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() + 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 ( + { + console.log(e.distance) + setCurrentMaterial(true) + }} + onPointerOut={() => setCurrentMaterial(false)} + onClick={() => console.log('click')} + > + + + + + ) +} + +useGLTF.preload('/model/computer.glb') diff --git a/packages/client/src/components/Museo.tsx b/packages/client/src/components/Museo.tsx index 55c397d..b3cc2d6 100644 --- a/packages/client/src/components/Museo.tsx +++ b/packages/client/src/components/Museo.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react' +import React, { useCallback, useEffect } from 'react' import { io } from 'socket.io-client' import { Box } from '@chakra-ui/react' @@ -21,6 +21,18 @@ const Museo: React.FC = () => { const setUserTransforms = useStore((state) => state.setUserTransforms) const setInitialTransform = useStore((state) => state.setInitialTransform) + const computeOffsets = useCallback((event) => { + const { offsetX, offsetY } = event.nativeEvent + + const diffX = window.innerWidth / 2 - offsetX + const diffY = window.innerHeight / 2 - offsetY + + return { + offsetX: diffX + offsetX, + offsetY: diffY + offsetY, + } + }, []) + useEffect(() => { if (!response || isLoading) { return @@ -67,6 +79,7 @@ const Museo: React.FC = () => { near: 0.25, far: 200, }} + raycaster={{ computeOffsets }} >