From 37218678d536be99dcfcf85a5f9fe797c5759dcb Mon Sep 17 00:00:00 2001 From: Mike Lynch Date: Sun, 4 Jan 2026 13:48:10 +1100 Subject: [PATCH] Got a pixelated version of the main renderer --- index.html | 14 ++++++++++++++ main.js | 57 ++++++++++++++---------------------------------------- 2 files changed, 29 insertions(+), 42 deletions(-) diff --git a/index.html b/index.html index 0460f61..449f7e9 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,17 @@ font-family: sans-serif; padding: 1em; } + div#container { + position: fixed; + top: 20px; + left: 300px; + } + canvas { + width: 512px; + height: 512px; + image-rendering: crisp-edges; /* for firefox */ + image-rendering: pixelated; + } div#release_notes { position: fixed; top: 0; @@ -34,6 +45,9 @@ +
+ +
release 1.1 | diff --git a/main.js b/main.js index e075c5a..16db696 100644 --- a/main.js +++ b/main.js @@ -30,7 +30,7 @@ const CAMERA_K = 5; // scene, lights and camera const scene = new THREE.Scene(); -const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); +const camera = new THREE.PerspectiveCamera( 75, 1, 0.1, 1000 ); const light = new THREE.PointLight(0xffffff, 2); light.position.set(10, 10, 10); scene.add(light); @@ -45,14 +45,16 @@ camera.position.set(0, 0, CAMERA_K / 2); camera.lookAt(0, 0, 0); //camera.position.z = 4; -const renderer = new THREE.WebGLRenderer({antialias: true}); -renderer.setSize( window.innerWidth, window.innerHeight ); +const canvas = document.getElementById("canvas"); + +const renderer = new THREE.WebGLRenderer({antialias: true, canvas: canvas}); +renderer.setSize(40,40); + +canvas.style.width="400px"; +canvas.style.height="400px"; renderer.localClippingEnabled = true; - -document.body.appendChild( renderer.domElement ); - // set up colours and materials for gui callbacks scene.background = new THREE.Color(DEFAULTS.background); @@ -169,7 +171,7 @@ function setBackground(c) { // taperedLinks have their own materials so we have to set opacity // on them individually. And also set the base materials as they -// will get updated from it when the shape changes +// will get updated from it when the shape changes function setLinkOpacity(o, primary) { link_ms.map((lm) => lm.opacity = o); @@ -187,7 +189,7 @@ function setNodeOpacity(o) { } -let gui; +let gui; function changeShape() { @@ -227,6 +229,8 @@ setBackground(gui.params.background); const dragK = 0.005; const damping = 0.99; +const dtheta = 2 * Math.PI / 480; +const dpsi = 2 * Math.PI / 480; let theta = 0; let psi = 0; @@ -237,47 +241,16 @@ let dragy0 = 0; let dragging = false; -renderer.domElement.addEventListener("pointerdown", (event) => { - if( event.buttons === 1 ) { - theta0 = theta; - psi0 = psi; - dragx0 = event.clientX; - dragy0 = event.clientY; - dragging = true; - } -}) - -renderer.domElement.addEventListener("pointermove", (event) => { - if( event.buttons === 1 ) { - const theta1 = theta0 + (event.clientX - dragx0) * dragK; - const psi1 = psi0 + (event.clientY - dragy0) * dragK; - gui.params.dtheta = theta1 - theta; - gui.params.dpsi = psi1 - psi; - theta = theta1; - psi = psi1; - } -}) - -renderer.domElement.addEventListener("pointerup", (event) => { - dragging = false; -}) - createShape(gui.params.shape, gui.params.option); displayDocs(gui.params.shape); function animate() { requestAnimationFrame( animate ); - if( ! dragging ) { - theta += gui.params.dtheta; - psi += gui.params.dpsi; - if( gui.params.damping ) { - gui.params.dtheta = gui.params.dtheta * damping; - gui.params.dpsi = gui.params.dpsi * damping; - } - } + theta += dtheta; + psi += dpsi; - const rotations = [ +const rotations = [ rotfn[gui.params.xRotate](theta), rotfn[gui.params.yRotate](psi) ];