Almost there with the links
parent
0432c9df67
commit
9371ba1ab3
39
main.js
39
main.js
|
@ -3,17 +3,37 @@ import * as THREE from 'three';
|
|||
const NODE_SIZE = 0.1;
|
||||
const LINK_SIZE = 0.05;
|
||||
|
||||
|
||||
function makeLink(link_m, n1, n2) {
|
||||
const length = n1.distanceTo(n2);
|
||||
const centre = new THREE.Vector3();
|
||||
centre.lerpVectors(n1, n2, 0.5);
|
||||
const geometry = new THREE.CylinderGeometry(LINK_SIZE, LINK_SIZE,length);
|
||||
// const geometry = new THREE.SphereGeometry(LINK_SIZE);
|
||||
const cyl = new THREE.Mesh(geometry, link_m);
|
||||
cyl.position.x = centre.x;
|
||||
cyl.position.y = centre.y;
|
||||
cyl.position.z = centre.z;
|
||||
cyl.lookAt(n2);
|
||||
return cyl;
|
||||
}
|
||||
|
||||
|
||||
|
||||
function makeWireFrame(node_m, link_m, graph) {
|
||||
const nodeids = {}
|
||||
const group = new THREE.Group();
|
||||
for ( const n of graph.nodes ) {
|
||||
nodeids[n.id] = [ n.x, n.y, n.z ];
|
||||
const v3 = new THREE.Vector3(n.x, n.y, n.z);
|
||||
nodeids[n.id] = v3.clone();
|
||||
const geometry = new THREE.SphereGeometry(NODE_SIZE);
|
||||
const sphere = new THREE.Mesh(geometry, node_m);
|
||||
sphere.position.copy(v3);
|
||||
group.add(sphere);
|
||||
sphere.position.x = n.x;
|
||||
sphere.position.y = n.y;
|
||||
sphere.position.z = n.z;
|
||||
}
|
||||
for ( const l of graph.links ) {
|
||||
const link = makeLink(link_m, nodeids[l.source], nodeids[l.target]);
|
||||
group.add(link);
|
||||
}
|
||||
return group;
|
||||
}
|
||||
|
@ -27,12 +47,12 @@ renderer.setSize( window.innerWidth, window.innerHeight );
|
|||
document.body.appendChild( renderer.domElement );
|
||||
|
||||
const node_m = new THREE.MeshBasicMaterial( { color: 0x33ff00 } );
|
||||
const link_m = new THREE.MeshBasicMaterial( { color: 0x009930 } );
|
||||
const link_m = new THREE.MeshBasicMaterial( { color: 0x990030 } );
|
||||
|
||||
|
||||
|
||||
|
||||
const octahedron = makeWireFrame(node_m, link_m, {
|
||||
const shape = makeWireFrame(node_m, link_m, {
|
||||
nodes: [
|
||||
{ id: 1, x: 0, y: -1, z: 0 },
|
||||
{ id: 2, x: 0, y: 0, z: -1 },
|
||||
|
@ -59,7 +79,8 @@ const octahedron = makeWireFrame(node_m, link_m, {
|
|||
|
||||
|
||||
|
||||
scene.add(octahedron);
|
||||
|
||||
scene.add(shape);
|
||||
|
||||
|
||||
|
||||
|
@ -70,8 +91,8 @@ let tick = 0;
|
|||
function animate() {
|
||||
requestAnimationFrame( animate );
|
||||
|
||||
octahedron.rotation.x = tick * 0.3;
|
||||
octahedron.rotation.y = tick * 0.5;
|
||||
shape.rotation.x = tick * 0.03;
|
||||
shape.rotation.y = tick * 0.05;
|
||||
|
||||
tick += 0.01;
|
||||
renderer.render( scene, camera );
|
||||
|
|
Loading…
Reference in New Issue