code

Light WebGL Javascript libraries

light WebGL libraries

Light WebGL Javascript libraries

  • 3d
  • code
  • javascript
  • library
  • resource
  • webgl
h1 {
  -webkit-text-stroke: 4px #F07;
  paint-order: stroke fill;
}

Text border

  • code
  • css
  • text
.digital {
  font-variant-numeric: tabular-nums lining-nums;
}

Monospace with CSS

  • code
  • css
  • digital
  • monospace
  • number
# 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

  • bash
  • code
  • npm
  • 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

  • camera
  • code
  • javascript
  • three.js
/*
 * 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)
}

three.js camera

  • camera
  • code
  • javascript
  • three.js