diff --git a/TODO.txt b/TODO.txt index c0f0b21..e8f9883 100644 --- a/TODO.txt +++ b/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 once it loads, and display:none the +Set default canvas dimensions to match the size of the image Add a class to the for styling Copy matrix funcs into code Add licenses diff --git a/panorama-viewer.js b/panorama-viewer.js index 7212843..0ff5b76 100644 --- a/panorama-viewer.js +++ b/panorama-viewer.js @@ -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);