camera

const hFOV = 2 * Math.atan( Math.tan( camera.fov * Math.PI / 180 / 2 ) * camera.aspect ) * 180 / Math.PI; // degrees

horizontal field-of-view

  • camera
  • code
  • fov
  • javascript
  • three.js
function fovHorizontalToVertical(fovHorizontal, aspect) {
  const fovHorizontalRad = (fovHorizontal * Math.PI) / 180;
  const fovVerticalRad = 2 * Math.atan(Math.tan(fovHorizontalRad / 2) / aspect);
  const fovVertical = (fovVerticalRad * 180) / Math.PI;
  return fovVertical;
}

const fovHorizontal = 50;
const aspect = window.innerWidth / window.innerHeight;

const fovVertical = fovHorizontalToVertical(fovHorizontal, aspect);

camera.fov = fovVertical;
camera.updateProjectionMatrix();

horizontal field-of-view

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