transitions

1 files changed, 26 insertions, 22 deletions

diff --git a/client/splash/face/markers.js b/client/splash/face/markers.js
index 22b9966c..20a96fb6 100644
--- a/client/splash/face/markers.js
+++ b/client/splash/face/markers.js
@@ -25,22 +25,14 @@ export function build(points) {
 
   const matrix = new THREE.Matrix4()
   const quaternion = new THREE.Quaternion()
-
-  const bbox = getBboxForPoints(points)
-  let { scale, midX, midY, midZ } = getBboxScaleAndCentroid(bbox)
-
-  scale /= 2
-  scale *= FACE_SCALE * FACE_MARKERS_SCALE
-
   const boxColor = new THREE.Color()
   boxColor.setHex(MARKER_POINT_COLOR)
-  const scaledPoints = points.map((p) => new THREE.Vector3(
-    (p[0] - midX) * scale + FACE_OFFSET_X,
-    (p[1] - midY) * scale * -1 + FACE_OFFSET_Y,
-    (p[2] - midZ) * scale + FACE_OFFSET_Z
-  ))
 
-  cubes = scaledPoints.map((position) => {
+  const scaledPoints = scalePoints(points)
+  swapTo = scaledPoints
+
+  cubes = scaledPoints.map(() => {
+    let position = new THREE.Vector3()
     let geometry = new THREE.BoxBufferGeometry()
     let rotation = new THREE.Euler()
     let boxScale = new THREE.Vector3()
@@ -48,7 +40,7 @@ export function build(points) {
     boxScale.y = POINT_SCALE
     boxScale.z = POINT_SCALE
     quaternion.setFromEuler(rotation, false)
-    matrix.compose(position, quaternion, boxScale)
+    matrix.compose(position.clone(), quaternion, boxScale)
     geometry.applyMatrix(matrix)
     let material = new THREE.MeshBasicMaterial({ color: boxColor })
     let cube = new THREE.Mesh(geometry, material)
@@ -65,9 +57,6 @@ export function build(points) {
     line.setGeometry(geometry, () => LINE_THICKNESS)
     const mesh = new THREE.Mesh(line.geometry, material)
     mesh.geometry.dynamic = true
-    mesh.scale.x = 2
-    mesh.scale.y = 2
-    mesh.scale.z = 2
     group.add(mesh)
     return [line, mesh]
   })
@@ -78,20 +67,35 @@ export function build(points) {
   updateFace(scaledPoints, cubes, meshes)
 }
 
-export function swap(face) {
+function scalePoints(points) {
+  const bbox = getBboxForPoints(points)
+  let { scale, midX, midY, midZ } = getBboxScaleAndCentroid(bbox)
+
+  scale *= FACE_SCALE * FACE_MARKERS_SCALE
+
+  const scaledPoints = points.map((p) => new THREE.Vector3(
+    (p[0] - midX) * scale + FACE_OFFSET_X,
+    (p[1] - midY) * scale * -1 + FACE_OFFSET_Y,
+    (p[2] - midZ) * scale + FACE_OFFSET_Z
+  ))
+  return scaledPoints
+}
+
+export function swap(points) {
+  const scaledPoints = scalePoints(points)
   swapFrom = swapTo
-  swapTo = face
-  oktween.add({
+  swapTo = scaledPoints
+  return oktween.add({
     from: { n: 0 },
     to: { n: 1 },
-    duration: 1000,
+    duration: 2000,
     easing: oktween.easing.quad_in_out,
     update: (obj) => {
       lerpPoints(obj.n, swapFrom, swapTo, faceBuffer)
       updateFace(faceBuffer, cubes, meshes)
     },
     finished: () => {
-      setTimeout(swap, 2000)
+      // setTimeout(swap, 2000)
     }
   })
 }