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
Scaling GitHub
holman
459
140k
Unsuck your backbone
ammeep
670
57k
Building Applications with DynamoDB
mza
94
6.3k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Code Review Best Practice
trishagee
67
18k
GraphQLの誤解/rethinking-graphql
sonatard
71
10k
How to Think Like a Performance Engineer
csswizardry
23
1.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
How to train your dragon (web standard)
notwaldorf
90
6k
Optimising Largest Contentful Paint
csswizardry
36
3.2k
Done Done
chrislema
183
16k
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