├── README.md ├── index.html ├── js └── Detector.js └── screenshot.png /README.md: -------------------------------------------------------------------------------- 1 | # Basic Camera Movement in [three.js](http://threejs.org) (WebGL) 2 | 3 | **Use the drop-down at the top right to switch between tilt, pan, zoom, pedestal, dolly and truck/track.** 4 | 5 | Demo: https://rawgit.com/nselikoff/basic-camera-movement-three-js/master/index.html 6 | 7 | Often times with real-time graphics demos and "creative coding" apps we default to a fixed camera, an orbiting camera, or an interactive Maya-style camera (orbit, pan and zoom or dolly with the mouse). This is a demo of some of the basic camera movements you might learn and use in film. My background is not in film, but I think we can learn a lot from film when we work on our virtual worlds and experiences. 8 | 9 | At the very least, everyone should know the difference between zoom and dolly and the visual difference that makes in-camera :) 10 | 11 | ![Screenshot](/screenshot.png?raw=true) -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Basic Camera Movement : three.js 4 | 29 | 30 | 31 | Fork me on GitHub 32 |
33 | Basic Camera Movement in three.js
34 | Switch between the basic camera movements with the dropdown above right. 35 |
36 |
37 | Side View 38 |
39 |
40 | Top View 41 |
42 |
43 | 44 | 45 | 46 | 256 | 257 | 258 | -------------------------------------------------------------------------------- /js/Detector.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author alteredq / http://alteredqualia.com/ 3 | * @author mr.doob / http://mrdoob.com/ 4 | */ 5 | 6 | var Detector = { 7 | 8 | canvas: !! window.CanvasRenderingContext2D, 9 | webgl: ( function () { try { var canvas = document.createElement( 'canvas' ); return !! ( window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ) ); } catch( e ) { return false; } } )(), 10 | workers: !! window.Worker, 11 | fileapi: window.File && window.FileReader && window.FileList && window.Blob, 12 | 13 | getWebGLErrorMessage: function () { 14 | 15 | var element = document.createElement( 'div' ); 16 | element.id = 'webgl-error-message'; 17 | element.style.fontFamily = 'monospace'; 18 | element.style.fontSize = '13px'; 19 | element.style.fontWeight = 'normal'; 20 | element.style.textAlign = 'center'; 21 | element.style.background = '#fff'; 22 | element.style.color = '#000'; 23 | element.style.padding = '1.5em'; 24 | element.style.width = '400px'; 25 | element.style.margin = '5em auto 0'; 26 | 27 | if ( ! this.webgl ) { 28 | 29 | element.innerHTML = window.WebGLRenderingContext ? [ 30 | 'Your graphics card does not seem to support WebGL.
', 31 | 'Find out how to get it here.' 32 | ].join( '\n' ) : [ 33 | 'Your browser does not seem to support WebGL.
', 34 | 'Find out how to get it here.' 35 | ].join( '\n' ); 36 | 37 | } 38 | 39 | return element; 40 | 41 | }, 42 | 43 | addGetWebGLMessage: function ( parameters ) { 44 | 45 | var parent, id, element; 46 | 47 | parameters = parameters || {}; 48 | 49 | parent = parameters.parent !== undefined ? parameters.parent : document.body; 50 | id = parameters.id !== undefined ? parameters.id : 'oldie'; 51 | 52 | element = Detector.getWebGLErrorMessage(); 53 | element.id = id; 54 | 55 | parent.appendChild( element ); 56 | 57 | } 58 | 59 | }; 60 | 61 | // browserify support 62 | if ( typeof module === 'object' ) { 63 | 64 | module.exports = Detector; 65 | 66 | } 67 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nselikoff/basic-camera-movement-three-js/80e5880bcf48b7c2f9fb744e69eb82eafe7ddc48/screenshot.png --------------------------------------------------------------------------------