add modal

3 files changed, 55 insertions, 17 deletions

diff --git a/client/splash/face/index.js b/client/splash/face/index.js
index 31ce8f3b..46b7b847 100644
--- a/client/splash/face/index.js
+++ b/client/splash/face/index.js
@@ -16,10 +16,18 @@ export function startAnimation() {
   const name = choice(names)
   const face = faces[name]
   mesh.remove()
-  mesh.load(name).then(meshes => {
-    meshes.wireframe.position.z -= 0.001
+  mesh.load(name).then(geometry => {
+    let meshes
     markers.swap(face)
       .then({
+        obj: {},
+        duration: 0,
+        finished: () => {
+          meshes = mesh.createFaceMeshes(geometry)
+          meshes.wireframe.position.z -= 0.001
+        }
+      })
+      .then({
         from: { n: 0 },
         to: { n: 1 },
         duration: 500,
@@ -43,27 +51,31 @@ export function startAnimation() {
         }
       })
       .then({
-        from: { n: 0 },
-        to: { n: 1 },
+        from: { n: 0, lines: 1, cubes: 1, },
+        to: { n: 1, lines: 0, cubes: 0.5 },
         delay: 500,
         duration: 1000,
         easing: oktween.easing.quad_in,
         update: (obj) => {
           meshes.solid.material.opacity = 1 - obj.n
           meshes.wireframe.material.opacity = obj.n
+          markers.fadePointsTo(obj.cubes)
+          markers.fadeLinesTo(obj.lines)
         },
         finished: () => {
           mesh.removeMesh('solid')
         }
       })
       .then({
-        from: { n: 1 },
-        to: { n: 0 },
+        from: { n: 1, lines: 0, cubes: 0 },
+        to: { n: 0, lines: 1, cubes: 1 },
         delay: 5000,
         duration: 500,
-        easing: oktween.easing.quad_in_out,
+        easing: oktween.easing.quad_out,
         update: (obj) => {
           meshes.wireframe.material.opacity = obj.n
+          markers.fadePointsTo(obj.cubes)
+          markers.fadeLinesTo(obj.lines)
         },
       })
       .then({
diff --git a/client/splash/face/markers.js b/client/splash/face/markers.js
index 20a96fb6..354ed68c 100644
--- a/client/splash/face/markers.js
+++ b/client/splash/face/markers.js
@@ -42,7 +42,11 @@ export function build(points) {
     quaternion.setFromEuler(rotation, false)
     matrix.compose(position.clone(), quaternion, boxScale)
     geometry.applyMatrix(matrix)
-    let material = new THREE.MeshBasicMaterial({ color: boxColor })
+    let material = new THREE.MeshBasicMaterial({
+      color: boxColor,
+      opacity: 1,
+      transparent: true,
+    })
     let cube = new THREE.Mesh(geometry, material)
     group.add(cube)
     return cube
@@ -52,6 +56,9 @@ export function build(points) {
     const color = new THREE.Color()
     const material = new MeshLineMaterial({
       color: color.setHex(MARKER_COLORS[i % MARKER_COLORS.length]),
+      alphaTest: 0.01,
+      opacity: 1.0,
+      transparent: true,
     })
     const line = new MeshLine()
     line.setGeometry(geometry, () => LINE_THICKNESS)
@@ -60,13 +67,23 @@ export function build(points) {
     group.add(mesh)
     return [line, mesh]
   })
-
+  window.meshes = meshes
   group.frustumCulled = false
   scene.add(group)
 
   updateFace(scaledPoints, cubes, meshes)
 }
 
+export function fadePointsTo(opacity) {
+  cubes.forEach(cube => cube.material.opacity = opacity)
+}
+export function fadeLinesTo(opacity) {
+  meshes.forEach((pair) => {
+    pair[1].material.uniforms.visibility.value = opacity
+    pair[1].material.uniformsNeedUpdate = true
+  })
+}
+
 function scalePoints(points) {
   const bbox = getBboxForPoints(points)
   let { scale, midX, midY, midZ } = getBboxScaleAndCentroid(bbox)
diff --git a/client/splash/face/mesh.js b/client/splash/face/mesh.js
index 92aff020..d823ecf5 100644
--- a/client/splash/face/mesh.js
+++ b/client/splash/face/mesh.js
@@ -1,4 +1,8 @@
-import { Points, Mesh, MeshBasicMaterial, MeshStandardMaterial, VertexColors, TrianglesDrawMode, DoubleSide } from 'three'
+import {
+  Points,
+  Mesh, MeshBasicMaterial, MeshStandardMaterial,
+  VertexColors, TrianglesDrawMode, DoubleSide
+} from 'three'
 
 import { scene } from '../renderer'
 
@@ -13,15 +17,16 @@ DRACOLoader.setDecoderPath('/assets/js/vendor/draco/')
 
 const dracoLoader = new DRACOLoader()
 DRACOLoader.getDecoderModule()
+dracoLoader.setVerbosity(1)
+dracoLoader.setDrawMode(TrianglesDrawMode)
 
 export function load(name) {
-  dracoLoader.setVerbosity(1)
-  dracoLoader.setDrawMode(TrianglesDrawMode)
   dracoLoader.setSkipDequantization('position', true)
   return new Promise((resolve, reject) => {
-    dracoLoader.load('/assets/data/faces/' + name + '.drc', (geometry) => {
-      resolve(createFaceMeshes(geometry))
-    })
+    const loaded = geometry => resolve(geometry)
+    const progress = () => {}
+    const error = () => reject()
+    dracoLoader.load('/assets/data/faces/' + name + '.drc', loaded, progress, error)
   })
 }
 
@@ -29,7 +34,7 @@ export function update(name) {
   load(name)
 }
 
-function createFaceMeshes(geometry) {
+export function createFaceMeshes(geometry) {
   return {
     blank: createBlankFace(geometry),
     wireframe: createWireframeFace(geometry),
@@ -52,6 +57,7 @@ function createBlankFace(geometry) {
     color: 0xFFFFFF,
     metalness: 0.2,
     roughness: 0.5,
+    alphaTest: 0.01,
   })
   material.wireframe = false
   material.transparent = true
@@ -61,7 +67,10 @@ function createBlankFace(geometry) {
 }
 
 function createWireframeFace(geometry) {
-  const material = new MeshBasicMaterial({ vertexColors: VertexColors })
+  const material = new MeshBasicMaterial({
+    vertexColors: VertexColors,
+    alphaTest: 0.01,
+  })
   material.wireframe = true
   material.transparent = true
   material.opacity = 0