code

light WebGL libraries
Light WebGL Javascript libraries
h1 {
-webkit-text-stroke: 4px #F07;
paint-order: stroke fill;
}
Text border
.digital {
font-variant-numeric: tabular-nums lining-nums;
}
Monospace with CSS
# List all node_modules weight in sub directories
find . -name "node_modules" -type d -prune -print | xargs du -chs
# Delete all node_modules directories in sub directories
find . -name 'node_modules' -type d -prune -print -exec rm -rf '{}' \;
node_modules weight
/*
* Resize camera and change camera distance from 3D object
* Ref: https://github.com/mrdoob/three.js/issues/1239
*/
function onCanvasResized( w, h )
{
camera.aspect = w / h
camera.updateProjectionMatrix()
// Change camera distance for width of a 3D object in full screen
const aspect = camera.aspect
const height = GLOBAL_DATA.width / aspect
const fov = camera.fov
const dist = height / ( 2 * Math.tan( fov * Math.PI / 360 ) );
camera.position.z = dist
renderer.setSize(w, h)
}
three.js camera
/*
* Resize camera, change camera distance from 3D object and set y camera position
* Ref: https://github.com/mrdoob/three.js/issues/1239
*/
function onCanvasResized( w, h )
{
camera.aspect = w / h
camera.updateProjectionMatrix()
// Change camera distance for width of a 3D object in full screen
const aspect = camera.aspect
const height = GLOBAL_DATA.width / aspect
const a = 2 * Math.tan( camera.fov * Math.PI / 360 )
const dist = height / a
camera.position.z = dist
// Get height for 3D objects
const objH = a * dist / 2
camera.position.y = -objH
console.log( camera.position, height, objH )
renderer.setSize(w, h)
}