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.2k
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
520
PBR in three.js
yomotsu
1
880
dialog要素でつくるモーダルダイアログ
yomotsu
0
990
IE to Edge
yomotsu
1
340
Let’s try AR on mobile Web with <model-viewer>
yomotsu
0
540
WebXR: Beyond WebGL
yomotsu
2
1.8k
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
990
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Statistics for Hackers
jakevdp
798
220k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
13
1.4k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Building Applications with DynamoDB
mza
94
6.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
StorybookのUI Testing Handbookを読んだ
zakiyama
29
5.7k
GitHub's CSS Performance
jonrohan
1030
460k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
178
53k
Agile that works and the tools we love
rasmusluckow
328
21k
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