File size: 3,658 Bytes
9425aed | 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 103 104 105 106 107 | import * as THREE from 'three';
/**
* Loads batched trajectory data and sets up indexed LineSegments for parallel animation.
* Binary file layout: Float32Array of [x,y,z] grouped contiguously per trajectory.
* [traj₀_step₀(x,y,z), traj₀_step₁(x,y,z), ..., traj₁_step₀(x,y,z), ...]
*
* @param {THREE.Scene} scene - Three.js scene to add the mesh to
* @param {ArrayBuffer} buffer - Raw binary trajectory data
* @param {number} numTrajectories - Number of simultaneous trajectories
* @param {number} numSteps - Time steps per trajectory
* @returns {{lineSegments: THREE.LineSegments, maxIndices: number}}
*/
export function setupBatchedTrajectories(scene, buffer, numTrajectories, numSteps) {
const positions = new Float32Array(buffer);
const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
// Build Index Buffer for LineSegments
// Each trajectory has (numSteps - 1) segments, each segment = 2 indices
const totalSegments = numTrajectories * (numSteps - 1);
const indices = new Uint32Array(totalSegments * 2);
let indexPtr = 0;
for (let b = 0; b < numTrajectories; b++) {
const baseOffset = b * numSteps;
for (let t = 0; t < numSteps - 1; t++) {
indices[indexPtr++] = baseOffset + t;
indices[indexPtr++] = baseOffset + t + 1;
}
}
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
// Start with zero draw range — nothing visible
// NOTE: With index buffer, setDrawRange counts INDICES not vertices
geometry.setDrawRange(0, 0);
const material = new THREE.LineBasicMaterial({
color: 0x00ffcc,
transparent: true,
opacity: 0.15,
blending: THREE.AdditiveBlending,
});
const lineSegments = new THREE.LineSegments(geometry, material);
scene.add(lineSegments);
return { lineSegments, maxIndices: indices.length, material };
}
/**
* Loads trajectory data from a URL and sets up the renderer.
*/
export async function loadAndSetupBatchedTrajectories(scene, url, numTrajectories, numSteps) {
const response = await fetch(url);
const buffer = await response.arrayBuffer();
return setupBatchedTrajectories(scene, buffer, numTrajectories, numSteps);
}
/**
* Animation controller for parallel trajectory growth.
*/
export class TrajectoryAnimator {
constructor(lineSegments, maxIndices, growthRatePerFrame = 6) {
if (growthRatePerFrame % 2 !== 0) {
throw new Error('growthRatePerFrame must be even (each line segment = 2 indices)');
}
this.lineSegments = lineSegments;
this.maxIndices = maxIndices;
this.growthRate = growthRatePerFrame;
this.currentIndex = 0;
this.playing = true;
}
get progress() {
return this.maxIndices > 0 ? this.currentIndex / this.maxIndices : 0;
}
get complete() {
return this.currentIndex >= this.maxIndices;
}
play() { this.playing = true; }
pause() { this.playing = false; }
reset() {
this.currentIndex = 0;
this.lineSegments.geometry.setDrawRange(0, 0);
}
setSpeed(rate) {
this.growthRate = rate % 2 === 0 ? rate : rate + 1;
}
tick() {
if (!this.playing || this.complete) return;
this.currentIndex = Math.min(
this.currentIndex + this.growthRate,
this.maxIndices
);
this.lineSegments.geometry.setDrawRange(0, this.currentIndex);
}
}
|