How to use both OrbitControls and canvas mousedown

Questions
1

In my application I want to use OrbitControls to rotate and dolly, although with the mouseButtons changed so as to leave left mousedown free.

Left mousedown I want to eventually use for selecting objects in the scene.

Problem is that once I create an OrbitControls, even though I’m leaving the left mouse button unused, the canvas event listener is never called.

<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>orbit-and-onclick-01</title>

  <script type='module'>

    import * as THREE       from '../lib/three-js-129/build/three.module.js';
    import {OrbitControls}  from '../lib/three-js-129/examples/jsm/controls/OrbitControls.js';

    let canvas, camera, renderer, scene; 

    function initLight(){
      const light = new THREE.DirectionalLight(0xFFFFFF, 1);
      light.position.set(-1, 2, 4);
      scene.add(light);
    }

    function initCamera(){
			camera = new THREE.PerspectiveCamera( 45, 2, 0.1, 100 );
			camera.position.set( 0, 0, 8 );
    }

    function render(){
      renderer.render(scene, camera);
      requestAnimationFrame(render);
    }

    function addTorus(scene){
			const torusGeometry = new THREE.TorusGeometry( 1, 0.3, 16, 100 );
			const torusMaterial = new THREE.MeshPhongMaterial( { color: 0xffaaff } );
			const torus = new THREE.Mesh( torusGeometry, torusMaterial );
			torus.receiveShadow = true;
			torus.castShadow = true;
			scene.add( torus );
    }

    function doMouseDown(){
      console.log('mouse down');
    }

    window.onload = function(){   
      canvas = document.getElementById('canvasId');
      scene = new THREE.Scene();
			renderer = new THREE.WebGLRenderer({canvas: canvas});
      initLight();
      initCamera();
      new OrbitControls(camera, canvas).mouseButtons = {
	      MIDDLE: THREE.MOUSE.DOLLY,
	      RIGHT: THREE.MOUSE.ROTATE
      }
      canvas.addEventListener('mousedown', doMouseDown);
      addTorus(scene);
      requestAnimationFrame(render);
    }

  </script>
</head>
<body>
  <canvas id='canvasId'></canvas>
</body>
</html>

Is there a way of getting getting OrbitControls to pass an unused mouse event through to the canvas doMouseDown event handler?

Or some other way of accomplishing this?

https://mytestpages.com/three/orbit-and-onclick-01.html

2

This is a know issue and should be solved with the next release r130. More information here:

2 Likes
3

Thanks.

Until r130 is ready, using your updated OrbitControls.js in my code does what I need:

https://mytestpages.com/three/orbit-and-onclick-03.html