get-ray-from-mouse
v1.0.0
Published
Get the normalized ray that your mouse is projecting into your scene
Downloads
23
Maintainers
Readme
get-ray-from-mouse
Get the normalized ray that your mouse is projecting into your scene
Background / Initial Motivation
I've had this code sitting in a project for over a year but wanted to use it in a tutorial that I'm working on so pulled it out.
To Install
$ npm install --save get-ray-from-mouse
Usage
// Create a view matrix that is looking straight down
// from above
var camera = mat4.create()
mat4.translate(camera, camera, [0, 0, -10])
mat4.rotateX(camera, camera, -Math.PI / 2)
var viewMatrix = []
mat4.invert(viewMatrix, camera)
var opts = {
view: viewMatrix,
perspective: mat4.perspective([], Math.PI / 3, 1, 0.1, 100),
width: 100,
height: 100,
x: 50,
y: 50
}
var ray = []
getRay(ray, opts)
console.log(ray)
// [0, -1, 0]
API
getRay(normalizedWorldSpaceRay, options)
-> normalizedWorldSpaceRay
normalizedWorldSpaceRay
Type: `Array[3]
You provide an array and get-ray-from-mouse
will set the [0], [1], [2]
elements of your array to your
normalized world space ray that your mouse casts.
options
var options = {
view: viewMatrix,
perspective: mat4.perspective([], Math.PI / 3, 1, 0.1, 100),
width: 100,
height: 100,
x: 50,
y: 50
}
options.view
Type: Array[16]
Your view matrix
options.perspective
Type: Array[16]
Your perspective matrix
options.width
Type: Number
The width of your canvas
options.height
Type: Number
The height of your canvas
options.x
Type: Number
The x position of your mouse in your canvas. Available through offsetX
of your mouse events
options.y
Type: Array[16]
The y position of your mouse in your canvas. Available through offsetY
of your mouse events
The top of your canvas is y = 0
, the bottom is y = height
TODO:
- [ ] benchmark
References
License
MIT