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

More tinkering with geometry

feature-big-polytopes
Mike Lynch 2023-07-22 13:40:01 +10:00
parent cb0f0fb2bd
commit 702df89634
1 changed files with 29 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
main.js
View File

@ -3,18 +3,17 @@ import * as THREE from 'three';
const NODE_SIZE = 0.2; const NODE_SIZE = 0.2;
const LINK_SIZE = 0.1; const LINK_SIZE = 0.1;
function makeShape(graph) { function makeWireFrame(link_m, node_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, NODE_SIZE,NODE_SIZE); const geometry = new THREE.SphereGeometry(NODE_SIZE);
const material = new THREE.MeshBasicMaterial({color: 0x00ff00}); const sphere = new THREE.Mesh(geometry, mode_m);
const sphere = new THREE.Mesh(geometry, material);
group.add(sphere); group.add(sphere);
sphere.x = n.x; sphere.position.x = n.x;
sphere.y = n.y; sphere.position.y = n.y;
sphere.z = n.z; sphere.position.z = n.z;
} }
return group; return group;
} }
@ -44,10 +43,6 @@ 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 geometry = new THREE.BoxGeometry( 1, 1, 1 );
// const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
// const cube = new THREE.Mesh( geometry, material );
// scene.add( cube );
const group = new THREE.Group(); const group = new THREE.Group();
@ -56,12 +51,34 @@ const sphere_m = new THREE.MeshBasicMaterial( { color: 0x33ff00 } );
const sphere = new THREE.Mesh( sphere_g, sphere_m ); const sphere = new THREE.Mesh( sphere_g, sphere_m );
group.add( sphere ); 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_g = new THREE.CylinderGeometry( 0.2, 0.2, 4 );
const cyl_m = new THREE.MeshBasicMaterial( { color: 0x009930 } ); const cyl_m = new THREE.MeshBasicMaterial( { color: 0x009930 } );
const cyl = new THREE.Mesh( cyl_g, cyl_m ); const cyl = new THREE.Mesh( cyl_g, cyl_m );
group.add( cyl ); 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); scene.add(group);
@ -73,10 +90,8 @@ let tick = 0;
function animate() { function animate() {
requestAnimationFrame( animate ); requestAnimationFrame( animate );
group.rotation.x = tick; group.position.x = Math.sin(tick) * 2;
group.rotation.y = tick; group.rotation.y = tick;
cyl.position.y = Math.sin(tick * 10) * 0.4;
cyl.rotation.x = tick * 2;
tick += 0.01; tick += 0.01;
renderer.render( scene, camera ); renderer.render( scene, camera );