Add remaining obras

packages/client/src/3d/ArtworkCollection.tsx

@@ -12,17 +12,22 @@ import Gaston from './models/obras/Gaston'
 import Daniela from './models/obras/Daniela'
 import Pedro from './models/obras/Pedro'
 import DiegoGuido from './models/obras/DiegoGuido'
+import JuanCruz from './models/obras/JuanCruz'
+import Cordoba from './models/obras/Cordoba'
+import Camila from './models/obras/Camila'
+import Novello from './models/obras/Novello'
+import Eduardo from './models/obras/Eduardo'
 
 const models: (JSX.Element | null)[] = [
   <Daniela key="daniela" />, // <Daniela />,
-  null, // Juan cruz
+  <JuanCruz key="juan_cruz" />, // Juan cruz
-  null, // Lucia cordoba
+  <Cordoba key="cordoba" />, // Lucia cordoba
-  null, // Camila
+  <Camila key="camila" />, // Camila
   <Julieta key="julieta" />,
-  null, // Lucia Novello
+  <Novello key="novello" />, // Lucia Novello
   <Santiaga key="santiaga" />,
   <Carolina key="carolina" />,
-  null, // Edu
+  <Eduardo key="eduardo" />, // Edu
   <Julian key="julian" />,
   <Mateo key="mateo" />,
   <Gaston key="gaston" />,

packages/client/src/3d/models/obras/Camila.tsx

@@ -0,0 +1,34 @@
+/*
+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: {
+    Plane: THREE.Mesh
+  }
+  materials: {
+    cami: THREE.MeshStandardMaterial
+  }
+}
+
+export default function Model(props: JSX.IntrinsicElements['group']) {
+  const group = useRef<THREE.Group>()
+  const { nodes, materials } = useGLTF('/model/obras/camila.glb') as GLTFResult
+  return (
+    <group ref={group} {...props} dispose={null} position={[0, 0.1, 0]}>
+      <mesh
+        material={materials.cami}
+        geometry={nodes.Plane.geometry}
+        rotation={[0, Math.PI / 2, 0]}
+      />
+    </group>
+  )
+}
+
+useGLTF.preload('/model/obras/camila.glb')

packages/client/src/3d/models/obras/Carolina.tsx

@@ -5,6 +5,7 @@ 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 { Text } from '@react-three/drei'
 
 import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
 
@@ -19,11 +20,63 @@ type GLTFResult = GLTF & {
   }
 }
 
+const text = [
+  `Porque nada nos llevamos y sólo una cosa dejamos, lo mucho que hemos amado. Por eso
+a pesar de la ausencia tu amor me sigue abrazando y yo te sigo amando como si mis ojos
+te vieran`,
+  `Cómo van las cosas por allá? acá está todo muy raro, hace mucho que estamos
+encerrados, vos te estarías volviendo loca. Se que aunque no estas acá conmigo
+físicamente, estas. Te siento y te amo. Sé que estás acá.`,
+  `Mamá, te extraño mucho, te sueño. Me gustaría que estés acá, pero entiendo que tu cuerpo
+ya no podía más. Sé que estarías contenta de saber qué armamos un estudio en casa y
+siempre tiene las flores que te gustan. Espero que te hayas encontrado con papá y estés
+feliz.`,
+]
+
 export default function Model(props: JSX.IntrinsicElements['group']) {
   const group = useRef<THREE.Group>()
   const { nodes, materials } = useGLTF('/model/obras/carolina.glb') as GLTFResult
   return (
     <group ref={group} {...props} dispose={null}>
+      <group rotation={[0, -0.7, 0]} position={[0, 3.5, 0]}>
+        <Text
+          position={[0, 0, -6]}
+          color="white"
+          rotation={[0.3, 0, 0]}
+          fontSize={0.2}
+          font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
+          anchorX="center"
+          anchorY="middle"
+        >
+          {text[0]}
+        </Text>
+      </group>
+      <group rotation={[0, 0.8, 0]} position={[0, 3.5, 0]}>
+        <Text
+          rotation={[0.3, 0, 0]}
+          position={[0, 0, -6]}
+          color="white"
+          fontSize={0.17}
+          font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
+          anchorX="center"
+          anchorY="middle"
+        >
+          {text[1]}
+        </Text>
+      </group>
+      <group rotation={[0, 2.6, 0]} position={[0, 4, 0]}>
+        <Text
+          position={[0, 0, -7]}
+          rotation={[0.3, 0, 0]}
+          color="white"
+          fontSize={0.17}
+          font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
+          anchorX="center"
+          anchorY="middle"
+        >
+          {text[2]}
+        </Text>
+      </group>
       <group>
         <mesh
           material={materials['sphere_inner.001']}

packages/client/src/3d/models/obras/Cordoba.tsx

@@ -0,0 +1,30 @@
+/*
+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: {
+    museum_building015: THREE.Mesh
+  }
+  materials: {
+    lucia: THREE.MeshStandardMaterial
+  }
+}
+
+export default function Model(props: JSX.IntrinsicElements['group']) {
+  const group = useRef<THREE.Group>()
+  const { nodes, materials } = useGLTF('/model/obras/cordoba.glb') as GLTFResult
+  return (
+    <group ref={group} {...props} dispose={null} position={[1, 0, 0]}>
+      <mesh material={materials.lucia} geometry={nodes.museum_building015.geometry} />
+    </group>
+  )
+}
+
+useGLTF.preload('/model/obras/cordoba.glb')

packages/client/src/3d/models/obras/Eduardo.tsx

@@ -0,0 +1,32 @@
+/*
+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'
+import ObraAudio from '../../ObraAudio'
+
+type GLTFResult = GLTF & {
+  nodes: {
+    Sphere: THREE.Mesh
+  }
+  materials: {
+    Material: THREE.MeshStandardMaterial
+  }
+}
+
+export default function Model(props: JSX.IntrinsicElements['group']) {
+  const group = useRef<THREE.Group>()
+  const { nodes, materials } = useGLTF('/model/obras/eduardo.glb') as GLTFResult
+  return (
+    <group ref={group} {...props} dispose={null}>
+      <mesh material={materials.Material} geometry={nodes.Sphere.geometry} />
+      <ObraAudio position={[0, 0, 0]} url="/audio/eduardo.ogg" loop distance={1} />
+    </group>
+  )
+}
+
+useGLTF.preload('/model/obras/eduardo.glb')

packages/client/src/3d/models/obras/JuanCruz.tsx

@@ -0,0 +1,30 @@
+/*
+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: {
+    museum_building014: THREE.Mesh
+  }
+  materials: {
+    lhli: THREE.MeshStandardMaterial
+  }
+}
+
+export default function Model(props: JSX.IntrinsicElements['group']) {
+  const group = useRef<THREE.Group>()
+  const { nodes, materials } = useGLTF('/model/obras/juan_cruz.glb') as GLTFResult
+  return (
+    <group ref={group} {...props} dispose={null} position={[2, 0.05, 0]}>
+      <mesh material={materials.lhli} geometry={nodes.museum_building014.geometry} />
+    </group>
+  )
+}
+
+useGLTF.preload('/model/obras/juan_cruz.glb')

packages/client/src/3d/models/obras/Julieta.tsx

@@ -7,6 +7,7 @@ import React, { useRef } from 'react'
 import { useGLTF } from '@react-three/drei/useGLTF'
 
 import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
+import ObraAudio from '../../ObraAudio'
 
 type GLTFResult = GLTF & {
   nodes: {
@@ -28,6 +29,7 @@ export default function Model(props: JSX.IntrinsicElements['group']) {
   const { nodes, materials } = useGLTF('/model/obras/julieta.glb') as GLTFResult
   return (
     <group ref={group} {...props} dispose={null}>
+      <ObraAudio position={[0, 0, 0]} url="/audio/julieta.ogg" loop distance={1} />
       <mesh
         material={materials['metal.001']}
         geometry={nodes.dome_ground_mesh014.geometry}

packages/client/src/3d/models/obras/Novello.tsx

@@ -0,0 +1,71 @@
+/*
+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 { Text } from '@react-three/drei'
+
+import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
+
+type GLTFResult = GLTF & {
+  nodes: {
+    Circle: THREE.Mesh
+  }
+  materials: {
+    novello: THREE.MeshStandardMaterial
+  }
+}
+
+const text = [
+  '¿Cual es la diferencia entre género y sexo?',
+  'Respetar las diferencias y la diversidad nos acerca',
+  '¿que es la identidad de género?',
+]
+
+export default function Model(props: JSX.IntrinsicElements['group']) {
+  const group = useRef<THREE.Group>()
+  const { nodes, materials } = useGLTF('/model/obras/novello.glb') as GLTFResult
+  return (
+    <group ref={group} {...props} dispose={null} position={[0, 0.1, 0]}>
+      <group rotation={[0, 0.3, 0]} position={[0, 1, 0]}>
+        <Text
+          position={[0, 0, 0.8]}
+          color="white"
+          fontSize={0.08}
+          font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
+          anchorX="center"
+          anchorY="middle"
+        >
+          {text[0]}
+        </Text>
+      </group>
+      <group rotation={[0, 0.8, 0]} position={[0, 1.2, 0]}>
+        <Text
+          color="white"
+          fontSize={0.09}
+          font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
+          anchorX="center"
+          anchorY="middle"
+        >
+          {text[1]}
+        </Text>
+      </group>
+      <group rotation={[0, 2.4, 0]} position={[0, 0.8, 0]}>
+        <Text
+          color="white"
+          fontSize={0.09}
+          font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
+          anchorX="center"
+          anchorY="middle"
+        >
+          {text[2]}
+        </Text>
+      </group>
+      <mesh material={materials.novello} geometry={nodes.Circle.geometry} />
+    </group>
+  )
+}
+
+useGLTF.preload('/model/obras/novello.glb')

packages/client/src/3d/models/obras/Proyector_wide.tsx

@@ -1,36 +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: {
-    Cube001: THREE.Mesh
-    ['Cube.001_1']: THREE.Mesh
-    ['Cube.001_2']: THREE.Mesh
-  }
-  materials: {
-    plastic: THREE.MeshStandardMaterial
-    projection_light: THREE.MeshStandardMaterial
-    projection: THREE.MeshStandardMaterial
-  }
-}
-
-export default function Model(props: JSX.IntrinsicElements['group']) {
-  const group = useRef<THREE.Group>()
-  const { nodes, materials } = useGLTF('/proyector_wide.glb') as GLTFResult
-  return (
-    <group ref={group} {...props} dispose={null}>
-      <mesh material={materials.plastic} geometry={nodes.Cube001.geometry} />
-      <mesh material={materials.projection_light} geometry={nodes['Cube.001_1'].geometry} />
-      <mesh material={materials.projection} geometry={nodes['Cube.001_2'].geometry} />
-    </group>
-  )
-}
-
-useGLTF.preload('/proyector_wide.glb')

packages/client/src/components/Museo.tsx

@@ -38,9 +38,18 @@ const Museo: React.FC = () => {
       return
     }
     const socket = io()
+
+    const closeSocket = () => {
+      setError('SOCKET')
+      socket.close()
+      setSocket(null)
+    }
+
     setSocket(socket)
 
-    socket.on('disconnect', () => setError('SOCKET'))
+    socket.on('disconnect', () => {
+      closeSocket()
+    })
     socket.on('broadcast-transforms', (payload: UserTransforms) => {
       setUserTransforms(payload)
     })
@@ -50,9 +59,13 @@ const Museo: React.FC = () => {
       }
     })
 
+    const sendVisitTimeout = setTimeout(() => {
+      socket.emit('register-visit')
+    }, 15000) // wait 15 to send the event
+
     return () => {
-      socket.close()
+      closeSocket()
-      setSocket(null)
+      clearTimeout(sendVisitTimeout)
     }
   }, [response, isLoading])
 

packages/server/src/index.js

@@ -151,6 +151,10 @@ io.on('connection', async (socket) => {
     await asyncHDEL('socket', String(socket.request.user._id))
   })
 
+  socket.on('register-visit', () => {
+    console.log(`new visit from: ${socket.request.user.name}`)
+  })
+
   const user = await UserModel.findById(socket.request.user._id)
   if (user) {
     socket.emit('initial-transform', user.lastLocation)