From 4541b9a4b7442e229428c52edd3970e0c143d1de Mon Sep 17 00:00:00 2001
From: Ian Mancini <ianmethyst@gmail.com>
Date: Tue, 8 Dec 2020 08:16:08 -0300
Subject: [PATCH] Clone phantom models and add WIP message

---
 packages/client/public/model/plaza.glb        |  4 +-
 .../client/public/model/plaza_collision.glb   |  4 +-
 packages/client/src/3d/Player.tsx             |  2 +-
 packages/client/src/3d/index.tsx              | 13 ++++-
 packages/client/src/3d/lib/cloneGltf.ts       | 53 +++++++++++++++++++
 packages/client/src/3d/models/Human.tsx       | 14 ++++-
 6 files changed, 83 insertions(+), 7 deletions(-)
 create mode 100644 packages/client/src/3d/lib/cloneGltf.ts

diff --git a/packages/client/public/model/plaza.glb b/packages/client/public/model/plaza.glb
index 11df461..8807153 100644
--- a/packages/client/public/model/plaza.glb
+++ b/packages/client/public/model/plaza.glb
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:98c7a7da54c4791d74089cb591413a94281cef0446b8932869293c438fd74310
-size 5132688
+oid sha256:8877f5e5c693be45c61c8cb8843516eddc7c70fdf6958583283382dafd421270
+size 1837816
diff --git a/packages/client/public/model/plaza_collision.glb b/packages/client/public/model/plaza_collision.glb
index f086f8e..7e6a39d 100644
--- a/packages/client/public/model/plaza_collision.glb
+++ b/packages/client/public/model/plaza_collision.glb
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:104012d25bff99244754b5a186ade5a3d78f9c1b10f2e49f1c17f1d02f27ab59
-size 101792
+oid sha256:823a1eb46699287016a41ca48bd82c2d6f3a2301369d3346a02cf59f9789f01b
+size 28592
diff --git a/packages/client/src/3d/Player.tsx b/packages/client/src/3d/Player.tsx
index e79e318..0313ebf 100644
--- a/packages/client/src/3d/Player.tsx
+++ b/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
diff --git a/packages/client/src/3d/index.tsx b/packages/client/src/3d/index.tsx
index 3180f91..8637cd8 100644
--- a/packages/client/src/3d/index.tsx
+++ b/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([
diff --git a/packages/client/src/3d/lib/cloneGltf.ts b/packages/client/src/3d/lib/cloneGltf.ts
new file mode 100644
index 0000000..f75bd4b
--- /dev/null
+++ b/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
diff --git a/packages/client/src/3d/models/Human.tsx b/packages/client/src/3d/models/Human.tsx
index 56174ab..9e5efeb 100644
--- a/packages/client/src/3d/models/Human.tsx
+++ b/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,