Skip to content

Instantly share code, notes, and snippets.

@mys

mys/three-forcegraph-material-array.html Secret

Last active July 11, 2020 16:15
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mys/ff6100af32790ed99890cf4378a14020 to your computer and use it in GitHub Desktop.
Save mys/ff6100af32790ed99890cf4378a14020 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
three-forcegraph-material-array.html
<head>
<script src="//unpkg.com/3d-force-graph@1.35.1"></script>
<!-- <script src="node_modules/3d-force-graph/dist/3d-force-graph.js"></script> -->
<script src="//unpkg.com/three"></script>
</head>
<body>
<div id="3d-graph"></div>
<script>
const N = 5;
const gData = {
nodes: [...Array(N).keys()].map(i => ({ id: i })),
links: [...Array(N).keys()]
.filter(id => id)
.map(id => ({
source: id,
target: Math.round(Math.random() * (id-1))
}))
};
const Graph = new ForceGraph3D()
(document.getElementById('3d-graph'))
.graphData(gData)
.nodeVal(10)
.nodeThreeObject(node => {
var box = new THREE.BoxGeometry(10, 10, 10);
var materials = [
new THREE.MeshStandardMaterial({color: 'red'}),
new THREE.MeshStandardMaterial({color: 'green'}),
new THREE.MeshStandardMaterial({color: 'blue'}),
new THREE.MeshStandardMaterial({color: 'cyan'}),
new THREE.MeshStandardMaterial({color: 'magenta'}),
new THREE.MeshStandardMaterial({color: 'yellow'}),
];
// 'materials' is of type Array()
return new THREE.Mesh(box, materials);
});
setInterval(() => {
const id = Graph.graphData().nodes.length;
Graph.graphData({
nodes: [...Graph.graphData().nodes, { id: id }],
links: [...Graph.graphData().links, { source: id, target: Math.round(Math.random() * (id-1)) }]
});
console.log(Graph.graphData())
}, 1000);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment