summaryrefslogtreecommitdiff
path: root/client
diff options
context:
space:
mode:
Diffstat (limited to 'client')
-rw-r--r--client/splash/cloud/datasetList.js (renamed from client/splash/datasetList.js)0
-rw-r--r--client/splash/cloud/index.js34
-rw-r--r--client/splash/datasets.js86
-rw-r--r--client/splash/face/index.js5
-rw-r--r--client/splash/face/markers.js1
-rw-r--r--client/splash/face/mesh.js8
-rw-r--r--client/splash/faceMarkers.js254
-rw-r--r--client/splash/index.js38
-rw-r--r--client/splash/old/draco.js119
-rw-r--r--client/splash/old/faceMarkers.js236
-rw-r--r--client/splash/renderer.js43
11 files changed, 477 insertions, 347 deletions
diff --git a/client/splash/datasetList.js b/client/splash/cloud/datasetList.js
index 88058de7..88058de7 100644
--- a/client/splash/datasetList.js
+++ b/client/splash/cloud/datasetList.js
diff --git a/client/splash/cloud/index.js b/client/splash/cloud/index.js
new file mode 100644
index 00000000..7bbc56c9
--- /dev/null
+++ b/client/splash/cloud/index.js
@@ -0,0 +1,34 @@
+import TextSprite from 'three.textsprite'
+
+import datasetList from './datasetList'
+import { choice } from '../../util'
+
+import { scene } from '../renderer'
+
+export const fontFamily = 'Helvetica, Arial, sans-serif'
+
+export function init() {
+ let sprites = Array.from({ length: Math.min(datasetList.length, 80) }, (t, i) => {
+ const sprite = new TextSprite({
+ textSize: 0.03 + Math.random() * 0.04,
+ redrawInterval: 1,
+ material: {
+ color: choice([ 0xffffff, 0xffffff, 0xffffff, 0xdddde6, 0x888896 ]),
+ },
+ texture: {
+ text: datasetList[i],
+ fontFamily,
+ },
+ })
+ sprite.position
+ .setX(Math.random())
+ .setY(Math.random())
+ .setZ(Math.random())
+ .subScalar(1 / 2)
+ .setLength(1 + Math.random())
+ .multiplyScalar(1)
+ scene.add(sprite)
+ return sprite
+ })
+ return sprites
+}
diff --git a/client/splash/datasets.js b/client/splash/datasets.js
deleted file mode 100644
index e7842511..00000000
--- a/client/splash/datasets.js
+++ /dev/null
@@ -1,86 +0,0 @@
-
-import datasetList from './datasetList'
-import { choice } from '../util'
-
-// var getRandomText = function() {
-// return choice(datasets)
-// };
-// var getRandomFontFamily = function() {
-// return 'Helvetica, Arial, sans-serif'
-// // return choice([
-// // 'Georgia, serif',
-// // '"Palatino Linotype", "Book Antiqua", Palatino, serif',
-// // '"Times New Roman", Times, serif',
-// // 'Helvetica, Arial, sans-serif',
-// // '"Arial Black", Gadget, sans-serif',
-// // '"Comic Sans MS", cursive, sans-serif',
-// // 'Impact, Charcoal, sans-serif',
-// // '"Lucida Sans Unicode", "Lucida Grande", sans-serif',
-// // 'Tahoma, Geneva, sans-serif',
-// // '"Trebuchet MS", Helvetica, sans-serif',
-// // 'Verdana, Geneva, sans-serif',
-// // '"Courier New", Courier, monospace',
-// // '"Lucida Console", Monaco, monospace',
-// // ]);
-// };
-// var getRandomColor = function() {
-// return choice([ 0xffffff, 0xffffff, 0xffffff, 0xdddde6, 0x888896 ])
-// };
-// var getRandomTextSize = function() {
-// return (1 + Math.random()) * 1/8;
-// };
-// var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
-// renderer.setPixelRatio(devicePixelRatio);
-// renderer.setClearColor(0x000000, 0);
-// document.body.appendChild(renderer.domElement);
-// var scene = new THREE.Scene();
-// var camera = new THREE.PerspectiveCamera(75, 1, 1/128, 128);
-// camera.position.set(4, 0, 10);
-// var redrawInterval = 1;
-// var sprites = Array.from({length: datasets.length}, function(t, i) {
-// // console.log(i)
-// var sprite = new THREE.TextSprite({
-// textSize: getRandomTextSize(),
-// redrawInterval: redrawInterval,
-// material: {
-// color: getRandomColor(),
-// },
-// texture: {
-// text: datasets[i],
-// fontFamily: getRandomFontFamily(),
-// },
-// });
-// sprite.position
-// .setX(Math.random())
-// .setY(Math.random())
-// .setZ(Math.random())
-// .subScalar(1/2)
-// .setLength(1 + Math.random())
-// .multiplyScalar(6);
-// scene.add(sprite);
-// return sprite;
-// });
-// var controls = new THREE.OrbitControls(camera, renderer.domElement);
-// controls.maxDistance = camera.far/2;
-// controls.enableDamping = true;
-// controls.dampingFactor = 1/8;
-// controls.rotateSpeed = 1/4;
-// controls.zoomSpeed = 1;
-// controls.keyPanSpeed = 1/2;
-// var renderScene = function() {
-// renderer.setSize(document.body.offsetWidth, document.body.offsetHeight);
-// camera.aspect = renderer.domElement.width / renderer.domElement.height;
-// camera.updateProjectionMatrix();
-// // controls.update();
-// camera.position.z += -0.0025
-// camera.rotation.y += 0.00001
-// renderer.render(scene, camera);
-// };
-// window.addEventListener('resize', renderScene, false);
-// var startSceneRenderer = function() {
-// requestAnimationFrame(function() {
-// setTimeout(startSceneRenderer, 1000/60);
-// });
-// renderScene();
-// };
-// startSceneRenderer();
diff --git a/client/splash/face/index.js b/client/splash/face/index.js
new file mode 100644
index 00000000..fe21f52b
--- /dev/null
+++ b/client/splash/face/index.js
@@ -0,0 +1,5 @@
+import DRACOLoader from '../../util/vendor/DRACOLoader'
+import GeometryHelper from '../../util/vendor/geometryHelper'
+
+DRACOLoader.setDecoderPath('/assets/js/vendor/draco/')
+var dracoLoader = new THREE.DRACOLoader();
diff --git a/client/splash/face/markers.js b/client/splash/face/markers.js
new file mode 100644
index 00000000..a71f5a82
--- /dev/null
+++ b/client/splash/face/markers.js
@@ -0,0 +1 @@
+import { MeshLine, MeshLineMaterial } from 'three.meshline'
diff --git a/client/splash/face/mesh.js b/client/splash/face/mesh.js
new file mode 100644
index 00000000..14aa7e6e
--- /dev/null
+++ b/client/splash/face/mesh.js
@@ -0,0 +1,8 @@
+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/faceMarkers.js b/client/splash/faceMarkers.js
deleted file mode 100644
index 0a87d2b2..00000000
--- a/client/splash/faceMarkers.js
+++ /dev/null
@@ -1,254 +0,0 @@
-/* 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)
- 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)
- camera = new THREE.PerspectiveCamera(70, w/h, 1, 10000)
- camera.position.x = 0
- camera.position.y = 0
- camera.position.z = 200
-
- scene = new THREE.Scene()
- // scene.background = new THREE.Color(bgColor)
-
- 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)
- // 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
- }
-}
-faceInit() \ No newline at end of file
diff --git a/client/splash/index.js b/client/splash/index.js
index aee394bf..4e168354 100644
--- a/client/splash/index.js
+++ b/client/splash/index.js
@@ -1,10 +1,34 @@
-import * as THREE from 'three'
-import { MeshLine, MeshLineMaterial } from 'three.meshline'
-import TextSprite from 'three.textsprite'
-
import oktween from '../util/vendor/oktween'
-import DRACOLoader from '../util/vendor/DRACOLoader'
-import GeometryHelper from '../util/vendor/geometryHelper'
-DRACOLoader.setDecoderPath('/assets/js/vendor/draco/')
+import OrbitControls from 'three-orbitcontrols'
+
+import { init, render, camera, renderer } from './renderer'
+
+import * as cloud from './cloud'
+
+const controls = new OrbitControls(camera, renderer.domElement)
+controls.maxDistance = camera.far / 2
+controls.enableDamping = true
+controls.dampingFactor = 1 / 8
+controls.rotateSpeed = 1 / 4
+controls.zoomSpeed = 1
+controls.keyPanSpeed = 1 / 2
+
+function animate() {
+ requestAnimationFrame(animate)
+
+ camera.position.z += -0.0025
+ camera.rotation.y += 0.00001
+
+ controls.update()
+
+ render()
+}
+
+function build() {
+ init()
+ cloud.init()
+ animate()
+}
+document.addEventListener('DOMContentLoaded', build)
diff --git a/client/splash/old/draco.js b/client/splash/old/draco.js
new file mode 100644
index 00000000..11c2463b
--- /dev/null
+++ b/client/splash/old/draco.js
@@ -0,0 +1,119 @@
+/*
+ dracoLoader.load( 'models/putin_2.drc', function ( geometry ) {
+
+ geometry.computeVertexNormals();
+
+ var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );
+ var mesh = new THREE.Mesh( geometry, material );
+ mesh.castShadow = true;
+ mesh.receiveShadow = true;
+ scene.add( mesh );
+
+ // Release the cached decoder module.
+ THREE.DRACOLoader.releaseDecoderModule();
+
+ } );
+*/
+
+function load() {
+ // Enable logging to console output.
+ dracoLoader.setVerbosity(1);
+
+ // To use triangle strips use:
+ // dracoLoader.setDrawMode(THREE.TriangleStripDrawMode);
+ dracoLoader.setDrawMode(THREE.TrianglesDrawMode);
+
+ // Skip dequantization of the position attribute. It will be done on the GPU.
+ dracoLoader.setSkipDequantization('position', true);
+ dracoLoader.decodeDracoFile(reader.result, function(bufferGeometry) {
+ if (dracoLoader.decode_time !== undefined) {
+ fileDisplayArea.innerText = 'Decode time = ' + dracoLoader.decode_time + '\n' +
+ 'Import time = ' + dracoLoader.import_time;
+ }
+ var material = new THREE.MeshBasicMaterial({vertexColors: THREE.VertexColors});
+ material.wireframe = true
+ // If the position attribute is quantized, modify the material to perform
+ // dequantization on the GPU.
+ if (bufferGeometry.attributes['position'].isQuantized) {
+ setDequantizationForMaterial(material, bufferGeometry);
+ }
+
+ var geometry;
+ // Point cloud does not have face indices.
+ if (bufferGeometry.index == null) {
+ geometry = new THREE.Points(bufferGeometry, material);
+ } else {
+ if (bufferGeometry.attributes.normal === undefined) {
+ var geometryHelper = new GeometryHelper();
+ geometryHelper.computeVertexNormals(bufferGeometry);
+ }
+ geometry = new THREE.Mesh(bufferGeometry, material);
+ geometry.drawMode = dracoLoader.drawMode;
+ }
+
+ // Compute range of the geometry coordinates for proper rendering.
+ bufferGeometry.computeBoundingBox();
+ if (bufferGeometry.attributes['position'].isQuantized) {
+ // If the geometry is quantized, transform the bounding box to the dequantized
+ // coordinates.
+ var posAttribute = bufferGeometry.attributes['position'];
+ var normConstant =
+ posAttribute.maxRange / (1 << posAttribute.numQuantizationBits);
+ var minPos = posAttribute.minValues;
+ bufferGeometry.boundingBox.max.x =
+ minPos[0] + bufferGeometry.boundingBox.max.x * normConstant;
+ bufferGeometry.boundingBox.max.y =
+ minPos[1] + bufferGeometry.boundingBox.max.y * normConstant;
+ bufferGeometry.boundingBox.max.z =
+ minPos[2] + bufferGeometry.boundingBox.max.z * normConstant;
+ bufferGeometry.boundingBox.min.x =
+ minPos[0] + bufferGeometry.boundingBox.min.x * normConstant;
+ bufferGeometry.boundingBox.min.y =
+ minPos[1] + bufferGeometry.boundingBox.min.y * normConstant;
+ bufferGeometry.boundingBox.min.z =
+ minPos[2] + bufferGeometry.boundingBox.min.z * normConstant;
+ }
+ var sizeX = bufferGeometry.boundingBox.max.x - bufferGeometry.boundingBox.min.x;
+ var sizeY = bufferGeometry.boundingBox.max.y - bufferGeometry.boundingBox.min.y;
+ var sizeZ = bufferGeometry.boundingBox.max.z - bufferGeometry.boundingBox.min.z;
+ var diagonalSize = Math.sqrt(sizeX * sizeX + sizeY * sizeY + sizeZ * sizeZ);
+ var scale = 1.0 / diagonalSize;
+ var midX =
+ (bufferGeometry.boundingBox.min.x + bufferGeometry.boundingBox.max.x) / 2;
+ var midY =
+ (bufferGeometry.boundingBox.min.y + bufferGeometry.boundingBox.max.y) / 2;
+ var midZ =
+ (bufferGeometry.boundingBox.min.z + bufferGeometry.boundingBox.max.z) / 2;
+
+ geometry.scale.multiplyScalar(scale);
+ geometry.position.x = -midX * scale;
+ geometry.position.y = -midY * scale;
+ geometry.position.z = -midZ * scale;
+ // geometry.castShadow = true;
+ // geometry.receiveShadow = true;
+
+ var selectedObject = scene.getObjectByName("my_mesh");
+ scene.remove(selectedObject);
+ geometry.name = "my_mesh";
+ scene.add(geometry);
+ });
+}
+
+function setDequantizationForMaterial(material, bufferGeometry) {
+ material.onBeforeCompile = function(shader) {
+ // Add uniform variables needed for dequantization.
+ var posAttribute = bufferGeometry.attributes['position'];
+ shader.uniforms.normConstant =
+ { value: posAttribute.maxRange / (1 << posAttribute.numQuantizationBits) };
+ shader.uniforms.minPos = { value: posAttribute.minValues };
+
+ shader.vertexShader = 'uniform float maxRange;\n' +
+ 'uniform float normConstant;\n' +
+ 'uniform vec3 minPos;\n' +
+ shader.vertexShader;
+ shader.vertexShader = shader.vertexShader.replace(
+ '#include <begin_vertex>',
+ 'vec3 transformed = minPos + position * normConstant;'
+ );
+ }
+}
diff --git a/client/splash/old/faceMarkers.js b/client/splash/old/faceMarkers.js
new file mode 100644
index 00000000..e413173d
--- /dev/null
+++ b/client/splash/old/faceMarkers.js
@@ -0,0 +1,236 @@
+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
new file mode 100644
index 00000000..75a0fd0e
--- /dev/null
+++ b/client/splash/renderer.js
@@ -0,0 +1,43 @@
+import * as THREE from 'three'
+
+export const scene = new THREE.Scene()
+scene.fog = new THREE.Fog(0x191919, 2, 15)
+
+export const camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 15)
+camera.position.set(3, 0.15, 3)
+
+// export const camera = new THREE.PerspectiveCamera(70, w / h, 1, 10000)
+// camera.position.x = 0
+// camera.position.y = 0
+// camera.position.z = 200
+
+// let cameraTarget = new THREE.Vector3(0, 0, 0)
+
+export const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
+renderer.setClearColor(scene.fog.color)
+// renderer.setClearColor(0x000000, 0)
+renderer.setPixelRatio(window.devicePixelRatio)
+renderer.setSize(window.innerWidth, window.innerHeight)
+
+let lights = [
+ new THREE.DirectionalLight(0xefefff, 1.5),
+ new THREE.DirectionalLight(0xefefff, 1.5),
+]
+lights[0].position.set(1, 1, 1).normalize()
+lights[1].position.set(-1, -1, -1).normalize()
+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()
+ renderer.setSize(window.innerWidth, window.innerHeight)
+ }, false)
+}
+
+export function render() {
+ renderer.render(scene, camera)
+}
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 11:55:06 +0000