Update Models. Add text tests

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

@@ -1,6 +1,7 @@
 import React, { Suspense } from 'react'
 import { Physics } from '@react-three/cannon'
-import { Stats } from '@react-three/drei'
+import { Stats, Text } from '@react-three/drei'
+import { Euler, Quaternion, Vector3 } from 'three'
 
 import World from './models/World'
 import WorldCollisions from './models/WorldCollisions'
@@ -9,6 +10,22 @@ import Lighting from './Lighting'
 import Effects from './Effects'
 import Controls from './Controls'
 import Users from './Users'
+import Computer from './models/Computer'
+
+const computerPositions = [
+  {
+    rotation: [0, 0.9340353012084961, 0, 0.35718077421188354],
+    translation: [-26.65045738220215, 3.425341844558716, -113.49897766113281],
+  },
+  {
+    rotation: [0, 0.9848144054412842, 0, 0.17361053824424744],
+    translation: [-17.151742935180664, 3.4566614627838135, -108.55608367919922],
+  },
+  {
+    rotation: [0, 0, 0, 0],
+    translation: [-33.87189483642578, 3.452946424484253, -121.23444366455078],
+  },
+]
 
 const Scene: React.FC = () => {
   return (
@@ -34,7 +51,98 @@ const Scene: React.FC = () => {
           <Player />
         </Physics>
         <Effects />
+
+        <Text
+          position={[-5.640829086303711, 13, -74.78675842285156]}
+          color="white"
+          fontSize={1.5}
+          font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
+          anchorX="center"
+          anchorY="middle"
+        >
+          ARTIFICIOS 2020
+        </Text>
+
+        <Text
+          position={[-20.086780548095703, 10.144491195678711, -111.45488739013672]}
+          quaternion={new Quaternion().fromArray([
+            0,
+            -0.9658790826797485,
+            0,
+            -0.258993536233902,
+          ])}
+          color="white"
+          fontSize={0.8}
+          font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
+          anchorX="center"
+          anchorY="middle"
+        >
+          Aguyje Angirũ
+        </Text>
+
+        <Text
+          position={[-31.250932693481445, 7.049933910369873, -90.546630859375]}
+          quaternion={new Quaternion().fromArray([
+            0,
+            -0.9658790826797485,
+            0,
+            -0.258993536233902,
+          ])}
+          maxWidth={12}
+          color="white"
+          fontSize={0.4}
+          font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
+          anchorX="center"
+          anchorY="middle"
+        >
+          LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR
+          INCIDIDUNT UT LABORE ET DOLORE MAGNA ALIQUA. UT ENIM AD MINIM VENIAM, QUIS
+          NOSTRUD EXERCITATION ULLAMCO LABORIS NISI UT ALIQUIP EX EA COMMODO CONSEQUAT.
+        </Text>
+
+        <Text
+          position={[-33.941890716552734, 10.144491195678711, -126.15272521972656]}
+          quaternion={new Quaternion().fromArray([
+            0,
+            -0.8729466199874878,
+            0,
+            -0.4878157675266266,
+          ])}
+          color="white"
+          fontSize={0.6}
+          font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
+          anchorX="center"
+          anchorY="middle"
+        >
+          La Traicion de la Realidad
+        </Text>
+
+        <Text
+          position={[-27.612287521362305, 10.144491195678711, -117.4875259399414]}
+          quaternion={new Quaternion().fromArray([
+            0,
+            -0.9136363863945007,
+            0,
+            -0.40653231739997864,
+          ])}
+          color="white"
+          fontSize={0.8}
+          font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
+          anchorX="center"
+          anchorY="middle"
+        >
+          No Requiem
+        </Text>
       </Suspense>
+      {computerPositions.map((computer, index) => (
+        <Computer
+          key={index}
+          position={computer.translation}
+          rotation={new Euler().setFromQuaternion(
+            new Quaternion().fromArray(computer.rotation),
+          )}
+        />
+      ))}
       <Users />
 
       <Controls />

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

@@ -0,0 +1,28 @@
+/*
+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')
+  console.log(nodes)
+  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/WorldCollisions.tsx

@@ -37,7 +37,7 @@ export default function Model(props: JSX.IntrinsicElements['group']) {
   // @ts-ignore
   const [ref] = useTrimesh(() => ({
     type: 'Static',
-    position: [1.73, 1.23, 8.19],
+    position: [-5.31, 1.23, -32.92],
     args: [vertices, indices],
   }))