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

Got a pixelated version of the main renderer

Browse Source
This commit is contained in:
Mike Lynch 2026-01-04 13:48:10 +11:00
parent 1baf2706f5
commit 37218678d5
2 changed files with 29 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
index.html
View File

@ -14,6 +14,17 @@
font-family: sans-serif; font-family: sans-serif;
padding: 1em; 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 { div#release_notes {
position: fixed; position: fixed;
top: 0; top: 0;
@ -34,6 +45,9 @@
</head> </head>
<body> <body>
<script type="module" src="/main.js"></script> <script type="module" src="/main.js"></script>
<div id="container">
<canvas id="canvas" style="width: 512px; height: 512px"></canvas>
</div>
<div id="description"></div> <div id="description"></div>
<div id="release_notes"></div> <div id="release_notes"></div>
<div id="info"><a href="#" id="show_notes">release 1.1</a> | <div id="info"><a href="#" id="show_notes">release 1.1</a> |

57
main.js
View File

@ -30,7 +30,7 @@ const CAMERA_K = 5;
// scene, lights and camera // scene, lights and camera
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, 1, 0.1, 1000 );
const light = new THREE.PointLight(0xffffff, 2); const light = new THREE.PointLight(0xffffff, 2);
light.position.set(10, 10, 10); light.position.set(10, 10, 10);
scene.add(light); scene.add(light);
@ -45,14 +45,16 @@ camera.position.set(0, 0, CAMERA_K / 2);
camera.lookAt(0, 0, 0); camera.lookAt(0, 0, 0);
//camera.position.z = 4; //camera.position.z = 4;
const renderer = new THREE.WebGLRenderer({antialias: true}); const canvas = document.getElementById("canvas");
renderer.setSize( window.innerWidth, window.innerHeight );
const renderer = new THREE.WebGLRenderer({antialias: true, canvas: canvas});
renderer.setSize(40,40);
canvas.style.width="400px";
canvas.style.height="400px";
renderer.localClippingEnabled = true; renderer.localClippingEnabled = true;
document.body.appendChild( renderer.domElement );
// set up colours and materials for gui callbacks // set up colours and materials for gui callbacks
scene.background = new THREE.Color(DEFAULTS.background); 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 // taperedLinks have their own materials so we have to set opacity
// on them individually. And also set the base materials as they // 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) { function setLinkOpacity(o, primary) {
link_ms.map((lm) => lm.opacity = o); link_ms.map((lm) => lm.opacity = o);
@ -187,7 +189,7 @@ function setNodeOpacity(o) {
} }
let gui; let gui;
function changeShape() { function changeShape() {
@ -227,6 +229,8 @@ setBackground(gui.params.background);
const dragK = 0.005; const dragK = 0.005;
const damping = 0.99; const damping = 0.99;
const dtheta = 2 * Math.PI / 480;
const dpsi = 2 * Math.PI / 480;
let theta = 0; let theta = 0;
let psi = 0; let psi = 0;
@ -237,47 +241,16 @@ let dragy0 = 0;
let dragging = false; 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); createShape(gui.params.shape, gui.params.option);
displayDocs(gui.params.shape); displayDocs(gui.params.shape);
function animate() { function animate() {
requestAnimationFrame( animate ); requestAnimationFrame( animate );
if( ! dragging ) { theta += dtheta;
theta += gui.params.dtheta; psi += dpsi;
psi += gui.params.dpsi;
if( gui.params.damping ) {
gui.params.dtheta = gui.params.dtheta * damping;
gui.params.dpsi = gui.params.dpsi * damping;
}
}
const rotations = [ const rotations = [
rotfn[gui.params.xRotate](theta), rotfn[gui.params.xRotate](theta),
rotfn[gui.params.yRotate](psi) rotfn[gui.params.yRotate](psi)
]; ];