How can I configure animation to draw graph lines?

Questions
1

hello.
I have a three-dimensional array of x, y, and z axes.
I want to draw a graph.

The important point here is that the thickness of the graph is thick, and with the perspective expressed, the coordinates I have are
I want to create an animation where a graph is drawn.

I did draw a graph…
in what format
I don’t know if I should add animation to the drawing. Please.

2

What kind of graph / effect would you be aiming for? There’s quite a few graphs able to present 3D data.

(As a side-note - maybe d3 would be a better fit than three.js? It covers data-visualisation a bit more in-depth.)

3

Hello, I want to draw the trajectory of a ball.

The thickness of the line must be adjusted,
As the ball flies along the trajectory, I want an animation where additional trajectories are added and the previous trajectories gradually disappear.

4

You most likely want to use line2 class.

import { Line2 } from "three/addons/lines/Line2.js";
import { LineMaterial } from "three/addons/lines/LineMaterial.js";
import { LineGeometry } from "three/addons/lines/LineGeometry.js";
const line = new Line2(lineGeometry, lineMaterial);

If your trajectory is fixed, then you already have the coordinates in your array. With setPositions you should be able to fix the coordinates and set lineGeometry. If you want to dynamically update your coordinates, then you likely want to copy the ball position every few frames and update your coordinates array. In lineMaterial you can adjust the linewidth, transparent and opacity parameters to get your effects. Most likely you want to make it so, that the coordinate your ball is at, has the highest linewidth and opacity value, every index with a lower index number than your current index will have lower linewidth and opacity value.

1 Like