b/panorama-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Zoom with mouse wheel

Browse Source
This commit is contained in:
Brandon Dyck 2022-10-24 11:38:30 -06:00
parent 4253477a93
commit 8ed3a93fbb
2 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
TODO.txt
View File

@ -1,11 +1,15 @@
Try replacing UV mapping with shader sampling based on view direction
Make the panning match the cursor 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 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. 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 Choose a pleasant initial zoom
Allow pinch-zooming
Add data- attribute for minimum zoom Add data- attribute for minimum zoom
Add data- attribute for starting angle 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> 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 Add a class to the <canvas> for styling
Copy matrix funcs into code Copy matrix funcs into code
Add licenses Add licenses

9
panorama-viewer.js
View File

@ -182,6 +182,14 @@
viewer.addEventListener("mouseover", runPanState); viewer.addEventListener("mouseover", runPanState);
viewer.addEventListener("mousemove", 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); gl.useProgram(program);
const cylinder = makeCylinder(24, 24); const cylinder = makeCylinder(24, 24);
@ -212,7 +220,6 @@
gl.uniformMatrix4fv(modelMatrixLocation, false, modelMatrix); gl.uniformMatrix4fv(modelMatrixLocation, false, modelMatrix);
const aspect = gl.drawingBufferWidth / gl.drawingBufferHeight; 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); const projectionMatrix = mat4.ortho(mat4.create(), -aspect / zoom, aspect / zoom, -1 / zoom, 1 / zoom, -1, 1);
gl.uniformMatrix4fv(projectionMatrixLocation, false, projectionMatrix); gl.uniformMatrix4fv(projectionMatrixLocation, false, projectionMatrix);