diff options
Diffstat (limited to 'site/assets/test/face.html')
| -rw-r--r-- | site/assets/test/face.html | 227 |
1 files changed, 227 insertions, 0 deletions
diff --git a/site/assets/test/face.html b/site/assets/test/face.html new file mode 100644 index 00000000..598a5891 --- /dev/null +++ b/site/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 |