TrackballCamera Zoom in/out with mousewheel

Some people might find this useful : catching the mousewheel event to zoom in and out of pane. I do anyway, thought it could be interesting feature to add to the TrackballCamera.

(I’m a total noob at github, sorry if this is out of context…)

Here’s a basic implementation I’ve used :

  // need both for FF and Webkit - others I haven't tested
  window.addEventListener('DOMMouseScroll', mousewheel, false);
  window.addEventListener('mousewheel', mousewheel, false);

  function mousewheel( event )
  {
      var amount = 100; // parameter

      // get wheel direction 
       var d = ((typeof e.wheelDelta != "undefined")?(-e.wheelDelta):e.detail);
        d = 100 * ((d>0)?1:-1);

        // do calculations, I'm not using any three.js internal methods here, maybe there is a better way of doing this
        // applies movement in the direction of (0,0,0), assuming this is where the camera is pointing
        var cPos = camera.position;
        var r = cPos.x*cPos.x + cPos.y*cPos.y;
        var sqr = Math.sqrt(r);
        var sqrZ = Math.sqrt(cPos.z*cPos.z + r);

        var nx = cPos.x + ((r==0)?0:(d * cPos.x/sqr));
        var ny = cPos.y + ((r==0)?0:(d * cPos.y/sqr));
        var nz = cPos.z + ((sqrZ==0)?0:(d * cPos.z/sqrZ));

        // verify we're applying valid numbers
        if (isNaN(nx) || isNaN(ny) || isNaN(nz))
          return;

        cPos.x = nx;
        cPos.y = ny;
        cPos.z = nz;
  }

[Mugen87]

@klonsemann Please don’t request help at closed issues and github in general. Use the forum instead. Thanks.

[poudro]

Thanks for pointing that out, I just editted the comment.

An yes, it is in fact just moving the camera in/out (I’d always assumed that was a zoom 😃. For a proper zoom, you might look into mrdoob’s comment using the projectionMatrix.