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;
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 @@
</head>
<body>
<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="release_notes"></div>
<div id="info"><a href="#" id="show_notes">release 1.1</a> |

53
main.js
View File

@ -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);
@ -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)
];