3d-force-graph笔记(12):点击节点聚焦

点击节点聚焦,即将节点平移至画布正中间,官方自带的示例很容易理解。

示例演示: https://vasturiano.github.io/3d-force-graph/example/click-to-focus/

示例源码:https://github.com/vasturiano/3d-force-graph/blob/master/example/click-to-focus/index.html

应用了内置方法cameraPosition,并将相机瞄准目标节点。

const distance = 40;
const distRatio = 1 + distance/Math.hypot(node.x, node.y, node.z);

const newPos = node.x || node.y || node.z
	? { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }
	: { x: 0, y: 0, z: distance }; // special case if node is in (0,0,0)

Graph.cameraPosition(
	newPos, // new position
	node, // lookAt ({ x, y, z })
	3000  // ms transition duration
);

实际应用中可能不需要相机瞄准,不然总会有一个节点在画布中心,第二个参数传空值即可。

Graph.cameraPosition(
	newPos, // new position
	null,
	3000  // ms transition duration
);

如果需要在点击节点聚焦后恢复原有相机位置,可以提前把相机位置保存起来,事后再还原。

const savedPos = myGraph.cameraPosition();
// ...

myGraph.cameraPosition(savedPos, savedPos.lookAt);

参考资料

https://github.com/vasturiano/3d-force-graph/issues/128