使用 Three.js 绘制图表的最佳方法

Question

我想用 Three.js 绘制图表，并想知道最好的方法是什么。

这里的这个框架https://github.com/davidpiegza/Graph-Visualization通过使用球体作为节点和线作为边缘来解决这个问题。

我需要向边缘添加标签，或者可以选择边缘。

还有哪些其他绘制图表的方法？有人有想法吗？

Answer 1

您应该查看MathBox http://acko.net/blog/making-mathbox/（它基于 Three.js 和作者的着色器库 ShaderGraph.js）。 MathBox 使用他的库来实现他博客上的许多交互式 3d 数学示例。 http://acko.net/blog/

Answer 2

2024

给过去的讯息...

程序动画图表。

r164

const s = new THREE.Scene();
const c = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const r = new THREE.WebGLRenderer();
r.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(r.domElement);

c.position.z = 18;

const x = new THREE.BufferGeometry().setFromPoints([
    new THREE.Vector3(-10, 0, 0),
    new THREE.Vector3(10, 0, 0)
]);
const y = new THREE.BufferGeometry().setFromPoints([
    new THREE.Vector3(0, -10, 0),
    new THREE.Vector3(0, 10, 0)
]);
const v1 = new THREE.Line(x, new THREE.LineBasicMaterial({ color: 0x0000ff }));
const v2 = new THREE.Line(y, new THREE.LineBasicMaterial({ color: 0x00ff00 }));
s.add(v1);
s.add(v2);

const v3 = new THREE.CatmullRomCurve3([
    new THREE.Vector3(-7, 5, 0),
    new THREE.Vector3(0, 10, 0),
    new THREE.Vector3(7, 5, 0)
]);
const v4 = new THREE.CatmullRomCurve3([
    new THREE.Vector3(-10, 0, 0),
    new THREE.Vector3(0, 5, 0),
    new THREE.Vector3(10, 0, 0)
]);
const v5 = new THREE.CatmullRomCurve3([
    new THREE.Vector3(-7, -5, 0),
    new THREE.Vector3(0, 0, 0),
    new THREE.Vector3(7, -5, 0)
]);

const v9 = new THREE.LineBasicMaterial({ color: 0xffff00 });
const v10 = new THREE.LineBasicMaterial({ color: 0xffffff });
const v11 = new THREE.LineBasicMaterial({ color: 0xff0000 });

const v12 = new THREE.Line(new THREE.BufferGeometry(), v9);
const v13 = new THREE.Line(new THREE.BufferGeometry(), v10);
const v14 = new THREE.Line(new THREE.BufferGeometry(), v11);

s.add(v12);
s.add(v13);
s.add(v14);

const sphereGeometry = new THREE.SphereGeometry(0.3, 16, 16);
const yellowSphereMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const whiteSphereMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
const redSphereMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });

const yellowSphere = new THREE.Mesh(sphereGeometry, yellowSphereMaterial);
const whiteSphere = new THREE.Mesh(sphereGeometry, whiteSphereMaterial);
const redSphere = new THREE.Mesh(sphereGeometry, redSphereMaterial);

s.add(yellowSphere);
s.add(whiteSphere);
s.add(redSphere);

function updateLine(line, curve, material) {
    const points = curve.getPoints(50);
    line.geometry.setFromPoints(points);
    line.material = material;
}

function animate() {
    requestAnimationFrame(animate);
    
    const time = Date.now() * 0.001;
    const xOffset = Math.sin(time) * 5;
    const yOffset = Math.cos(time) * 5;
    
    v3.points[1].set(0, 10 + yOffset, 0);
    v4.points[1].set(0 + xOffset, 5, 0);
    v5.points[1].set(0, yOffset, 0);
    
    updateLine(v12, v3, v9);
    updateLine(v13, v4, v10);
    updateLine(v14, v5, v11);
    
    yellowSphere.position.copy(v3.points[1]);
    whiteSphere.position.copy(v4.points[1]);
    redSphere.position.copy(v5.points[1]);
    
    r.render(s, c);
}

animate();

https://cdpn.io/pen/debug/NWVraVY?authentication_hash=xnMabpeWggXr