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
470
PBR in three.js
yomotsu
1
850
dialog要素でつくるモーダルダイアログ
yomotsu
0
970
IE to Edge
yomotsu
1
330
Let’s try AR on mobile Web with <model-viewer>
yomotsu
0
530
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
980
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
380
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Docker and Python
trallard
44
3.3k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Navigating Team Friction
lara
183
15k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
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