| Name | Message | Date |
|---|---|---|
| 📄 audioSelector.ts | 1 month ago | |
| 📄 main.ts | 1 month ago | |
| 📄 style.css | 1 month ago |
📄
main.ts
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
import "./style.css";
import "./audioSelector";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { NURBSCurve } from "three/examples/jsm/curves/NURBSCurve.js";
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 2000);
camera.position.set(0, 1, 10);
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.update();
window.addEventListener("resize", () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
const scene = new THREE.Scene();
scene.add(new THREE.AmbientLight(0xffffff));
scene.add(
(() => {
const lights = new THREE.DirectionalLight(0xffffff, 1);
lights.position.set(-1, -3, -2);
return lights;
})(),
);
scene.add(
(() => {
const lights = new THREE.DirectionalLight(0xffffff, 3);
lights.position.set(1, 3, 2);
return lights;
})(),
);
const material = new THREE.MeshPhongMaterial({ color: 0xbada55, side: THREE.DoubleSide });
let curve = (() => {
const curve = new NURBSCurve(
3,
[0, 0, 0, 0, 0.5, 1, 1, 1, 1],
[
new THREE.Vector4(-1, -1, 0, 1),
new THREE.Vector4(-1, 1, 0, 1),
new THREE.Vector4(0, -1, 0, 1),
new THREE.Vector4(1, 1, 0, 1),
new THREE.Vector4(1, -1, 0, 1),
],
);
const geometry = new THREE.TubeGeometry(curve, 16, 0.1, 8, false);
return new THREE.Mesh(geometry, material);
})();
scene.add(curve);
(window as any).updateCurve = (heights: Uint8Array) => {
scene.remove(curve);
const degree = 3;
const knots = new Array<number>();
const controlPoints = new Array<THREE.Vector4>();
for (let i = 0; i <= degree; i++) {
knots.push(0);
}
for (let i = 0; i < heights.length; i++) {
controlPoints.push(new THREE.Vector4((i - heights.length / 2) * 0.1, heights[i] / 256, 0, 1));
knots.push(THREE.MathUtils.clamp((i + 1) / (heights.length - degree), 0, 1));
}
const nurbs = new NURBSCurve(degree, knots, controlPoints);
const geometry = new THREE.TubeGeometry(nurbs, heights.length, 0.05, 8, false);
curve = new THREE.Mesh(geometry, material);
scene.add(curve);
};
window.requestAnimationFrame(animate);
function animate() {
controls.update();
renderer.render(scene, camera);
window.requestAnimationFrame(animate);
}