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
2. FrontEnd dev at PixelGrid, Inc. Akihiro Oyamada @yomotsu
3. Also, an occasional three.js contributor
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
6. 5% 20% 75% OrbitControls Other controls No Controls ˒According to my feeling
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
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:
9. camera-controls
10. FYI: Names of
 camera movement
11. https://github.com/yomotsu/camera-movement-comparison#readme
12. camera-controls https://www.npmjs.com/package/camera-controls
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
14. Usage of
 camera-controls
15. $ npm install --save three camera-controls Install three.js and camera-controls Standalone script file is also available (on github)
16. import * as THREE from 'three'; import CameraControls from 'camera-controls'; CameraControls.install( { THREE } ); Import packages
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
18. const controls = new CameraControls( camera, renderer.domElement ); Make a CameraControls instance
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
20. const azimuthAngle = 30 * THREE.Math.DEG2RAD; const polarAngle = 90 * THREE.Math.DEG2RAD; const moveSmoothly = true;
 controls.rotateTo( azimuthAngle, polarAngle, moveSmoothly ); Run methods whenever
21. Demo
22. • Zoom(FOV) controls • Mouse button (touch) config #51 • Write in TypeScript • Path animation TODOs
23. • camera-control fills the missing features of official controls. • Available on NPM and GitHub. • Published under the MIT License. Conclusion
24. I hope this was useful.
25. Issues and PRs are welcome
26. • NPM:
 https://www.npmjs.com/package/camera-controls • GitHub:
 https://github.com/yomotsu/camera-controls/
27. gl.finish(); @yomotsu