title: Add mouse pan on left mouse button on 2D graph created with D3.js fork 3D Force-Directed Graph
body: <p>I try to make a 2D graph by using 3D Force Directed Graph (that is using D3.js, <a href="https://github.com/vasturiano/3d-force-graph" rel="nofollow noreferrer">https://github.com/vasturiano/3d-force-graph</a>) as in this example <a href="https://bl.ocks.org/vasturiano/f59675656258d3f490e9faa40828c0e7" rel="nofollow noreferrer">https://bl.ocks.org/vasturiano/f59675656258d3f490e9faa40828c0e7</a> and i try to make it start as 2D and with the camera rotation disabled. Each user will have the possibility to switch to 3d with the Orbit controlType and with the rotation enabled.</p>
  
  <p>I have tried several ways to make this happen, for example, i have tried to use three.js like this:</p>
  
  <pre><code>Graph.camera().enableRotate = false; // nothing happens
  </code></pre>
  
  <p>or like this:</p>
  
  <pre><code>... .nodeLabel('id').camera().nodeAutoColorBy('group') ... // error
  </code></pre>
  
  <p>I think that the easiest way to solve this would be to use panning on both mouse buttons, that would disable the rotation. I couldn't find any example of how to do that.</p>
  
  <p>Is there any way that i could change the mouse left click function? or is there any example of how can i use three.js .camera() with three.js .enableRotate? or is there any other way to disable rotation on 2D version of the graph?</p>
  
  <p>The complete code that i use is:</p>
  
  <pre><code>    let highlightNodes = [];
      let highlightLink = null;
  
  
  
      const elem = document.getElementById('3d-graph');
      const Graph = ForceGraph3D({controlType:'orbit'})
        (elem)
          //.forceEngine('ngraph')
          .jsonUrl('https://api.codetabs.com/v1/proxy?quest=https://bl.ocks.org/vasturiano/raw/f59675656258d3f490e9faa40828c0e7/.miserables.json')
          .nodeLabel('id')
          .nodeAutoColorBy('group')
          .enableNodeDrag(true)
          .onNodeHover(
              node =&gt; {
                  elem.style.cursor = node ? 'pointer' : null;
                  if ((!node &amp;&amp; !highlightNodes.length) || (highlightNodes.length === 1 &amp;&amp; highlightNodes[0] === node)) return;
                  highlightNodes = node ? [node] : [];
                  updateGeometries();
  
              }
          )
  
          .onNodeClick(
              node =&gt; {
                  // Aim at node from outside it
                  if(Graph.numDimensions() == 3){
                      Graph.cameraPosition(
                          //{ x: node.x - 66, y: node.y - 66, z: node.z - 66 }, // new position
                          { x: Graph.cameraPosition().x /2, y: Graph.cameraPosition().y /2, z: Graph.cameraPosition().z /2}, // new position
                          node, // lookAt ({ x, y, z })
                          2000  // ms transition duration
                      )
                  } else if(Graph.numDimensions() == 2){
                      Graph.cameraPosition(
                          node, //new position
                          node, // lookAt ({ x, y, z })
                          1000  // ms transition duration
                      )
                  }
              }
          )
          .onLinkHover(
              link =&gt; {
                  // no state change
                  if (highlightLink === link) return;
                  highlightLink = link;
                  highlightNodes = link ? [link.source, link.target] : [];
                  updateGeometries();
              }
          )
          //.linkColor('rgba(255,255,255,1)')
          .showNavInfo(false)
          .numDimensions(2)
          //.enableNavigationControls(false)
          .enableNodeDrag(false)
          .nodeColor(node =&gt; highlightNodes.indexOf(node) === -1 ? 'rgba(0,255,255,0.6)' : 'rgb(255,0,0,1)')
          .linkWidth(link =&gt; link === highlightLink ? 4 : 1)
          .linkDirectionalParticles(link =&gt; link === highlightLink ? 4 : 0)
          .linkDirectionalParticleWidth(4)
          /*
          .nodeThreeObject(
              node =&gt; {
                  var map = new THREE.TextureLoader().load( "https://picsum.photos/100/100/?random" );
                  map.minFilter = THREE.LinearFilter;
                  var material = new THREE.SpriteMaterial( { map: map } );
                  var sprite =  new THREE.Sprite( material );
                  sprite.scale.set(22,22,1);
                  return sprite;
              }
          )
          */
          ;
  
      Graph.camera().enableRotate == false;
  
      function updateGeometries() {
          //setTimeout(function(){
              Graph.nodeRelSize(4);
          //}, 500);
      }
  
  
      let numDim = 2;
      const toggleDimensions = function(numDimensions) {
          numDim = numDimensions;
          Graph.numDimensions(numDim);
      };
  
  
  </code></pre>
  
  <p>Thank you.</p>