From 0432c9df67238a7dfa4f2d332d7ded2583fe8503 Mon Sep 17 00:00:00 2001
From: Mike Lynch <mike@mikelynch.org>
Date: Sat, 22 Jul 2023 13:47:57 +1000
Subject: [PATCH] Rendering nodes of a ball-stick model

---
 main.js | 94 +++++++++++++++++++++++----------------------------------
 1 file changed, 37 insertions(+), 57 deletions(-)

diff --git a/main.js b/main.js
index 0c0d212..aff7c0f 100644
--- a/main.js
+++ b/main.js
@@ -1,15 +1,15 @@
 import * as THREE from 'three';
 
-const NODE_SIZE = 0.2;
-const LINK_SIZE = 0.1;
+const NODE_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 group = new THREE.Group();
 	for ( const n of graph.nodes ) {
 		nodeids[n.id] = [ n.x, n.y, n.z ];
 		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);
 		sphere.position.x = n.x;
 		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 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 );
 document.body.appendChild( renderer.domElement );
 
-
-const group = new THREE.Group();
-
-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 }
-// 	]
-// });
+const node_m = new THREE.MeshBasicMaterial( { color: 0x33ff00 } );
+const link_m = new THREE.MeshBasicMaterial( { color: 0x009930 } );
 
 
 
-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() {
 	requestAnimationFrame( animate );
 
-	group.position.x = Math.sin(tick) * 2;
-	group.rotation.y = tick;
+	octahedron.rotation.x = tick * 0.3;
+	octahedron.rotation.y = tick * 0.5;
 
 	tick += 0.01;
 	renderer.render( scene, camera );