-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
71 lines (63 loc) · 2.21 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; }
.scene-tooltip{
color: black !important;
background-color: #f5f5f5;
font-weight: bold;
border-radius: 10px;
padding-top: 3px;
opacity: 0.5;
}
</style>
<script src="https://unpkg.com/[email protected]/build/three.js"></script>
<script src="https://unpkg.com/[email protected]/dist/three-spritetext.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/3d-force-graph.min.js"></script>
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
</head>
<body>
<div id="3d-graph"></div>
<script>
const Graph = ForceGraph3D()
(document.getElementById('3d-graph'))
.jsonUrl('cultural_heritage_json_0917_noMatching.json')
.nodeLabel('hover')
.nodeAutoColorBy('group')
.linkThreeObjectExtend(true)
.linkThreeObject((links) => {
// extend link with text sprite
const sprite = new SpriteText(`${links.description}`); //const 변수명 변경
sprite.color = 'lightgrey';
sprite.textHeight = 5.5; //간선 텍스트 크기 조절
return sprite;
})
.linkPositionUpdate((sprite, { start, end }) => {
const middlePos = Object.assign(
...['x', 'y', 'z'].map((c) => ({
[c]: start[c] + (end[c] - start[c]) / 2, // calc middle point
}))
);
// Position sprite
Object.assign(sprite.position, middlePos);
})
//img 넣어주기
.nodeThreeObject((node) => {
if (node.icon) {
var map = new THREE.TextureLoader().load( node.icon );
map.minFilter = THREE.LinearFilter;
var material = new THREE.SpriteMaterial( { map: map } );
var sprite = new THREE.Sprite( material );
sprite.scale.set(32,32,1);
return sprite;
}
else {
return false
}
});
// Spread nodes a little wider
Graph.d3Force('charge').strength(-500);
</script>
</body>
</html>