title: Three.js mousewheel to move camera up/down instead of zoom-in/out
body: <p>How do you do this? I created a scene using the <a href="https://threejs.org/editor/" rel="nofollow noreferrer">Three.js Editor</a> and downloaded the project using the "Publish" option. I edited the app.js file to import OrbitControls, so now I can use the mouse wheel (or in my case the Apple Magic Mouse 2 trackpad surface) to zoom in/out of the scene. However, I don't want the mouse wheel to zoom, I want it to "scroll" (move the camera up/down along the Y-axis as opposed the Z-axis). Is there a way to do that? Is OrbitControls the way to get there or does that just add complexity? Here is my app.js:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {OrbitControls} from './OrbitControls.js'; // Added
  var APP = {
      Player: function ( THREE ) {
          window.THREE = THREE; // FIX for editor scripts (they require THREE in global namespace)
          var loader = new THREE.ObjectLoader();
          var camera, scene, renderer;
          var events = {};
          var dom = document.createElement( 'div' );
          dom.className = "threejs-app";
          this.dom = dom;
          this.width = 500;
          this.height = 500;
          this.load = function ( json ) {
              renderer = new THREE.WebGLRenderer( { antialias: true } );
              renderer.outputEncoding = THREE.sRGBEncoding;
              renderer.setClearColor( 0x000000 );
              renderer.setPixelRatio( window.devicePixelRatio );
              var project = json.project;
              if ( project.shadows ) renderer.shadowMap.enabled = true;
              if ( project.vr ) renderer.xr.enabled = true;
              dom.appendChild( renderer.domElement );
              this.setScene( loader.parse( json.scene ) );
              this.setCamera( loader.parse( json.camera ) );
              var controls = new OrbitControls( camera, renderer.domElement ); // Added
              events = {
                  init: [],
                  start: [],
                  stop: [],
                  keydown: [],
                  keyup: [],
                  mousedown: [],
                  mouseup: [],
                  mousemove: [],
                  touchstart: [],
                  touchend: [],
                  touchmove: [],
                  update: []
              };
              var scriptWrapParams = 'player,renderer,scene,camera';
              var scriptWrapResultObj = {};
              for ( var eventKey in events ) {
                  scriptWrapParams += ',' + eventKey;
                  scriptWrapResultObj[ eventKey ] = eventKey;
              }
              var scriptWrapResult = JSON.stringify( scriptWrapResultObj ).replace( /\"/g, '' );
              for ( var uuid in json.scripts ) {
                  var object = scene.getObjectByProperty( 'uuid', uuid, true );
                  if ( object === undefined ) {
                      console.warn( 'APP.Player: Script without object.', uuid );
                      continue;
                  }
                  var scripts = json.scripts[ uuid ];
                  for ( var i = 0; i &lt; scripts.length; i ++ ) {
                      var script = scripts[ i ];
                      var functions = ( new Function( scriptWrapParams, script.source + '\nreturn ' + scriptWrapResult + ';' ).bind( object ) )( this, renderer, scene, camera );
                      for ( var name in functions ) {
                          if ( functions[ name ] === undefined ) continue;
                          if ( events[ name ] === undefined ) {
                              console.warn( 'APP.Player: Event type not supported (', name, ')' );
                              continue;
                          }
                          events[ name ].push( functions[ name ].bind( object ) );
                      }
                  }
              }
              dispatch( events.init, arguments );
          };
          this.setCamera = function ( value ) {
              camera = value;
              camera.aspect = this.width / this.height;
              camera.updateProjectionMatrix();
          };
          this.setScene = function ( value ) {
              scene = value;
          };
          this.setSize = function ( width, height ) {
              this.width = width;
              this.height = height;
              if ( camera ) {
                  camera.aspect = this.width / this.height;
                  camera.updateProjectionMatrix();
              }
              if ( renderer ) {
                  renderer.setSize( width, height );
              }
          };
          function dispatch( array, event ) {
              for ( var i = 0, l = array.length; i &lt; l; i ++ ) {
                  array[ i ]( event );
              }
          }
          var time, prevTime;
          function animate() {
              time = performance.now();
              try {
                  dispatch( events.update, { time: time, delta: time - prevTime } );
              } catch ( e ) {
                  console.error( ( e.message || e ), ( e.stack || "" ) );
              }
              renderer.render( scene, camera );
              prevTime = time;
          }
          this.play = function () {
              prevTime = performance.now();
              document.addEventListener( 'keydown', onDocumentKeyDown );
              document.addEventListener( 'keyup', onDocumentKeyUp );
              document.addEventListener( 'mousedown', onDocumentMouseDown );
              document.addEventListener( 'mouseup', onDocumentMouseUp );
              document.addEventListener( 'mousemove', onDocumentMouseMove );
              document.addEventListener( 'touchstart', onDocumentTouchStart );
              document.addEventListener( 'touchend', onDocumentTouchEnd );
              document.addEventListener( 'touchmove', onDocumentTouchMove );
              dispatch( events.start, arguments );
              renderer.setAnimationLoop( animate );
          };
          this.stop = function () {
              document.removeEventListener( 'keydown', onDocumentKeyDown );
              document.removeEventListener( 'keyup', onDocumentKeyUp );
              document.removeEventListener( 'mousedown', onDocumentMouseDown );
              document.removeEventListener( 'mouseup', onDocumentMouseUp );
              document.removeEventListener( 'mousemove', onDocumentMouseMove );
              document.removeEventListener( 'touchstart', onDocumentTouchStart );
              document.removeEventListener( 'touchend', onDocumentTouchEnd );
              document.removeEventListener( 'touchmove', onDocumentTouchMove );
              dispatch( events.stop, arguments );
              renderer.setAnimationLoop( null );
          };
          this.dispose = function () {
              while ( dom.children.length ) {
                  dom.removeChild( dom.firstChild );
              }
              renderer.dispose();
              camera = undefined;
              scene = undefined;
              renderer = undefined;
          };
          //
          function onDocumentKeyDown( event ) {
              dispatch( events.keydown, event );
          }
          function onDocumentKeyUp( event ) {
              dispatch( events.keyup, event );
          }
          function onDocumentMouseDown( event ) {
              dispatch( events.mousedown, event );
          }
          function onDocumentMouseUp( event ) {
              dispatch( events.mouseup, event );
          }
          function onDocumentMouseMove( event ) {
              dispatch( events.mousemove, event );
          }
          function onDocumentTouchStart( event ) {
              dispatch( events.touchstart, event );
          }
          function onDocumentTouchEnd( event ) {
              dispatch( events.touchend, event );
          }
          function onDocumentTouchMove( event ) {
              dispatch( events.touchmove, event );
          }
      }
  };
  export { APP };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>