Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
A Camera Control Library for three.js
Search
yomotsu
November 20, 2019
1
1.1k
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
three.jsとRapierでレースゲームが3日でできた話
yomotsu
0
340
PBR in three.js
yomotsu
1
800
dialog要素でつくるモーダルダイアログ
yomotsu
0
930
IE to Edge
yomotsu
1
310
Let’s try AR on mobile Web with <model-viewer>
yomotsu
0
520
WebXR: Beyond WebGL
yomotsu
2
1.7k
Non-DOM components with WebGL in Vue.js
yomotsu
5
12k
WebGL Libs for WebApp Frameworks
yomotsu
4
7.8k
How do you show assets loading?
yomotsu
1
970
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
95
5.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
What's in a price? How to price your products and services
michaelherold
243
12k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
790
Faster Mobile Websites
deanohume
304
30k
Building an army of robots
kneath
302
42k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Happy Clients
brianwarren
97
6.7k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Making the Leap to Tech Lead
cromwellryan
132
8.9k
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