bombinans
/
fourdjs
1
1
Fork 0
Code Issues 11 Pull Requests Packages Projects Releases Wiki Activity

Rendering nodes of a ball-stick model

feature-big-polytopes
Mike Lynch 2023-07-22 13:47:57 +10:00
parent 702df89634
commit 0432c9df67
1 changed files with 37 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
main.js
View File

@ -1,15 +1,15 @@
import * as THREE from 'three'; import * as THREE from 'three';
const NODE_SIZE = 0.2; const NODE_SIZE = 0.1;
const LINK_SIZE = 0.1; const LINK_SIZE = 0.05;
function makeWireFrame(link_m, node_m, graph) { function makeWireFrame(node_m, link_m, graph) {
const nodeids = {} const nodeids = {}
const group = new THREE.Group(); const group = new THREE.Group();
for ( const n of graph.nodes ) { for ( const n of graph.nodes ) {
nodeids[n.id] = [ n.x, n.y, n.z ]; nodeids[n.id] = [ n.x, n.y, n.z ];
const geometry = new THREE.SphereGeometry(NODE_SIZE); const geometry = new THREE.SphereGeometry(NODE_SIZE);
const sphere = new THREE.Mesh(geometry, mode_m); const sphere = new THREE.Mesh(geometry, node_m);
group.add(sphere); group.add(sphere);
sphere.position.x = n.x; sphere.position.x = n.x;
sphere.position.y = n.y; sphere.position.y = n.y;
@ -19,23 +19,6 @@ function makeWireFrame(link_m, node_m, graph) {
} }
// const shape = makeShape({
// nodes: [
// { id: 1, x: -10, y: -10, z: -10 },
// { id: 2, x: 10, y: 10, z: 10}
// ],
// links: [
// { id: 1, source: 1, target: 1 }
// ]
// });
const scene = new THREE.Scene(); const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
@ -43,43 +26,40 @@ const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight ); renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement ); document.body.appendChild( renderer.domElement );
const node_m = new THREE.MeshBasicMaterial( { color: 0x33ff00 } );
const group = new THREE.Group(); const link_m = new THREE.MeshBasicMaterial( { color: 0x009930 } );
const sphere_g = new THREE.SphereGeometry( 1 );
const sphere_m = new THREE.MeshBasicMaterial( { color: 0x33ff00 } );
const sphere = new THREE.Mesh( sphere_g, sphere_m );
group.add( sphere );
sphere.position.x = -2;
const sphere2_g = new THREE.SphereGeometry( 1 );
const sphere2 = new THREE.Mesh( sphere_g, sphere_m );
group.add( sphere2 );
sphere2.position.x = 2;
const cyl_g = new THREE.CylinderGeometry( 0.2, 0.2, 4 );
const cyl_m = new THREE.MeshBasicMaterial( { color: 0x009930 } );
const cyl = new THREE.Mesh( cyl_g, cyl_m );
group.add( cyl );
// const shape = makeShape({
// nodes: [
// { id: 1, x: -10, y: -10, z: -10 },
// { id: 2, x: 10, y: 10, z: 10}
// ],
// links: [
// { id: 1, source: 1, target: 1 }
// ]
// });
scene.add(group);
const octahedron = makeWireFrame(node_m, link_m, {
nodes: [
{ id: 1, x: 0, y: -1, z: 0 },
{ id: 2, x: 0, y: 0, z: -1 },
{ id: 3, x: -1, y: 0, z: 0 },
{ id: 4, x: 0, y: 0, z: 1 },
{ id: 5, x: 1, y: 0, z: 0 },
{ id: 6, x: 0, y: 1, z: 0 },
],
links: [
{ id: 1, source: 1, target: 2 },
{ id: 2, source: 1, target: 3 },
{ id: 3, source: 1, target: 4 },
{ id: 4, source: 1, target: 5 },
{ id: 5, source: 2, target: 3 },
{ id: 6, source: 3, target: 4 },
{ id: 7, source: 4, target: 5 },
{ id: 8, source: 5, target: 2 },
{ id: 9, source: 2, target: 6 },
{ id: 10, source: 3, target: 6 },
{ id: 11, source: 4, target: 6 },
{ id: 12, source: 5, target: 6 },
]
});
scene.add(octahedron);
@ -90,8 +70,8 @@ let tick = 0;
function animate() { function animate() {
requestAnimationFrame( animate ); requestAnimationFrame( animate );
group.position.x = Math.sin(tick) * 2; octahedron.rotation.x = tick * 0.3;
group.rotation.y = tick; octahedron.rotation.y = tick * 0.5;
tick += 0.01; tick += 0.01;
renderer.render( scene, camera ); renderer.render( scene, camera );