Zoom with mouse wheel
This commit is contained in:
parent
4253477a93
commit
8ed3a93fbb
6
TODO.txt
6
TODO.txt
@ -1,11 +1,15 @@
|
||||
Try replacing UV mapping with shader sampling based on view direction
|
||||
Make the panning match the cursor
|
||||
Allow zooming with scroll wheel
|
||||
Enforce a minimum zoom that will keep the edges of the sphere from showing
|
||||
This probably just needs simple math with the aspect and/or the viewport's diagonal length.
|
||||
Enforce a maximum zoom that matches the pixel density of the original image at its natural dimensions, normal to the camera
|
||||
Choose a pleasant initial zoom
|
||||
Allow pinch-zooming
|
||||
Add data- attribute for minimum zoom
|
||||
Add data- attribute for starting angle
|
||||
Add data- attributes for canvas dimensions
|
||||
Automatically create canvas for each marked <img> once it loads, and display:none the <img>
|
||||
Set default canvas dimensions to match the size of the image
|
||||
Add a class to the <canvas> for styling
|
||||
Copy matrix funcs into code
|
||||
Add licenses
|
||||
|
@ -182,6 +182,14 @@
|
||||
viewer.addEventListener("mouseover", runPanState);
|
||||
viewer.addEventListener("mousemove", runPanState);
|
||||
|
||||
const minZoom = 1;
|
||||
let zoom = 3;
|
||||
viewer.addEventListener("wheel", (evt) => {
|
||||
console.log(evt.deltaY);
|
||||
zoom = Math.max(zoom + evt.deltaY * 0.75, minZoom);
|
||||
evt.preventDefault();
|
||||
});
|
||||
|
||||
gl.useProgram(program);
|
||||
const cylinder = makeCylinder(24, 24);
|
||||
|
||||
@ -212,7 +220,6 @@
|
||||
gl.uniformMatrix4fv(modelMatrixLocation, false, modelMatrix);
|
||||
|
||||
const aspect = gl.drawingBufferWidth / gl.drawingBufferHeight;
|
||||
const zoom = 4;
|
||||
const projectionMatrix = mat4.ortho(mat4.create(), -aspect / zoom, aspect / zoom, -1 / zoom, 1 / zoom, -1, 1);
|
||||
gl.uniformMatrix4fv(projectionMatrixLocation, false, projectionMatrix);
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user