A Camera Control Library for three.js

My talk at three.js meetup tokyo #0

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