29 lines
956 B
HTML
29 lines
956 B
HTML
|
<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>
|
||
|
|
|
||
|
|
<!-- <script type="importmap">{ "imports": { "three": "//unpkg.com/three/build/three.module.js" }}</script> -->
|
||
|
|
<script src="../../../node_modules/three/build/three.module.js"></script>
|
||
|
|
<script type="module">
|
||
|
|
import { UnrealBloomPass } from '../../../node_modules/three/examples/jsm/postprocessing/UnrealBloomPass.js';
|
||
|
|
|
||
|
|
const Graph = ForceGraph3D()
|
||
|
|
(document.getElementById('3d-graph'))
|
||
|
|
.backgroundColor('#000003')
|
||
|
|
.jsonUrl('../datasets/miserables.json')
|
||
|
|
.nodeLabel('id')
|
||
|
|
.nodeAutoColorBy('group');
|
||
|
|
|
||
|
|
const bloomPass = new UnrealBloomPass();
|
||
|
|
bloomPass.strength = 4;
|
||
|
|
bloomPass.radius = 1;
|
||
|
|
bloomPass.threshold = 0;
|
||
|
|
Graph.postProcessingComposer().addPass(bloomPass);
|
||
|
|
</script>
|
||
|
|
</body>
|