Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
A Camera Control Library for three.js
yomotsu
November 20, 2019
0
310
A Camera Control Library for three.js
My talk at three.js meetup tokyo #0
yomotsu
November 20, 2019
Tweet
Share
More Decks by yomotsu
See All by yomotsu
yomotsu
0
350
yomotsu
2
940
yomotsu
5
7.3k
yomotsu
4
6.7k
yomotsu
1
830
yomotsu
4
3.7k
yomotsu
2
830
yomotsu
3
1.1k
yomotsu
2
1.1k
Featured
See All Featured
malarkey
119
16k
maggiecrowley
8
400
revolveconf
200
9.6k
jlugia
216
16k
sstephenson
144
12k
62gerente
587
200k
jacobian
255
20k
addyosmani
494
110k
kastner
54
1.9k
lara
172
9.5k
deanohume
295
27k
rmw
11
740
Transcript
A Camera Control Library for three.js @yomotsu 2019-11-20
FrontEnd dev at PixelGrid, Inc. Akihiro Oyamada @yomotsu
Also, an occasional three.js contributor
None
• 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
5% 20% 75% OrbitControls Other controls No Controls ˒According to
my feeling
• 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
• 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:
camera-controls
FYI: Names of camera movement
https://github.com/yomotsu/camera-movement-comparison#readme
camera-controls https://www.npmjs.com/package/camera-controls
• 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
Usage of camera-controls
$ npm install --save three camera-controls Install three.js and camera-controls
Standalone script file is also available (on github)
import * as THREE from 'three'; import CameraControls from 'camera-controls';
CameraControls.install( { THREE } ); Import packages
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
const controls = new CameraControls( camera, renderer.domElement ); Make a
CameraControls instance
( 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
const azimuthAngle = 30 * THREE.Math.DEG2RAD; const polarAngle = 90
* THREE.Math.DEG2RAD; const moveSmoothly = true; controls.rotateTo( azimuthAngle, polarAngle, moveSmoothly ); Run methods whenever
Demo
• Zoom(FOV) controls • Mouse button (touch) config #51 •
Write in TypeScript • Path animation TODOs
• camera-control fills the missing features of official controls. •
Available on NPM and GitHub. • Published under the MIT License. Conclusion
I hope this was useful.
Issues and PRs are welcome
• NPM: https://www.npmjs.com/package/camera-controls • GitHub: https://github.com/yomotsu/camera-controls/
gl.finish(); @yomotsu