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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
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])
})
}
|
