Javascript Three.js Three.interaction Three.TransformControl

我的项目有问题。 我使用three.interaction在一些对象上获取click事件，并将TransformControl添加到这些对象中

问题在于：变换控件会阻止其他对象中的单击事件，我认为这是因为它会阻止光线投射

一些解决方案

var camera, scene, renderer;
var geometry, material, mesh;

var transformControls;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 1;

    scene = new THREE.Scene();

    geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
    material = new THREE.MeshNormalMaterial();





    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    const interaction = new THREE.Interaction(renderer, scene, camera);

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    mesh.on('click', function (ev) {
        click(ev);
    });

     mesh1 = new THREE.Mesh( geometry, material );
    scene.add( mesh1 );
    mesh1.position.set(0.3, 0, 0);

    mesh1.on('click', function (ev) {
        click(ev);
    });



}

function animate() {

    requestAnimationFrame( animate );

    renderer.render( scene, camera );

}

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


function click(ev){

console.log("click");

    var transformControls = scene.getObjectByName("transformControls", true);
  var objControlled = scene.getObjectByName("objControlled", true);

  if (transformControls === undefined || transformControls === null) {
    transformControls = new THREE.TransformControls(camera, renderer.domElement);
    transformControls.addEventListener('change', render);
    transformControls.name = "transformControls";

    scene.add(transformControls);

  }

  if (objControlled === undefined || objControlled === null) {

    try {
      transformControls.attach(ev.data.target);
      ev.data.target.name = "objControlled";
    }
    catch (err) {
      console.log(err);
    }

  }
  else {

    try {
      transformControls.detach(objControlled);
      objControlled.name = "oldControlled";

      transformControls.attach(ev.data.target);
      ev.data.target.name = "objControlled";
    }
    catch (err) {
      console.log(err);
    }
  }
}

---

js fiddle:

您不需要

3.交互

扩展来获得想要的行为

将eventlisteners绑定到画布并自己管理raycast可以轻松获得结果。我可能会说，它甚至比使用上述扩展更容易

这样，您就可以控制希望光线投射检查交点的对象

---

将对象添加到组实例，以限制要对其进行光线投射的对象

mesh = new THREE.Mesh( geometry, material );
mesh1 = new THREE.Mesh( geometry, material );

group = new THREE.Group();
group.add( mesh, mesh1 );
scene.add( group );

只需将一个

mousedown

事件绑定到画布元素，并在函数回调中继续对组进行光线投射，如果对象尚未附加控件，则将其附加到对象

// on initialization
renderer.domElement.addEventListener( 'mousedown', clickEvent );

// inside mousedown callback
var intersects = raycaster.intersectObject( group, true );

if ( intersects.length > 0 ) {
    let object = intersects[0].object;

    if ( control.object === undefined || control.object !== object ) {
        control.attach( object );
        render();
    }
}