A Camera Control Library for three.js

3c557c6103a4addc52f7b76ffd0a0f27?s=47 yomotsu
November 20, 2019
240

A Camera Control Library for three.js

My talk at three.js meetup tokyo #0

3c557c6103a4addc52f7b76ffd0a0f27?s=128

yomotsu

November 20, 2019
Tweet

Transcript

  1. 4.
  2. 5.

    • DeviceOrientationControls • FirstPersonControls • FlyControls Camera Controls of three.js

    • OrbitControls • PointerLockControls • TrackballControls https://github.com/mrdoob/three.js/tree/dev/examples/js/controls https://threejs.org/examples/?q=controls
  3. 7.

    • DeviceOrientationControls • FirstPersonControls • FlyControls Camera Controls of three.js

    • OrbitControls • PointerLockControls • TrackballControls https://github.com/mrdoob/three.js/tree/dev/examples/js/controls https://threejs.org/examples/?q=controls
  4. 8.

    • Orbital rotate via methods
 e.g. when user pressed a

    HTML button, point of view changes. • Fit view to the target object • Boundary area of movement • Dolly to cursor You may also need:
  5. 13.

    • Drag to rotate • Rotate and translate via methods

    • Fit the object to view • Boundary (thanks to @FMS_Cat) • Dolly to cursor (thanks to @FMS_Cat) and more… Features
  6. 15.

    $ npm install --save three camera-controls Install three.js and camera-controls

    Standalone script file is also available (on github)
  7. 16.

    import * as THREE from 'three'; import CameraControls from 'camera-controls';

    CameraControls.install( { THREE } ); Import packages
  8. 17.

    const clock = new THREE.Clock(); const scene = new THREE.Scene();

    const camera = new THREE.PerspectiveCamera( 60, width / height, 0.01, 1000 ); camera.position.set( 0, 0, 5 ); const renderer = new THREE.WebGLRenderer(); renderer.setSize( width, height ); document.body.appendChild( renderer.domElement ); Make your scene
  9. 19.

    ( function anim () { const delta = clock.getDelta(); const

    elapsed = clock.getElapsedTime(); requestAnimationFrame( anim );
 controls.update( delta ); renderer.render( scene, camera ); } )(); Update the instance in tick function
  10. 20.

    const azimuthAngle = 30 * THREE.Math.DEG2RAD; const polarAngle = 90

    * THREE.Math.DEG2RAD; const moveSmoothly = true;
 controls.rotateTo( azimuthAngle, polarAngle, moveSmoothly ); Run methods whenever
  11. 21.
  12. 22.

    • Zoom(FOV) controls • Mouse button (touch) config #51 •

    Write in TypeScript • Path animation TODOs
  13. 23.

    • camera-control fills the missing features of official controls. •

    Available on NPM and GitHub. • Published under the MIT License. Conclusion