3d-force-graph笔记(3)：渐变关系线

2021-04-08

linkThreeObject用于生成自定义3d对象以呈现为图形链接。返回值是一个ThreeJS Object3d的实例。如果返回false，则该链接将使用默认的3d对象类型。

.linkThreeObject(link => {
	const colors = new Float32Array([
		172, 109, 118,
		41, 22, 222
	].map(a => a / 255));
	const material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors });
	const geometry = new THREE.BufferGeometry();
	geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(2 * 3), 3));
	geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
	return new THREE.Line(geometry, material);
})

Float32Array的使用，每一行分别为一个点颜色，三个元素分别是颜色的RGB值。

const colors = new Float32Array([
	1, 0, 0,
	0, 1, 0
]);

参考资料

https://github.com/vasturiano/3d-force-graph/blob/master/example/gradient-links/index.html

3d-force-graph笔记