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

We have aesthetically pleasing octahedron

Browse Source
This commit is contained in:
Mike Lynch 2023-07-22 15:14:35 +10:00
parent 43f4d7a1cc
commit 4f0f17c41e
1 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
main.js
View File

@ -1,7 +1,7 @@
import * as THREE from 'three'; import * as THREE from 'three';
const NODE_SIZE = 0.1; const NODE_SIZE = 0.07;
const LINK_SIZE = 0.05; const LINK_SIZE = 0.02;
function makeLink(link_m, n1, n2) { function makeLink(link_m, n1, n2) {
@ -43,15 +43,31 @@ function makeWireFrame(node_m, link_m, graph) {
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 );
const light = new THREE.PointLight(0xffffff, 2);
light.position.set(10, 10, 10);
scene.add(light);
const amblight = new THREE.AmbientLight(0xffffff, 0.2);
scene.add(amblight);
scene.background = new THREE.Color(0xdddddd);
const renderer = new THREE.WebGLRenderer(); 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 node_m = new THREE.MeshStandardMaterial(
const link_m = new THREE.MeshBasicMaterial( { color: 0x990030 } ); { color: 0x330000 } );
node_m.roughness = 0.2;
const link_m = new THREE.MeshStandardMaterial(
{ color: 0xf0f0f0 } );
link_m.metalness = 0.4;
link_m.roughness = 0.0;
const shape = makeWireFrame(node_m, link_m, { const shape = makeWireFrame(node_m, link_m, {
nodes: [ nodes: [
@ -85,15 +101,15 @@ scene.add(shape);
camera.position.z = 5; camera.position.z = 3;
let tick = 0; let tick = 0;
function animate() { function animate() {
requestAnimationFrame( animate ); requestAnimationFrame( animate );
shape.rotation.x = tick * 0.03; shape.rotation.x = tick * 0.3;
shape.rotation.y = tick * 0.05; shape.rotation.y = tick * 0.5;
tick += 0.01; tick += 0.01;
renderer.render( scene, camera ); renderer.render( scene, camera );