summaryrefslogtreecommitdiff
path: root/client/splash
diff options
context:
space:
mode:
Diffstat (limited to 'client/splash')
-rw-r--r--client/splash/face/faces.js3
-rw-r--r--client/splash/face/geometry.js67
-rw-r--r--client/splash/face/index.js11
-rw-r--r--client/splash/face/markers.js101
-rw-r--r--client/splash/face/mesh.js2
-rw-r--r--client/splash/old/faceMarkers.js236
-rw-r--r--client/splash/renderer.js1
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()
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 15:07:36 +0000