Add Artwork and ArtworkCollection components

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

@@ -0,0 +1,46 @@
+import React from 'react'
+import { Text } from '@react-three/drei'
+
+interface IObraData {
+  full_name: string
+  alumne_url: string
+  obra_url: string
+  guest: boolean
+  obra_titulo: string
+  obra_descripcion: string
+}
+
+type ArtworkProps = {
+  position: number[]
+  rotation: number[]
+  model: JSX.Element | null
+  obraData: IObraData
+}
+
+const Artwork: React.FC<ArtworkProps & JSX.IntrinsicElements['group']> = ({
+  position,
+  rotation,
+  model,
+  obraData,
+  ...rest
+}) => {
+  return (
+    <group rotation={rotation}>
+      <group position={position} {...rest}>
+        <Text
+          position={[0, 8.2, 1.5]}
+          color="white"
+          fontSize={0.7}
+          font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
+          anchorX="center"
+          anchorY="middle"
+        >
+          {obraData.obra_titulo}
+        </Text>
+        {model ?? null}
+      </group>
+    </group>
+  )
+}
+
+export default Artwork

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

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import Artwork from './Artwork'
+import data from '../data/obras.json'
+
+function ArtworkCollection(props: JSX.IntrinsicElements['group']) {
+  return (
+    <group {...props}>
+      {data.map((obra, index) => {
+        let rotation = Math.PI / 8 + (index * Math.PI) / 8
+        if (index > 6) rotation += Math.PI / 8
+        return (
+          <Artwork
+            model={null}
+            key={obra.obra_url}
+            rotation={[0, rotation, 0]}
+            position={[0, 0, -37.8632]}
+            obraData={obra}
+          />
+        )
+      })}
+    </group>
+  )
+}
+
+export default ArtworkCollection

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

