1 files changed, 59 insertions, 32 deletions

diff --git a/site/assets/js/app/face.js b/site/assets/js/app/face.js
index f3f1f2bf..0a87d2b2 100644
--- a/site/assets/js/app/face.js
+++ b/site/assets/js/app/face.js
@@ -1,4 +1,5 @@
-var face = (function(){
+/* eslint-disable */
+var faceInit = function () {
   var container = document.querySelector("#face_container")
   var camera, controls, scene, renderer
   var mouse = new THREE.Vector2(0.5, 0.5)
@@ -8,6 +9,7 @@ var face = (function(){
   var SWAP_TIME = 500
   var cubes = [], meshes = []
   var currentFace = document.querySelector('.currentFace')
+  var introEl = document.querySelector('.intro')
   var faceBuffer = (function () {
     var a = new Array(FACE_POINT_COUNT)
     for (let i = 0; i < FACE_POINT_COUNT; i++) {
@@ -15,7 +17,9 @@ var face = (function(){
     }
     return a
   })()
+  var lastSprite
   var last_t = 0, start_t = 0
+  var bgColor = 0x000000 // 0x191919
   var colors = [
     0xff3333,
     0xff8833,
@@ -32,32 +36,33 @@ var face = (function(){
 
   function init() {
     fetch("/assets/data/3dlm_0_10.json")
-    .then(req => req.json())
-    .then(data => {
-      face_names = Object.keys(data)
-      faces = face_names.map(name => recenter(data[name]))
-      setup()
-      build(faces[0])
-      updateFace(faces[0])
-      setCurrentFace(face_names[0])
-      swapTo = faces[0]
-      animate()
-    })
+      .then(req => req.json())
+      .then(data => {
+        face_names = Object.keys(data)
+        faces = face_names.map(name => recenter(data[name]))
+        setup()
+        build(faces[0])
+        updateFace(faces[0])
+        setCurrentFace(face_names[0])
+        swapTo = faces[0]
+        animate()
+      })
   }
   function setup() {
-    var w = window.innerWidth / 2
+    var w = window.innerWidth * 2/3
     var h = Math.min(window.innerWidth / 2, window.innerHeight * 0.7)
     camera = new THREE.PerspectiveCamera(70, w/h, 1, 10000)
     camera.position.x = 0
     camera.position.y = 0
-    camera.position.z = 250
+    camera.position.z = 200
 
     scene = new THREE.Scene()
-    scene.background = new THREE.Color(0x191919)
+    // scene.background = new THREE.Color(bgColor)
 
-    renderer = new THREE.WebGLRenderer({ antialias: true })
+    renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
     renderer.setPixelRatio(window.devicePixelRatio)
     renderer.setSize(w, h)
+    renderer.setClearColor(0x000000, 0);
     container.appendChild(renderer.domElement)
     document.body.addEventListener('mousemove', onMouseMove)
     // renderer.domElement.addEventListener('mousedown', swap)
@@ -75,7 +80,7 @@ var face = (function(){
     //     console.log("done")
     //   }
     // })
-    setInterval(swap, 5000)
+    swap()
   }
   function build(points) {
     var matrix = new THREE.Matrix4()
@@ -125,26 +130,47 @@ var face = (function(){
     return (b-a) * n + a
   }
   function swap(){
-    if (swapping) return
-    start_t = last_t
-    swapping = true
     swap_count = (swap_count + 1) % faces.length
-    swapFrom = swapTo
+    swapFrom = swapTo || faces[0]
     swapTo = faces[swap_count]
     setCurrentFace(face_names[swap_count])
+    oktween.add({
+      from: { n: 0 },
+      to: { n: 1 },
+      duration: 1000,
+      easing: oktween.easing.quad_in_out,
+      update: function(obj){
+        lerpPoints(obj.n, swapFrom, swapTo, faceBuffer)
+        updateFace(faceBuffer)
+      },
+      finished: function(){
+        setTimeout(swap, 2000)
+      }
+    })
   }
   function setCurrentFace(name) {
     name = name.replace('.png', '').split('_').filter(s => !s.match(/\d+/)).join(' ')
     currentFace.innerHTML = name
-  }
-  function update_swap(t){
-    var n = (t - start_t) / SWAP_TIME
-    if (n > 1) {
-      swapping = false
-      n = 1
-    }
-    lerpPoints(n, swapFrom, swapTo, faceBuffer)
-    updateFace(faceBuffer)
+    // if (lastSprite) {
+    //   scene.remove(lastSprite)
+    // }
+    // var sprite = new THREE.TextSprite({
+    //   textSize: 12,
+    //   redrawInterval: 1000,
+    //   material: {
+    //     color: 0xcccccc,
+    //   },
+    //   texture: {
+    //     text: name,
+    //     fontFamily: '"Roboto", "Helvetica", sans-serif',
+    //   },
+    // });
+    // sprite.position
+    //   .setX(0)
+    //   .setY(0)
+    //   .setZ(0)
+    // scene.add(sprite);
+    // lastSprite = sprite
   }
   function updateFace(points) {
     updateCubeGeometry(points)
@@ -214,14 +240,15 @@ var face = (function(){
   }
   function animate(t) {
     requestAnimationFrame(animate)
-    if (swapping) update_swap(t)
     renderer.render(scene, camera)
     // scene.rotation.y += 0.01 * Math.PI
     mouseTarget.x += (mouse.x - mouseTarget.x) * 0.1
     mouseTarget.y += (mouse.y - mouseTarget.y) * 0.1
     scene.rotation.x = (mouseTarget.y - 0.5) * Math.PI / 2
     scene.rotation.y = (mouseTarget.x - 0.5) * Math.PI
+    currentFace.style.transform = "translateZ(0) rotateY(" + (scene.rotation.y/2) + "rad)"
     // scene.rotation.y += 0.01
     last_t = t
   }
-})()
+}
+faceInit()
\ No newline at end of file