├── LICENSE.md ├── README.md ├── index.js └── package.json /LICENSE.md: -------------------------------------------------------------------------------- 1 | This software is released under the MIT license: 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of 4 | this software and associated documentation files (the "Software"), to deal in 5 | the Software without restriction, including without limitation the rights to 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 7 | the Software, and to permit persons to whom the Software is furnished to do so, 8 | subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 15 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 16 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 17 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 18 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 19 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # canvas-orbit-camera [![experimental](http://badges.github.io/stability-badges/dist/experimental.svg)](http://github.com/badges/stability-badges) 2 | 3 | An alternative wrapper for 4 | [orbit-camera](http://github.com/mikolalysenko/orbit-camera) that works 5 | independently of [game-shell](http://github.com/mikolalysenko/game-shell). 6 | 7 | Controls are as follows: 8 | 9 | * Rotate - Left click 10 | * Pan - Right click or Control + Left click 11 | * Zoom - Scroll or Shift + Left click 12 | 13 | Based heavily on 14 | [game-shell-orbit-camera](http://github.com/mikolalysenko/game-shell-orbit-camera). 15 | 16 | ## Usage 17 | 18 | [![NPM](https://nodei.co/npm/canvas-orbit-camera.png)](https://nodei.co/npm/canvas-orbit-camera/) 19 | 20 | ### camera = createCamera(canvas[, options]) 21 | 22 | Attaches a modified `orbit-camera` instance to the `canvas` – attaching the 23 | required event listeners for interaction. 24 | 25 | The following options are available: 26 | 27 | * `rotate`: disable rotation interactions by passing `false`. 28 | * `scale`: disable scaling interactions by passing `false`. 29 | * `pan`: disable panning interactions by passing `false`. 30 | 31 | See the [orbit-camera documentation](https://github.com/mikolalysenko/orbit-camera#readme) 32 | for a full list of available methods. 33 | 34 | ### camera.tick() 35 | 36 | Call this at the beginning of each frame to update the current position of the 37 | camera. 38 | 39 | ### camera.view([out]) 40 | 41 | Returns the current view matrix associated by the camera: a 16-element (4x4) 42 | `Float32Array` instance. Optionally, you can pass in your own array `out` here 43 | too. 44 | 45 | ## Example 46 | 47 | ``` javascript 48 | var canvas = document.body.appendChild(document.createElement('canvas')) 49 | var createCamera = require('canvas-orbit-camera') 50 | var raf = require('raf') 51 | 52 | var camera = createCamera(canvas) 53 | 54 | update() 55 | function update() { 56 | raf(update) 57 | 58 | // Returns your view matrix for you 59 | var view = camera.view() 60 | 61 | camera.tick() 62 | } 63 | ``` 64 | 65 | ## License 66 | 67 | MIT. See [LICENSE.md](http://github.com/hughsk/canvas-orbit-camera/blob/master/LICENSE.md) for details. 68 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var createCamera = require('orbit-camera') 2 | var createScroll = require('scroll-speed') 3 | var mp = require('mouse-position') 4 | var mb = require('mouse-pressed') 5 | var key = require('key-pressed') 6 | 7 | var panSpeed = 1 8 | 9 | module.exports = attachCamera 10 | 11 | function attachCamera(canvas, opts) { 12 | opts = opts || {} 13 | opts.pan = opts.pan !== false 14 | opts.scale = opts.scale !== false 15 | opts.rotate = opts.rotate !== false 16 | 17 | var scroll = createScroll(canvas, opts.scale) 18 | var mbut = mb(canvas, opts.rotate) 19 | var mpos = mp(canvas) 20 | var camera = createCamera( 21 | [0, 10, 30] 22 | , [0, 0, 0] 23 | , [0, 1, 0] 24 | ) 25 | 26 | camera.tick = tick 27 | 28 | return camera 29 | 30 | function tick() { 31 | var ctrl = key('') || key('') 32 | var alt = key('') 33 | var height = canvas.height 34 | var width = canvas.width 35 | 36 | if (opts.rotate && mbut.left && !ctrl && !alt) { 37 | camera.rotate( 38 | [ mpos.x / width - 0.5, mpos.y / height - 0.5 ] 39 | , [ mpos.prevX / width - 0.5, mpos.prevY / height - 0.5 ] 40 | ) 41 | } 42 | 43 | if (opts.pan && mbut.right || (mbut.left && ctrl && !alt)) { 44 | camera.pan([ 45 | panSpeed * (mpos.x - mpos.prevX) / width 46 | , panSpeed * (mpos.y - mpos.prevY) / height 47 | ]) 48 | } 49 | 50 | if (opts.scale && scroll[1]) { 51 | camera.distance *= Math.exp(scroll[1] / height) 52 | } 53 | 54 | if (opts.scale && (mbut.middle || (mbut.left && !ctrl && alt))) { 55 | var d = mpos.y - mpos.prevY 56 | if (!d) return; 57 | 58 | camera.distance *= Math.exp(d / height) 59 | } 60 | 61 | scroll.flush() 62 | mpos.flush() 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "canvas-orbit-camera", 3 | "version": "1.0.2", 4 | "description": "An alternative wrapper for orbit-camera that works independently of game-shell.", 5 | "main": "index.js", 6 | "scripts": {}, 7 | "repository": { 8 | "type": "git", 9 | "url": "git://github.com/hughsk/canvas-orbit-camera.git" 10 | }, 11 | "author": "Hugh Kennedy (http://hughsk.io/)", 12 | "license": "MIT", 13 | "bugs": { 14 | "url": "https://github.com/hughsk/canvas-orbit-camera/issues" 15 | }, 16 | "homepage": "https://github.com/hughsk/canvas-orbit-camera", 17 | "dependencies": { 18 | "key-pressed": "0.0.1", 19 | "mouse-position": "^1.0.0", 20 | "mouse-pressed": "0.0.1", 21 | "orbit-camera": "0.0.3", 22 | "scroll-speed": "^1.0.0" 23 | }, 24 | "devDependencies": {}, 25 | "keywords": [ 26 | "canvas", 27 | "orbit", 28 | "camera", 29 | "webgl", 30 | "3d", 31 | "arcball", 32 | "rotation" 33 | ] 34 | } 35 | --------------------------------------------------------------------------------