Add computer

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<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')

packages/client/public/model/Museum.tsx

@@ -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')

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<ArtworkProps & JSX.IntrinsicElements['group']> = ({
         >
           {obraData.obra_titulo}
         </Text>
+        <Computer
+          position={[-6.0, 0, -2.8]}
+          scale={[1.1, 1.1, 1.1]}
+          rotation={[0, Math.PI, 0]}
+        />
         {model ?? null}
       </group>
     </group>

packages/client/src/3d/models/Computer.js

@@ -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')

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<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')

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 }}
           >
             <Scene />
           </Canvas>