add modal

8 files changed, 91 insertions, 24 deletions

diff --git a/client/splash/cloud/index.js b/client/splash/cloud/index.js
index d0a39d8c..1d1fb293 100644
--- a/client/splash/cloud/index.js
+++ b/client/splash/cloud/index.js
@@ -26,7 +26,9 @@ export function init() {
       textSize: CLOUD_TEXT_MIN_SIZE + Math.random() * (CLOUD_TEXT_MAX_SIZE - CLOUD_TEXT_MIN_SIZE),
       redrawInterval: 1,
       material: {
-        color: choice(CLOUD_COLORS),
+        color: 0xffffff,
+        opacity: (0.1 + Math.random() * 0.9),
+        transparent: true,
       },
       texture: {
         text: datasetList[i],
diff --git a/client/splash/constants.js b/client/splash/constants.js
index 74e695e0..c7b3d785 100644
--- a/client/splash/constants.js
+++ b/client/splash/constants.js
@@ -49,6 +49,6 @@ export const MARKER_COLORS = [
   0xffffff,
 ]
 
-export const POINT_SCALE = 0.01
+export const POINT_SCALE = 0.005
 export const LINE_THICKNESS = 0.0075
 export const FACE_POINT_COUNT = 68
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
diff --git a/client/splash/index.js b/client/splash/index.js
index 88211337..322ed0ff 100644
--- a/client/splash/index.js
+++ b/client/splash/index.js
@@ -1,8 +1,11 @@
 import { Vector3 } from 'three'
 import OrbitControls from 'three-orbitcontrols'
 
-import { init, render, camera, renderer } from './renderer'
+import { appendRenderer, render, camera, renderer } from './renderer'
 
+import { toArray } from '../util'
+
+import * as modal from './modal'
 import * as cloud from './cloud'
 import * as face from './face'
 
@@ -14,11 +17,25 @@ controls.rotateSpeed = 1 / 4
 controls.zoomSpeed = 1
 controls.keyPanSpeed = 1 / 2
 
+function init() {
+  build()
+  bind()
+  animate()
+}
+
 function build() {
-  init()
+  appendRenderer()
   cloud.init()
   face.init()
-  animate()
+}
+
+function bind() {
+  toArray(document.querySelectorAll('.aboutLink')).forEach(el => {
+    el.addEventListener('click', modal.open)
+  })
+  document.querySelector('.about .inner').addEventListener('click', e => e.stopPropagation())
+  document.querySelector('.about').addEventListener('click', modal.close)
+  document.querySelector('.close').addEventListener('click', modal.close)
 }
 
 function animate() {
@@ -37,4 +54,4 @@ function animate() {
   render()
 }
 
-document.addEventListener('DOMContentLoaded', build)
+document.addEventListener('DOMContentLoaded', init)
diff --git a/client/splash/modal.js b/client/splash/modal.js
new file mode 100644
index 00000000..d5a63d75
--- /dev/null
+++ b/client/splash/modal.js
@@ -0,0 +1,10 @@
+
+export function open() {
+  const el = document.querySelector('.about')
+  el.classList.add('open')
+}
+
+export function close() {
+  const el = document.querySelector('.about')
+  el.classList.remove('open')
+}
diff --git a/client/splash/renderer.js b/client/splash/renderer.js
index 14326f77..fbb27b40 100644
--- a/client/splash/renderer.js
+++ b/client/splash/renderer.js
@@ -21,7 +21,7 @@ lights[0].position.set(3, 3, 3).normalize()
 lights[1].position.set(-3, -3, -3).normalize()
 lights.forEach(light => scene.add(light))
 
-export function init() {
+export function appendRenderer() {
   const container = document.querySelector('#three_container')
   container.appendChild(renderer.domElement)
   window.addEventListener('resize', () => {