add mesh of your typical everyman

7 files changed, 178 insertions, 243 deletions

diff --git a/client/splash/face/faces.js b/client/splash/face/faces.js
new file mode 100644
index 00000000..28de0cdc
--- /dev/null
+++ b/client/splash/face/faces.js
@@ -0,0 +1,3 @@
+export default {
+  putin: [6.229589182834997700e+02,1.237765302967744901e+03,4.134526977539062500e+02],[6.376896424835800872e+02,1.410526376450482758e+03,3.891479492187500000e+02],[6.739611274719236462e+02,1.582250497753667105e+03,3.769988098144531250e+02],[7.100658831128885140e+02,1.741763669768688942e+03,3.758922424316406250e+02],[7.536649862551219030e+02,1.917029460341510003e+03,4.252069091796875000e+02],[8.298141803217866936e+02,2.059907416716931493e+03,5.431895141601562500e+02],[9.258791576609889944e+02,2.164709160946117208e+03,7.162614746093750000e+02],[1.070414319266524672e+03,2.251194729721967633e+03,8.754176635742187500e+02],[1.274411328424191879e+03,2.298006267580519307e+03,9.157481689453125000e+02],[1.458846686449237723e+03,2.247376503427543867e+03,8.904161376953125000e+02],[1.613419451724781766e+03,2.154859059460210574e+03,7.340153198242187500e+02],[1.719510602704216581e+03,2.046877580339021051e+03,5.658121948242187500e+02],[1.802992956004423377e+03,1.898674323395374358e+03,4.472657165527343750e+02],[1.839803416592467329e+03,1.728563973209157211e+03,4.044224853515625000e+02],[1.867230816650390807e+03,1.567819041550580550e+03,4.134500732421875000e+02],[1.892678734334310093e+03,1.401836273899452635e+03,4.331260375976562500e+02],[1.900552931542490114e+03,1.223502216072830606e+03,4.526267700195312500e+02],[7.511424780752142851e+02,1.160890923207600963e+03,1.001351135253906250e+03],[8.158950379315542705e+02,1.135870041375253777e+03,1.114991333007812500e+03],[9.076874701406441091e+02,1.127822704063864421e+03,1.194016601562500000e+03],[9.926902658799115216e+02,1.143210580432368261e+03,1.233907104492187500e+03],[1.063656488096947669e+03,1.162017750208237658e+03,1.248264404296875000e+03],[1.395103497613645231e+03,1.151143294423421366e+03,1.261149414062500000e+03],[1.466387226179534309e+03,1.130542678432090725e+03,1.248993530273437500e+03],[1.552676099051681376e+03,1.115153013015447868e+03,1.213308837890625000e+03],[1.652305108762255031e+03,1.120968661861045803e+03,1.146292236328125000e+03],[1.727642721019071814e+03,1.143332434488932449e+03,1.041585449218750000e+03],[1.244122246476715645e+03,1.334647129869648325e+03,1.250885375976562500e+03],[1.249189824721392597e+03,1.465660963816923413e+03,1.309278930664062500e+03],[1.252202780570235745e+03,1.585706690278895167e+03,1.358756103515625000e+03],[1.259493648693608066e+03,1.685694304749732282e+03,1.360432617187500000e+03],[1.148455034173703552e+03,1.740496228553921810e+03,1.155312866210937500e+03],[1.194674198315190097e+03,1.755804119561887546e+03,1.196942993164062500e+03],[1.258795422961665054e+03,1.777236518698300188e+03,1.212644042968750000e+03],[1.305280558926451249e+03,1.757635707289752190e+03,1.198189453125000000e+03],[1.356348142915613380e+03,1.737675595379997958e+03,1.164412109375000000e+03],[8.664502087162989028e+02,1.296397628532858562e+03,1.039572875976562500e+03],[9.217092343199485640e+02,1.262228697521733466e+03,1.107280639648437500e+03],[9.986516724530387137e+02,1.265434423307531233e+03,1.120204345703125000e+03],[1.074714246772317438e+03,1.306653943337833425e+03,1.091015014648437500e+03],[1.007696155622893571e+03,1.330022539822447698e+03,1.095014892578125000e+03],[9.264212392470415125e+02,1.326119930090810840e+03,1.079521362304687500e+03],[1.405216489784390433e+03,1.300602885574640140e+03,1.104635620117187500e+03],[1.476379755775601325e+03,1.256362955328249654e+03,1.138428955078125000e+03],[1.554564041795917774e+03,1.249119944242589781e+03,1.133978515625000000e+03],[1.616356373027726704e+03,1.280854080128389342e+03,1.071557495117187500e+03],[1.554167071892233480e+03,1.313725106410606259e+03,1.107841308593750000e+03],[1.472497819489123913e+03,1.322406412808287541e+03,1.114204223632812500e+03],[1.037582353868671362e+03,1.936206664907418599e+03,1.033433837890625000e+03],[1.116472667858647128e+03,1.915096195044424576e+03,1.131442626953125000e+03],[1.209116239719764735e+03,1.900456612907858926e+03,1.186649047851562500e+03],[1.263021651623295838e+03,1.914385048409256797e+03,1.188636718750000000e+03],[1.300469609698127215e+03,1.904690494719861135e+03,1.189560302734375000e+03],[1.398002848905675364e+03,1.918324532410865231e+03,1.142420776367187500e+03],[1.480066685814951143e+03,1.930527828548656316e+03,1.061488159179687500e+03],[1.389899255969477508e+03,1.978273845885034234e+03,1.124004760742187500e+03],[1.327246293191348741e+03,2.005233211071538562e+03,1.142569091796875000e+03],[1.262139949065563542e+03,2.009971803241804992e+03,1.149364868164062500e+03],[1.180817821697160070e+03,2.011372329759785316e+03,1.134800781250000000e+03],[1.120554480578852463e+03,1.984728334003523742e+03,1.106011474609375000e+03],[1.061098198954264262e+03,1.933346772066004633e+03,1.042356811523437500e+03],[1.192023425322887761e+03,1.945863449802773175e+03,1.133595458984375000e+03],[1.264533596083696921e+03,1.947978800443761884e+03,1.155409667968750000e+03],[1.322869685094496617e+03,1.947868674591663421e+03,1.140181640625000000e+03],[1.466934774301566449e+03,1.932516156771791202e+03,1.067155761718750000e+03],[1.321161541688208445e+03,1.941148711607690529e+03,1.139805419921875000e+03],[1.264645510983934400e+03,1.947900976849724657e+03,1.145079345703125000e+03],[1.191629635949228032e+03,1.946293020139208465e+03,1.132726318359375000e+03]]
+}
\ No newline at end of file
diff --git a/client/splash/face/geometry.js b/client/splash/face/geometry.js
new file mode 100644
index 00000000..a6a97946
--- /dev/null
+++ b/client/splash/face/geometry.js
@@ -0,0 +1,67 @@
+
+import { Geometry } from 'three'
+
+export function getLineGeometry(points) {
+  return [
+    points.slice(0, 17),
+    points.slice(17, 22),
+    points.slice(22, 27),
+    points.slice(27, 31),
+    points.slice(31, 36),
+    points.slice(36, 42),
+    points.slice(42, 48),
+    points.slice(48)
+  ].map((a, i) => {
+    const geometry = new Geometry()
+    a.forEach(p => geometry.vertices.push(p))
+    if (i > 4) {
+      geometry.vertices.push(a[0])
+    }
+    return geometry
+  })
+}
+
+export function updateLineGeometry(points, meshes) {
+  getLineGeometry(points).forEach((geometry, i) => {
+    const [line, mesh] = meshes[i]
+    line.setGeometry(geometry, () => 1.5)
+    mesh.geometry.vertices = line.geometry.vertices
+    mesh.geometry.verticesNeedUpdate = true
+  })
+}
+
+export function lerp(n, a, b) {
+  return (b - a) * n + a
+}
+
+export function lerpPoint(n, A, B, C) {
+  C.x = lerp(n, A.x, B.x)
+  C.y = lerp(n, A.y, B.y)
+  C.z = lerp(n, A.z, B.z)
+}
+
+export function lerpPoints(n, A, B, C) {
+  for (let i = 0, len = A.length; i < len; i++) {
+    lerpPoint(n, A[i], B[i], C[i])
+  }
+}
+
+export function updateCubeGeometry(points, cubes) {
+  cubes.forEach((cube, i) => {
+    const p = points[i]
+    cube.position.set(p.x, p.y, p.z)
+  })
+}
+
+export function getBounds(obj) {
+  return obj.reduce((a, p) => {
+    return [
+      Math.min(a[0], p[0]),
+      Math.max(a[1], p[0]),
+      Math.min(a[2], p[1]),
+      Math.max(a[3], p[1]),
+      Math.min(a[4], p[2]),
+      Math.max(a[5], p[2]),
+    ]
+  }, [Infinity, -Infinity, Infinity, -Infinity, Infinity, -Infinity])
+}
diff --git a/client/splash/face/index.js b/client/splash/face/index.js
index fe21f52b..f52ac57b 100644
--- a/client/splash/face/index.js
+++ b/client/splash/face/index.js
@@ -1,5 +1,8 @@
-import DRACOLoader from '../../util/vendor/DRACOLoader'
-import GeometryHelper from '../../util/vendor/geometryHelper'
+import faces from './faces'
 
