Clone phantom models and add WIP message

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

@@ -18,7 +18,7 @@ import { MeshBasicMaterial } from 'three/src/materials/MeshBasicMaterial'
 import { Quaternion } from 'three/src/math/Quaternion'
 import { ActionName } from './models/Human'
 
-const SPEED = 0.6
+const SPEED = 0.8
 export const HEIGHT = 1.5
 const CIRCLE_RADIUS = 1.0
 const CIRCLE_SEGMENTS = 8

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

@@ -47,7 +47,7 @@ const Scene: React.FC = () => {
         <Player />
 
         <Text
-          position={[-5.640829086303711, 13, -74.78675842285156]}
+          position={[-5.640829086303711, 13, -72.78675842285156]}
           color="white"
           fontSize={1.5}
           font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
@@ -57,6 +57,17 @@ const Scene: React.FC = () => {
           ARTIFICIOS 2020
         </Text>
 
+        <Text
+          position={[-5.640829086303711, 6, -72.78675842285156]}
+          color="white"
+          fontSize={1.0}
+          font="https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff"
+          anchorX="center"
+          anchorY="middle"
+        >
+          EN CONSTRUCCIÓN
+        </Text>
+
         <Text
           position={[-20.086780548095703, 10.144491195678711, -111.45488739013672]}
           quaternion={new Quaternion().fromArray([

packages/client/src/3d/lib/cloneGltf.ts

@@ -0,0 +1,53 @@
+import { Skeleton } from 'three'
+
+const cloneGltf = (gltf) => {
+  const clone = {
+    animations: gltf.animations,
+    scene: gltf.scene.clone(true),
+  }
+
+  const skinnedMeshes = {}
+
+  gltf.scene.traverse((node) => {
+    if (node.isSkinnedMesh) {
+      skinnedMeshes[node.name] = node
+    }
+  })
+
+  const cloneBones = {}
+  const cloneSkinnedMeshes = {}
+
+  clone.scene.traverse((node) => {
+    if (node.isBone) {
+      cloneBones[node.name] = node
+    }
+
+    if (node.isSkinnedMesh) {
+      cloneSkinnedMeshes[node.name] = node
+    }
+  })
+
+  // eslint-disable-next-line no-restricted-syntax
+  for (const name in skinnedMeshes) {
+    if (name) {
+      const skinnedMesh = skinnedMeshes[name]
+      const { skeleton } = skinnedMesh
+      const cloneSkinnedMesh = cloneSkinnedMeshes[name]
+
+      const orderedCloneBones = []
+
+      for (let i = 0; i < skeleton.bones.length; i += 1) {
+        const cloneBone = cloneBones[skeleton.bones[i].name]
+        orderedCloneBones.push(cloneBone)
+      }
+
+      cloneSkinnedMesh.bind(
+        new Skeleton(orderedCloneBones, skeleton.boneInverses),
+        cloneSkinnedMesh.matrixWorld,
+      )
+    }
+  }
+
+  return clone
+}
+export default cloneGltf

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

@@ -7,6 +7,8 @@ import React, { useRef, useState, useEffect, useMemo } from 'react'
 import { useFrame } from 'react-three-fiber'
 import { useGLTF } from '@react-three/drei/useGLTF'
 
+import cloneGltf from '../lib/cloneGltf'
+
 import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader'
 import { FrontSide } from 'three/src/constants'
 
@@ -46,9 +48,19 @@ const Human: React.FC<JSX.IntrinsicElements['group'] & { id: number }> = ({
   ...rest
 }) => {
   const group = useRef<THREE.Group>()
-  const { nodes, animations } = useGLTF('/model/human.glb') as GLTFResult
+  const gltf = useGLTF('/model/human.glb') as GLTFResult
   const currentAnimation = useRef<ActionName>('idle')
 
+  const { scene, animations } = cloneGltf(gltf)
+
+  const [nodes] = useState(() => {
+    const n = {}
+    scene.children[0].children.forEach((child) => {
+      n[child.name] = child
+    })
+    return n
+  })
+
   const material = useMemo(() => {
     const m = new MeshNormalMaterial({
       transparent: true,