$30 off During Our Annual Pro Sale. View Details »

A Camera Control Library for three.js

yomotsu
November 20, 2019
820

A Camera Control Library for three.js

My talk at three.js meetup tokyo #0

yomotsu

November 20, 2019
Tweet

Transcript

  1. A Camera Control
    Library for three.js
    @yomotsu 2019-11-20

    View Slide

  2. FrontEnd dev
    at PixelGrid, Inc.
    Akihiro Oyamada
    @yomotsu

    View Slide

  3. Also, an occasional
    three.js contributor

    View Slide

  4. View Slide

  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

    View Slide

  6. 5%
    20%
    75%
    OrbitControls Other controls No Controls
    ˒According to my feeling

    View Slide

  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

    View Slide

  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:

    View Slide

  9. camera-controls

    View Slide

  10. FYI: Names of

    camera movement

    View Slide

  11. https://github.com/yomotsu/camera-movement-comparison#readme

    View Slide

  12. camera-controls
    https://www.npmjs.com/package/camera-controls

    View Slide

  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

    View Slide

  14. Usage of

    camera-controls

    View Slide

  15. $ npm install --save three camera-controls
    Install three.js and camera-controls
    Standalone script file is also available (on github)

    View Slide

  16. import * as THREE from 'three';
    import CameraControls from 'camera-controls';
    CameraControls.install( { THREE } );
    Import packages

    View Slide

  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

    View Slide

  18. const controls = new CameraControls(
    camera,
    renderer.domElement
    );
    Make a CameraControls instance

    View Slide

  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

    View Slide

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

    controls.rotateTo(
    azimuthAngle,
    polarAngle,
    moveSmoothly
    );
    Run methods whenever

    View Slide

  21. Demo

    View Slide

  22. • Zoom(FOV) controls
    • Mouse button (touch) config #51
    • Write in TypeScript
    • Path animation
    TODOs

    View Slide

  23. • camera-control fills the missing
    features of official controls.
    • Available on NPM and GitHub.
    • Published under the MIT License.
    Conclusion

    View Slide

  24. I hope this was useful.

    View Slide

  25. Issues and PRs are
    welcome

    View Slide

  26. • NPM:

    https://www.npmjs.com/package/camera-controls
    • GitHub:

    https://github.com/yomotsu/camera-controls/

    View Slide

  27. gl.finish();
    @yomotsu

    View Slide