@@ -111,7 +111,7 @@ const Player = () => {
   const speed = useRef<number>(SPEED)
 
   const bottomRaycaster = useRef(
-    new Raycaster(new Vector3(), new Vector3(0, -1, 0), 0, HEIGHT + 1),
+    new Raycaster(new Vector3(), new Vector3(0, -1, 0), 0, HEIGHT + 0.5),
   )
 
   const collisionCircle = useRef<Mesh>()

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

@@ -7,6 +7,8 @@ import Trees from './models/Trees'
 import Entrance from './models/Entrance'
 import Museum from './models/Museum'
 
+import ArtworkCollection from './ArtworkCollection'
+
 const World: React.FC = () => {
   return (
     <>
@@ -16,6 +18,8 @@ const World: React.FC = () => {
       <Entrance />
       <Museum />
 
+      <ArtworkCollection position={[-5.43617, 3.25, -141.111]} rotation={[0, 0, 0]} />
+
       <Street />
     </>
   )

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

@@ -30,7 +30,7 @@ const Scene: React.FC = () => {
         <Player />
 
         <Text
-          position={[-5.640829086303711, 13, -72.78675842285156]}
+          position={[-5.640829086303711, 13.5, -74.88675842285156]}
           color="white"
           fontSize={1.5}
           font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"

packages/client/src/3d/models/Human.tsx

@@ -73,7 +73,6 @@ const Human: React.FC<JSX.IntrinsicElements['group'] & { id: number }> = ({
     })
 
     m.onBeforeCompile = function (shader) {
-      console.log(shader.fragmentShader)
       shader.fragmentShader = shader.fragmentShader.replace(
         'gl_FragColor = vec4( packNormalToRGB( normal ), opacity );',
         [

packages/client/src/data/obras.json

@@ -13,7 +13,6 @@
     "full_name": "Juan Cruz Hernández Cvetic",
     "alumne_url": "/alumnes?alumne=hernández_cvetic",
     "guest": false,
-    "obra_slug": "lo_hipervisible_y_lo_ignorado.",
     "obra_url": "/obras?obra=lo_hipervisible_y_lo_ignorado.",
     "obra_titulo": "Lo hipervisible y lo ignorado.",
     "obra_descripcion": "El siguiente trabajo-obra trata la lucha de los cuerpos gordos, dentro y en contra de un sistema que invisibiliza a las disidencias, y los modos, desde la subversión, que estas encuentran para hacerse visibles. Durante años la sociedad ha replicado y perseguido un modelo hegemónico e ideal de cuerpo no-gordo, y hoy entendemos más que nunca que la definición de ideal está en la cultura. \n\nTratando la visibilidad, la obra que acompaña al trabajo de investigación pone al usuario en el lugar de un encuestado que debe decidir entre dos opciones, mediante una interfaz simple. A medida que el usuario vaya respondiendo, las opciones irán virando hacia cuestiones tratadas en un estudio realizado en el año 2006 en Estados Unidos de forma online, relacionado a la influencia del propio peso en sesgos (explícitos o implícitos) anti-gordura.\n\nLa obra busca generar en el usuario cierta molestia (apoyada en las preguntas, que pueden ser consideradas como fuertes o muy directas) como disparadora de un espacio de reflexión, una puesta en común de lo que hemos sido, lo que somos y lo que podemos ser, buscando la comparación entre lo contestado en el 2006 y lo contestado en la actualidad mas inmediata, para evidenciar realmente si algo ha cambiado. Y si no cambió, ¿que mejor momento que ahora?.\n"
@@ -31,12 +30,11 @@
     "id": 5,
     "full_name": "Camila Florencia González",
     "alumne_url": "/alumnes?alumne=gonzález",
-    "obra_slug": "realidades_extendidas",
     "obra_url": "/obras?obra=realidades_extendidas",
     "guest": false,
-    "guest": false,
     "obra_titulo": "Realidades extendidas",
-    "obra_descripcion": "En los últimos años el desarrollo tecnológico se infiltró en diversos ámbitos de la vida cotidiana y como consecuencia, la forma que tenemos de interactuar con ella se convirtió en uno de los principales focos a investigar. \n\nEste trabajo aborda el estudio de la interacción entre humano y máquina, para ello se toma en consideración dos variables: el conjunto de operaciones y dígitos binarios, y la presencia de humanos. Lo que permite que se de esta comunicación entre ambas partes, es la interfaz. \n\nTeniendo en cuenta esto, la pregunta a la que se apunta es: ¿de qué forma nos afecta la interacción con las diferentes interfaces en la construcción de nuestra realidad?\n\nA raíz de esto surge “Realidades extendidas”, una instalación robótica interactiva que plantea demostrar la posibilidad de configurar una situación fuera del  espacio cercano al usuario, a través de la interacción, en este caso, con una interfaz gráfica.\n",
+    "obra_descripcion": "En los últimos años el desarrollo tecnológico se infiltró en diversos ámbitos de la vida cotidiana y como consecuencia, la forma que tenemos de interactuar con ella se convirtió en uno de los principales focos a investigar. \n\nEste trabajo aborda el estudio de la interacción entre humano y máquina, para ello se toma en consideración dos variables: el conjunto de operaciones y dígitos binarios, y la presencia de humanos. Lo que permite que se de esta comunicación entre ambas partes, es la interfaz. \n\nTeniendo en cuenta esto, la pregunta a la que se apunta es: ¿de qué forma nos afecta la interacción con las diferentes interfaces en la construcción de nuestra realidad?\n\nA raíz de esto surge “Realidades extendidas”, una instalación robótica interactiva que plantea demostrar la posibilidad de configurar una situación fuera del  espacio cercano al usuario, a través de la interacción, en este caso, con una interfaz gráfica.\n"
+  },
   {
     "id": 6,
     "full_name": "Julieta Iglesias Santandreu",
@@ -91,6 +89,7 @@
     "obra_titulo": " Aguyje Angirũ",
     "obra_descripcion": "Aguyje Angirũ es una experiencia que te acerca a la lengua guaraní. Adentrate en un escenario nocturno inspirado en la selva misionera, con el cual vas a interactuar pronunciando las palabras del guaraní que leas y escuches en las distintas constelaciones.¡Bienvenidxs!¡Tereg̃uahẽ porãite!\n"
   },
+  {
     "id": 12,
     "full_name": "Mateo Demicheli",
     "alumne_url": "/alumnes?alumne=demicheli",