2024-11-14 15:30:11 +08:00
|
|
|
<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>
|
2024-11-29 09:50:37 +08:00
|
|
|
<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";
|
2024-11-14 15:30:11 +08:00
|
|
|
|
2024-11-29 09:50:37 +08:00
|
|
|
const distance = 500;
|
|
|
|
|
let isRotationActive = true;
|
2024-11-14 15:30:11 +08:00
|
|
|
|
2024-11-29 09:50:37 +08:00
|
|
|
// 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))
|
|
|
|
|
// }))
|
|
|
|
|
// };
|
2024-11-14 15:30:11 +08:00
|
|
|
const Graph = ForceGraph3D()
|
|
|
|
|
(document.getElementById('3d-graph'))
|
2024-11-29 09:50:37 +08:00
|
|
|
// .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 ? '暂停' : '重置')} 旋转`;
|
|
|
|
|
});
|
|
|
|
|
|
2024-11-14 15:30:11 +08:00
|
|
|
</script>
|
|
|
|
|
</body>
|
