<head>
<style> body { margin: 0; } </style>
<script src="3d-force-graph.min.js"></script>
<!--<script src="../../dist/3d-force-graph.js"></script>-->
</head>
<body>
<div id="3d-graph"></div>
<div style="position: absolute; top: 5px; right: 5px;">
<button id="rotationToggle" style="margin: 8px; height: 25px; width: 150px;">
暂停旋转
</button>
</div>
<script type="importmap">{ "imports": { "three": "//unpkg.com/three/build/three.module.js" }}</script>
<script type="module">
import SpriteText from "//unpkg.com/three-spritetext/dist/three-spritetext.mjs";
const distance = 500;
let isRotationActive = true;
// Random tree
// const N = 300;
// const gData = {
// nodes: [...Array(N).keys()].map(i => ({ id: i,group:Math.floor(i/7) })),
// links: [...Array(N).keys()]
// .filter(id => id)
// .map(id => ({
// source: id,
// target: Math.round(Math.random() * (id-1))
// }))
// };
const Graph = ForceGraph3D()
(document.getElementById('3d-graph'))
// .graphData(gData)
.jsonUrl('./miserables.json')
.nodeAutoColorBy('group')
// .nodeLabel('id')
// .linkDirectionalParticles("value")
// .linkDirectionalParticleWidth(2)
// .linkDirectionalParticleSpeed(d => d.value * 0.001)
// .linkWidth(2)
.nodeThreeObject(node => {// 借助三方库 实现文字几何的展示
const sprite = new SpriteText(node.id);
sprite.material.depthWrite = false; // make sprite background transparent
sprite.color = node.color;// node.color
sprite.textHeight = 8;
return sprite;
})
.linkDirectionalArrowLength(3)// 让边带上箭头
.linkDirectionalArrowRelPos(1)// 设置箭头位置
.cameraPosition({ z: distance })
// Spread nodes a little wider
// Graph.d3Force('charge').strength(-120);
// camera orbit
let angle = 0;
let time = setInterval(() => {
if (isRotationActive) {
Graph.cameraPosition({
x: distance * Math.sin(angle),
y: 0,
z: distance * Math.cos(angle),
});
angle += Math.PI / 300;
}
}, 10);
document.getElementById('rotationToggle').addEventListener('click', event => {
if(isRotationActive){
isRotationActive = !isRotationActive
}else{
isRotationActive = !isRotationActive
}
event.target.innerHTML = `${(isRotationActive ? '暂停' : '重置')} 旋转`;
});
</script>
</body>