Add first batch of artwork (no video/sound)

.gitattributes

@@ -1,2 +1,3 @@
 packages/client/public/model/*.glb filter=lfs diff=lfs merge=lfs -text
 packages/client/public/env/*.png filter=lfs diff=lfs merge=lfs -text
+packages/client/public/model/obras/*.glb filter=lfs diff=lfs merge=lfs -text

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

@@ -32,13 +32,15 @@ const Artwork: React.FC<ArtworkProps & JSX.IntrinsicElements['group']> = ({
         </Text>
         <Computer
           obraId={obraData.id}
-          position={[-6.0, 0, -2.8]}
+          position={[-5.5, 0, -2.8]}
           scale={[1.1, 1.1, 1.1]}
           rotation={[0, Math.PI, 0]}
         />
+        <group position={[0, 0, -11.95]} rotation={[0, -Math.PI / 2, 0]}>
           {model ?? null}
         </group>
       </group>
+    </group>
   )
 }
 

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

@@ -3,15 +3,43 @@ import React from 'react'
 import Artwork from './Artwork'
 import data from '../data/obras.json'
 
+import Julieta from './models/obras/Julieta'
+import Santiaga from './models/obras/Santiaga'
+import Carolina from './models/obras/Carolina'
+import Julian from './models/obras/Julian'
+import Mateo from './models/obras/Mateo'
+import Gaston from './models/obras/Gaston'
+// import Daniela from './models/obras/Daniela'
+// import Pedro from './models/obras/Pedro'
+// import DiegoGuido from './models/obras/DiegoGuido'
+
+const models: (JSX.Element | null)[] = [
+  null, // <Daniela />,
+  null, // Juan cruz
+  null, // Lucia cordoba
+  null, // Camila
+  <Julieta />,
+  null, // Lucia Novello
+  <Santiaga />,
+  <Carolina />,
+  null, // Edu
+  <Julian />,
+  <Mateo />,
+  <Gaston />,
+  null, //<Pedro />,
+  null, //<DiegoGuido />,
+]
+
 function ArtworkCollection(props: JSX.IntrinsicElements['group']) {
   return (
     <group {...props}>
       {data.map((obra, index) => {
+        const model = models[index]
         let rotation = Math.PI / 8 + (index * Math.PI) / 8
         if (index > 6) rotation += Math.PI / 8
         return (
           <Artwork
-            model={null}
+            model={model}
             key={obra.obra_url}
             rotation={[0, rotation, 0]}
             position={[0, 0, -37.8632]}

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

@@ -77,7 +77,7 @@ const Human: React.FC<JSX.IntrinsicElements['group'] & { id: number }> = ({
         'gl_FragColor = vec4( packNormalToRGB( normal ), opacity );',
         [
           'gl_FragColor = vec4( packNormalToRGB( normal ), opacity );',
-          'gl_FragColor.a = 1.0 - pow( gl_FragCoord.z, 0.75 );',
+          'gl_FragColor.a = 1.0 - pow( gl_FragCoord.z, 4.75 );',
           'gl_FragColor.r = 0.70;',
           'gl_FragColor.g = 0.85;',
           'gl_FragColor.b = 1.0;',

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

@@ -0,0 +1,41 @@
+/*
+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: {
+    Sphere001: THREE.Mesh
+    ['Sphere.001_1']: THREE.Mesh
+  }
+  materials: {
+    ['sphere_inner.001']: THREE.MeshStandardMaterial
+    ['sphere_outer.001']: THREE.MeshStandardMaterial
+  }
+}
+
+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>
+        <mesh
+          material={materials['sphere_inner.001']}
+          geometry={nodes.Sphere001.geometry}
+        />
+        <mesh
+          material={materials['sphere_outer.001']}
+          geometry={nodes['Sphere.001_1'].geometry}
+        />
+      </group>
+    </group>
+  )
+}
+
+useGLTF.preload('/mode/obras/carolina.glb')

packages/client/src/3d/models/obras/Gaston.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: {
+    logs002: THREE.Mesh
+  }
+  materials: {
+    gaston: THREE.MeshBasicMaterial
+  }
+}
+
+export default function Model(props: JSX.IntrinsicElements['group']) {
+  const group = useRef<THREE.Group>()
+  const { nodes, materials } = useGLTF('/model/obras/gaston.glb') as GLTFResult
+  return (
+    <group ref={group} {...props} dispose={null} scale={[0.99, 0.99, 0.99]}>
+      <mesh material={materials.gaston} geometry={nodes.logs002.geometry} />
+    </group>
+  )
+}
+
+useGLTF.preload('/model/obras/gaston.glb')

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

@@ -0,0 +1,38 @@
+/*
+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: {
+    Cube012: THREE.Mesh
+    ['Cube.012_1']: THREE.Mesh
+    ['Cube.012_2']: THREE.Mesh
+  }
+  materials: {
+    ['wood.001']: THREE.MeshStandardMaterial
+    ['stars.001']: THREE.MeshStandardMaterial
+    black: THREE.MeshBasicMaterial
+  }
+}
+
+export default function Model(props: JSX.IntrinsicElements['group']) {
+  const group = useRef<THREE.Group>()
+  const { nodes, materials } = useGLTF('/model/obras/julian.glb') as GLTFResult
+  return (
+    <group ref={group} {...props} dispose={null}>
+      <group>
+        <mesh material={materials['wood.001']} geometry={nodes.Cube012.geometry} />
+        <mesh material={materials['stars.001']} geometry={nodes['Cube.012_1'].geometry} />
+        <mesh material={materials.black} geometry={nodes['Cube.012_2'].geometry} />
+      </group>
+    </group>
+  )
+}
+
+useGLTF.preload('/model/obras/julian.glb')

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

@@ -0,0 +1,51 @@
+/*
+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: {
+    dome_ground_mesh014: THREE.Mesh
+    ['dome_ground_mesh.014_1']: THREE.Mesh
+    ['dome_ground_mesh.014_2']: THREE.Mesh
+    ['dome_ground_mesh.014_3']: THREE.Mesh
+  }
+  materials: {
+    ['metal.001']: THREE.MeshStandardMaterial
+    ['light.002']: THREE.MeshStandardMaterial
+    ['julieta_caja.001']: THREE.MeshStandardMaterial
+    ['marble.006']: THREE.MeshStandardMaterial
+  }
+}
+
+export default function Model(props: JSX.IntrinsicElements['group']) {
+  const group = useRef<THREE.Group>()
+  const { nodes, materials } = useGLTF('/model/obras/julieta.glb') as GLTFResult
+  return (
+    <group ref={group} {...props} dispose={null}>
+      <mesh
+        material={materials['metal.001']}
+        geometry={nodes.dome_ground_mesh014.geometry}
+      />
+      <mesh
+        material={materials['light.002']}
+        geometry={nodes['dome_ground_mesh.014_1'].geometry}
+      />
+      <mesh
+        material={materials['julieta_caja.001']}
+        geometry={nodes['dome_ground_mesh.014_2'].geometry}
+      />
+      <mesh
+        material={materials['marble.006']}
+        geometry={nodes['dome_ground_mesh.014_3'].geometry}
+      />
+    </group>
+  )
+}
+
+useGLTF.preload('/model/obras/julieta.glb')

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

@@ -0,0 +1,41 @@
+/*
+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: {
+    Cube008: THREE.Mesh
+    ['Cube.008_1']: THREE.Mesh
+    ['Cube.008_2']: THREE.Mesh
+  }
+  materials: {
+    ['Mango.002']: THREE.MeshStandardMaterial
+    ['Ojos.002']: THREE.MeshStandardMaterial
+    ['marble.003']: THREE.MeshStandardMaterial
+  }
+}
+
+export default function Model(props: JSX.IntrinsicElements['group']) {
+  const group = useRef<THREE.Group>()
+  const { nodes, materials } = useGLTF('/model/obras/mateo.glb') as GLTFResult
+  return (
+    <group ref={group} {...props} dispose={null}>
+      <group>
+        <mesh material={materials['Mango.002']} geometry={nodes.Cube008.geometry} />
+        <mesh material={materials['Ojos.002']} geometry={nodes['Cube.008_1'].geometry} />
+        <mesh
+          material={materials['marble.003']}
+          geometry={nodes['Cube.008_2'].geometry}
+        />
+      </group>
+    </group>
+  )
+}
+
+useGLTF.preload('/model/obras/mateo.glb')

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

@@ -0,0 +1,44 @@
+/*
+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: {
+    Cube013: THREE.Mesh
+    ['Cube.013_1']: THREE.Mesh
+    ['Cube.013_2']: THREE.Mesh
+  }
+  materials: {
+    ['VrHeadset cuerpo.002']: THREE.MeshStandardMaterial
+    ['light.001']: THREE.MeshStandardMaterial
+    ['projection.001']: THREE.MeshStandardMaterial
+  }
+}
+
+export default function Model(props: JSX.IntrinsicElements['group']) {
+  const group = useRef<THREE.Group>()
+  const { nodes, materials } = useGLTF('/model/obras/proyector.glb') as GLTFResult
+  return (
+    <group ref={group} {...props} dispose={null}>
+      <group position={[-55.28, 2.67, 85.99]} rotation={[0, Math.PI / 2, 0]}>
+        <mesh
+          material={materials['VrHeadset cuerpo.002']}
+          geometry={nodes.Cube013.geometry}
+        />
+        <mesh material={materials['light.001']} geometry={nodes['Cube.013_1'].geometry} />
+        <mesh
+          material={materials['projection.001']}
+          geometry={nodes['Cube.013_2'].geometry}
+        />
+      </group>
+    </group>
+  )
+}
+
+useGLTF.preload('/model/obras/proyector.glb')

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

@@ -0,0 +1,53 @@
+/*
+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: {
+    mirror_geometry003: THREE.Mesh
+    ['mirror_geometry.003_1']: THREE.Mesh
+    ['mirror_geometry.003_2']: THREE.Mesh
+    ['mirror_geometry.003_3']: THREE.Mesh
+  }
+  materials: {
+    ['Vidrio.001']: THREE.MeshStandardMaterial
+    ['Madera.001']: THREE.MeshStandardMaterial
+    ['VrHeadset cuerpo.001']: THREE.MeshStandardMaterial
+    ['marble.001']: THREE.MeshStandardMaterial
+  }
+}
+
+export default function Model(props: JSX.IntrinsicElements['group']) {
+  const group = useRef<THREE.Group>()
+  const { nodes, materials } = useGLTF('/model/obras/santiaga.glb') as GLTFResult
+  return (
+    <group ref={group} {...props} dispose={null} rotation={[0, 0.4619223, 0]}>
+      <group>
+        <mesh
+          material={materials['Vidrio.001']}
+          geometry={nodes.mirror_geometry003.geometry}
+        />
+        <mesh
+          material={materials['Madera.001']}
+          geometry={nodes['mirror_geometry.003_1'].geometry}
+        />
+        <mesh
+          material={materials['VrHeadset cuerpo.001']}
+          geometry={nodes['mirror_geometry.003_2'].geometry}
+        />
+        <mesh
+          material={materials['marble.001']}
+          geometry={nodes['mirror_geometry.003_3'].geometry}
+        />
+      </group>
+    </group>
+  )
+}
+
+useGLTF.preload('/model/obras/santiaga.glb')

packages/client/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -16,6 +20,7 @@
     "noEmit": true,
     "jsx": "react"
   },
-
+  "include": [
-  "include": ["src"]
+    "src"
+  ]
 }