title: Three.js - Pan camera along X axis on scroll (smoothly)
body: <p><strong>The Problem</strong></p>
  
  <p>I would like to achieve a panning animation like the one found on <a href="http://playdoh-lagaleriedesespeces.com/en/" rel="nofollow noreferrer">this site</a> when you scroll using the mousewheel, i.e. limiting the panning of the camera to the X axis only and making the panning work on scrolling. I would also like this to be smooth/animated like in the linked example.</p>
  
  <p><strong>Ideas</strong></p>
  
  <ol>
  <li><p>My first idea is to use the Three.js OrbitControls as they already
  contain a panning feature. I would have thought that I would change
  the controls of the panning from Right Mouse Button to Middle Mouse
  Button, and then limit the plane in which the panning works (X
  Axis).</p>
  
  <p>I found the following code (from the <a href="https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrbitControls.js" rel="nofollow noreferrer">source code</a> of the
  OrbitControls):</p>
  
  <pre><code>controls.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: 
  THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT };
  </code></pre>
  
  <p>And tried changing it to the following inside my script file.</p>
  
  <pre><code>controls.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: 
  THREE.MOUSE.RIGHT, PAN: THREE.MOUSE.MIDDLE };
  </code></pre>
  
  <p>But that did not work.</p></li>
  <li>My second idea would be to detect the scroll event using JQuery, and
  then move the actual camera along the X axis when the user scrolls.
  I have not tried this yet as I feel using OrbitControls is the
  correct way to achieve the effect I want, as I know that the example
  site I provided have OrbitControls enabled. I could obviously be
  wrong though.</li>
  </ol>
  
  <p><strong>What I am looking for</strong></p>
  
  <ul>
  <li><p>Decision on the correct way to achieve the effect I am looking for</p></li>
  <li><p>Example code of how to achieve this effect</p></li>
  </ul>
  
  <p>Thank you!</p>