fix?

author: Adam Harvey <adam@ahprojects.com> 2019-06-05 10:44:12 -0500
committer: Adam Harvey <adam@ahprojects.com> 2019-06-05 10:44:12 -0500
commit: b3ed0f95eb94a4e7cb5e137bb8196db8c36aa50d (patch)
tree: 8eb5ce503f805bbd58c4565cd845ac196b1a30dd /site/public/assets/test/face.html
parent: 7919ecc1a760f611efbe1283096482a8ec99efef (diff)
1 files changed, 227 insertions, 0 deletions
diff --git a/site/public/assets/test/face.html b/site/public/assets/test/face.html
new file mode 100644
index 00000000..598a5891
--- /dev/null
+++ b/site/public/assets/test/face.html
@@ -0,0 +1,227 @@
+<!doctype html>
+<html lang="en">
+<head>
+<title>face points</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+<style>
+html, body { margin: 0; padding: 0; font-family: sans-serif; color: white; } 
+.currentFace { position: absolute; bottom: 10px; right: 10px; }
+</style>
+</head>
+<body>
+<div id="container"></div>
+<div class="currentFace"></div>
+<script src="../js/vendor/three.min.js"></script>
+<script src="../js/vendor/three.meshline.js"></script>
+<script>
+var container
+var camera, controls, scene, renderer
+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 faceBuffer = makeFaceBuffer()
+function makeFaceBuffer() {
+  var a = new Array(FACE_POINT_COUNT)
+  for (let i = 0; i < FACE_POINT_COUNT; i++) {
+    a[i] = new THREE.Vector3()
+  }
+  return a
+}
+var last_t = 0, start_t = 0
+var colors = [
+  0xff3333,
+  0xff8833,
+  0xffff33,
+  0x338833,
+  0x3388ff,
+  0x3333ff,
+  0x8833ff,
+  0xff3388,
+  0xffffff,
+]
+var swapping = false, swap_count = 0, swapFrom, swapTo, face_names, faces
+init()
+
+function choice(a) { return a[Math.floor(Math.random()*a.length)]}
+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])
+    document.querySelector('.currentFace').innerHTML = face_names[0]
+    swapTo = faces[0]
+    animate()
+  })
+}
+function setup() {
+  container = document.getElementById("container")
+  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000)
+  camera.position.x = 0
+  camera.position.y = 0
+  camera.position.z = 300
+
+  scene = new THREE.Scene()
+  scene.background = new THREE.Color(0x000000)
+
+  renderer = new THREE.WebGLRenderer({ antialias: true })
+  renderer.setPixelRatio(window.devicePixelRatio)
+  renderer.setSize(window.innerWidth, window.innerHeight)
+  container.appendChild(renderer.domElement)
+  renderer.domElement.addEventListener('mousemove', onMouseMove)
+  renderer.domElement.addEventListener('mousedown', 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(){
+  if (swapping) return
+  start_t = last_t
+  swapping = true
+  swap_count = (swap_count + 1) % faces.length
+  swapFrom = swapTo
+  swapTo = faces[swap_count]
+  document.querySelector('.currentFace').innerHTML = face_names[swap_count]
+}
+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)
+}
+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]) / -2
+  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)
+  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
+  scene.rotation.y += 0.01
+  last_t = t
+}
+</script>
+
+</body>
+</html>
+\ No newline at end of file
author	Adam Harvey <adam@ahprojects.com>	2019-06-05 10:44:12 -0500
committer	Adam Harvey <adam@ahprojects.com>	2019-06-05 10:44:12 -0500
commit	b3ed0f95eb94a4e7cb5e137bb8196db8c36aa50d (patch)
tree	8eb5ce503f805bbd58c4565cd845ac196b1a30dd /site/public/assets/test/face.html
parent	7919ecc1a760f611efbe1283096482a8ec99efef (diff)