-DRACOLoader.setDecoderPath('/assets/js/vendor/draco/')
-var dracoLoader = new THREE.DRACOLoader();
+const names = Object.keys(faces)
+
+function load(){
+  const name = choice(names)
+  
+}
\ No newline at end of file
diff --git a/client/splash/face/markers.js b/client/splash/face/markers.js
index a71f5a82..5fdf1777 100644
--- a/client/splash/face/markers.js
+++ b/client/splash/face/markers.js
@@ -1 +1,102 @@
+import * as THREE from 'three'
 import { MeshLine, MeshLineMaterial } from 'three.meshline'
+
+import oktween from '../../util/vendor/oktween'
+import { scene } from '../renderer'
+
+import { getLineGeometry, updateLineGeometry, lerpPoints, updateCubeGeometry, getBounds } from './geometry'
+
+const POINT_SCALE = 1.8
+const FACE_POINT_COUNT = 68
+
+let cubes
+let meshes = []
+
+const faceBuffer = Array.from({ length: FACE_POINT_COUNT }, () => new THREE.Vector3())
+
+let colors = [
+  0xff3333,
+  0xff8833,
+  0xffff33,
+  0x338833,
+  0x3388ff,
+  0x3333ff,
+  0x8833ff,
+  0xff3388,
+  0xffffff,
+]
+let swapFrom
+let swapTo
+
+export function build(points) {
+  swapFrom = points
+  swapTo = points
+
+  const matrix = new THREE.Matrix4()
+  const quaternion = new THREE.Quaternion()
+
+  cubes = points.map((p, i) => {
+    let geometry = new THREE.BoxBufferGeometry()
+    let position = new THREE.Vector3(p[0], p[1], p[2])
+    let rotation = new THREE.Euler()
+    let scale = new THREE.Vector3()
+    let color = new THREE.Color()
+    scale.x = POINT_SCALE
+    scale.y = POINT_SCALE
+    scale.z = POINT_SCALE
+    quaternion.setFromEuler(rotation, false)
+    matrix.compose(position, quaternion, scale)
+    geometry.applyMatrix(matrix)
+    let material = new THREE.MeshBasicMaterial({ color: color.setHex(0xffffff) })
+    let cube = new THREE.Mesh(geometry, material)
+    scene.add(cube)
+    return cube
+  })
+
+  meshes = getLineGeometry(points).map((geometry, i) => {
+    const color = new THREE.Color()
+    const material = new MeshLineMaterial({
+      color: color.setHex(colors[i % colors.length]),
+    })
+    const line = new MeshLine()
+    line.setGeometry(geometry, _ => 1.5)
+    const mesh = new THREE.Mesh(line.geometry, material)
+    mesh.geometry.dynamic = true
+    scene.add(mesh)
+    return [line, mesh]
+  })
+}
+
+export function swap() {
+  oktween.add({
+    from: { n: 0 },
+    to: { n: 1 },
+    duration: 1000,
+    easing: oktween.easing.quad_in_out,
+    update: (obj) => {
+      lerpPoints(obj.n, swapFrom, swapTo, faceBuffer)
+      updateFace(faceBuffer)
+    },
+    finished: () => {
+      setTimeout(swap, 2000)
+    }
+  })
+}
+
+export function updateFace(buf) {
+  updateCubeGeometry(buf, cubes)
+  updateLineGeometry(buf, meshes)
+}
+
+function recenter(obj) {
+  const bounds = getBounds(obj)
+  const x_width = (bounds[1] - bounds[0]) / 2
+  const y_width = (bounds[3] - bounds[2]) / -3
+  const z_width = (bounds[5] - bounds[4]) / 2
+  return obj.map(p => {
+    p[0] = p[0] - bounds[0] - x_width
+    p[1] = -p[1] + bounds[1] + y_width
+    p[2] = p[2] - bounds[2] + z_width
+    return new THREE.Vector3(p[0], p[1], p[2])
+  })
+}
diff --git a/client/splash/face/mesh.js b/client/splash/face/mesh.js
index 14aa7e6e..82e7fa6a 100644
--- a/client/splash/face/mesh.js
+++ b/client/splash/face/mesh.js
@@ -2,7 +2,5 @@ import DRACOLoader from '../../util/vendor/DRACOLoader'
 import GeometryHelper from '../../util/vendor/geometryHelper'
 
 DRACOLoader.setDecoderPath('/assets/js/vendor/draco/')
