3d-force-graph笔记(12):点击节点聚焦
2022-11-26
点击节点聚焦,即将节点平移至画布正中间,官方自带的示例很容易理解。
示例演示: 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