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