1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
import * as THREE from 'three'
import { MeshLine, MeshLineMaterial } from 'three.meshline'
import oktween from '../../util/vendor/oktween'
import { scene } from '../renderer'
import { getLineGeometry, updateFace, lerpPoints } from './util'
import { POINT_SCALE, LINE_THICKNESS, FACE_POINT_COUNT, MARKER_COLORS } from '../constants'
const faceBuffer = Array.from({ length: FACE_POINT_COUNT }, () => new THREE.Vector3())
let group = new THREE.Object3D()
let cubes
let meshes
let swapFrom
let swapTo
export function build(points) {
swapTo = points
const matrix = new THREE.Matrix4()
const quaternion = new THREE.Quaternion()
cubes = points.map((p) => {
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)
group.add(cube)
return cube
})
meshes = getLineGeometry(points).map((geometry, i) => {
const color = new THREE.Color()
const material = new MeshLineMaterial({
color: color.setHex(MARKER_COLORS[i % MARKER_COLORS.length]),
})
const line = new MeshLine()
line.setGeometry(geometry, () => LINE_THICKNESS)
const mesh = new THREE.Mesh(line.geometry, material)
mesh.geometry.dynamic = true
group.add(mesh)
return [line, mesh]
})
scene.add(group)
updateFace(points, cubes, meshes)
}
export function swap(face) {
swapFrom = swapTo
swapTo = face
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, cubes, meshes)
},
finished: () => {
setTimeout(swap, 2000)
}
})
}
export function update() {
group.rotation.y += 0.005
}
|