-
 const dracoLoader = new DRACOLoader()
-
 DRACOLoader.getDecoderModule()
diff --git a/client/splash/old/faceMarkers.js b/client/splash/old/faceMarkers.js
deleted file mode 100644
index e413173d..00000000
--- a/client/splash/old/faceMarkers.js
+++ /dev/null
@@ -1,236 +0,0 @@
-var mouse = new THREE.Vector2(0.5, 0.5)
-var mouseTarget = new THREE.Vector2(0.5, 0.5)
-var POINT_SCALE = 1.8
-var FACE_POINT_COUNT = 68
-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++) {
-    a[i] = new THREE.Vector3()
-  }
-  return a
-})()
-var lastSprite
-var last_t = 0, start_t = 0
-var bgColor = 0x000000 // 0x191919
-var colors = [
-  0xff3333,
-  0xff8833,
-  0xffff33,
-  0x338833,
-  0x3388ff,
-  0x3333ff,
-  0x8833ff,
-  0xff3388,
-  0xffffff,
-]
-var swapping = false, swap_count = 0, swapFrom, swapTo, face_names, faces
-init()
-
-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()
-    })
-}
-function setup() {
-  var w = window.innerWidth * 2/3
-  var h = Math.min(window.innerWidth / 2, window.innerHeight * 0.7)
-
-  // renderer.domElement.addEventListener('mousedown', swap)
-  // oktween.add({
-  //   obj: el.style,
-  //   units: "px",
-  //   from: { left: 0 },
-  //   to: { left: 100 },
-  //   duration: 1000,
-  //   easing: oktween.easing.circ_out,
-  //   update: function(obj){
-  //     console.log(obj.left)
-  //   }
-  //   finished: function(){
-  //     console.log("done")
-  //   }
-  // })
-  swap()
-}
-function build(points) {
-  var matrix = new THREE.Matrix4()
-  var quaternion = new THREE.Quaternion()
-
-  for (var i = 0; i < FACE_POINT_COUNT; i++) {
-    var p = points[i]
-    var geometry = new THREE.BoxBufferGeometry()
-    var position = new THREE.Vector3(p[0], p[1], p[2])
-    var rotation = new THREE.Euler()
-    var scale = new THREE.Vector3()
-    var color = new THREE.Color()
-    scale.x = scale.y = scale.z = POINT_SCALE
-    quaternion.setFromEuler(rotation, false)
-    matrix.compose(position, quaternion, scale)
-    geometry.applyMatrix(matrix)
-    material = new THREE.MeshBasicMaterial({ color: color.setHex(0xffffff) })
-    cube = new THREE.Mesh(geometry, material)
-    scene.add(cube)
-    cubes.push(cube)
-  }
-
-  meshes = getLineGeometry(points).map((geometry, i) => {
-    var color = new THREE.Color()
-    var material = new MeshLineMaterial({
-      color: color.setHex(colors[i % colors.length]),
-    })
-    var line = new MeshLine()
-    line.setGeometry(geometry, _ => 1.5)
-    var mesh = new THREE.Mesh(line.geometry, material)
-    mesh.geometry.dynamic = true
-    scene.add(mesh)
-    return [line, mesh]
-  })
-}
-function lerpPoints(n, A, B, C) {
-  for (let i = 0, len = A.length; i < len; i++) {
-    lerpPoint(n, A[i], B[i], C[i])
-  }
-}
-function lerpPoint(n, A, B, C) {
-  C.x = lerp(n, A.x, B.x)
-  C.y = lerp(n, A.y, B.y)
-  C.z = lerp(n, A.z, B.z)
-}
-function lerp(n, a, b) {
-  return (b-a) * n + a
-}
-function swap(){
-  swap_count = (swap_count + 1) % faces.length
-  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
-  // 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)
-  updateLineGeometry(points)
-}
-function updateCubeGeometry(points) {
-  cubes.forEach((cube, i) => {
-    const p = points[i]
-    cube.position.set(p.x, p.y, p.z)
-  })
-}
-function updateLineGeometry(points) {
-  getLineGeometry(points).map((geometry, i) => {
-    var [line, mesh] = meshes[i]
-    line.setGeometry(geometry, _ => 1.5)
-    mesh.geometry.vertices = line.geometry.vertices
-    mesh.geometry.verticesNeedUpdate = true
-  })
-}
-function getLineGeometry(points) {
-  return [
-    points.slice(0, 17),
-    points.slice(17, 22),
-    points.slice(22, 27),
-    points.slice(27, 31),
-    points.slice(31, 36),
-    points.slice(36, 42),
-    points.slice(42, 48),
-    points.slice(48)
-  ].map((a, i) => {
-    var geometry = new THREE.Geometry()
-    a.forEach(p => geometry.vertices.push(p))
-    if (i > 4) {
-      geometry.vertices.push(a[0])
-    }
-    return geometry
-  })
-}
-function getBounds(obj) {
-  return obj.reduce((a, p) => {
-    return [
-      Math.min(a[0], p[0]),
-      Math.max(a[1], p[0]),
-      Math.min(a[2], p[1]),
-      Math.max(a[3], p[1]),
-      Math.min(a[4], p[2]),
-      Math.max(a[5], p[2]),
-    ]
-  }, [Infinity, -Infinity, Infinity, -Infinity, Infinity, -Infinity])
-}
-function recenter(obj) {
-  const bounds = getBounds(obj)
-  const x_width = (bounds[1] - bounds[0]) / 2
-  const y_width = (bounds[3] - bounds[2]) / -3
-  const z_width = (bounds[5] - bounds[4]) / 2
-  return obj.map(p => {
-    p[0] = p[0] - bounds[0] - x_width
-    p[1] = -p[1] + bounds[1] + y_width
-    p[2] = p[2] - bounds[2] + z_width
-    return new THREE.Vector3(p[0], p[1], p[2])
-  })
-}
-//
-function onMouseMove(e) {
-  mouse.x = e.clientX / window.innerWidth
-  mouse.y = e.clientY / window.innerHeight
-}
-function animate(t) {
-  requestAnimationFrame(animate)
-  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
-}
-
diff --git a/client/splash/renderer.js b/client/splash/renderer.js
index 0c21f964..8d2a3393 100644
--- a/client/splash/renderer.js
+++ b/client/splash/renderer.js
@@ -28,7 +28,6 @@ lights.forEach(light => scene.add(light))
 export function init() {
   const container = document.querySelector('#three_container')
   container.appendChild(renderer.domElement)
-  console.log('rednerer init')
   window.addEventListener('resize', () => {
     camera.aspect = window.innerWidth / window.innerHeight
     camera.updateProjectionMatrix()