Javascript 如何防止这两个立方体同时被拖动？

以下是一个拖动示例：。如果将一个立方体放在另一个立方体上，然后抓住前面的立方体，则后面的立方体也会被拖动

以下是完整的代码：

<script>
  AFRAME.registerComponent('draggable', {
    init() {
      this.mouse = new THREE.Vector2();
      this.scene = this.el.sceneEl;
      this.camera = this.scene.camera;
      this.obj = this.el.object3D;

      this.scene.addEventListener('mousemove', e => {
        this.mouse.x = (e.offsetX / this.scene.canvas.offsetWidth) * 2 - 1;
        this.mouse.y = -(e.offsetY / this.scene.canvas.offsetHeight) * 2 + 1;

        if (this.selected) {
          let r = new THREE.Raycaster();
          r.setFromCamera(this.mouse, this.camera);
          let dist = this.obj.position.distanceTo(this.camera.position);
          let point = r.ray.direction.multiplyScalar(dist);
          this.el.setAttribute('position', `${point.x} ${point.y} ${point.z}`);
        }
      });

      this.scene.addEventListener('mousedown', e => {
        let r = new THREE.Raycaster();
        r.setFromCamera(this.mouse, this.camera);
        let intersected = r.intersectObject(this.el.object3D, true);
        let objPos = this.el.object3D.position;
        let camPos = this.camera.position;
        console.log(objPos.distanceTo(camPos));
        if (intersected.length) this.selected = true;
      });

      this.scene.addEventListener('mouseup', e => {
        this.selected = undefined;
      });
    }
  });
</script>

<a-scene>
  <a-entity camera look-controls></a-entity>
  <a-sky src="https://raw.githubusercontent.com/aframevr/aframe/master/examples/boilerplate/panorama/puydesancy.jpg"></a-sky>
  <a-box color="tomato" position="-3 0 -10" draggable></a-box>
  <a-box draggable position="3 0 -5" draggable></a-box>
</a-scene>

AFRAME.registerComponent（'draggable'{
init（）{
this.mouse=new THREE.Vector2（）；
this.scene=this.el.sceneEl；
this.camera=this.scene.camera；
this.obj=this.el.object3D；
this.scene.addEventListener（'mousemove'，e=>{
this.mouse.x=（e.offsetX/this.scene.canvas.offsetWidth）*2-1；
this.mouse.y=-（e.offsetY/this.scene.canvas.offsetHeight）*2+1；
如果（选择此选项）{
设r=new-THREE.Raycaster（）；
r、 setFromCamera（this.mouse，this.camera）；
设dist=this.obj.position.distanceTo（this.camera.position）；
设点=r射线方向多重刻度（距离）；
setAttribute（'position'，`${point.x}${point.y}${point.z}`）；
}
});
this.scene.addEventListener（'mousedown'，e=>{
设r=new-THREE.Raycaster（）；
r、 setFromCamera（this.mouse，this.camera）；
设intersected=r.intersectObject（this.el.object3D，true）；
让objPos=this.el.object3D.position；
让camPos=this.camera.position；
console.log（objPos.distanceTo（camPos））；
如果（intersected.length）this.selected=true；
});
this.scene.addEventListener（'mouseup'，e=>{
this.selected=未定义；
});
}
});

---

如何预防？（例如，只能在前面拖动立方体？

这是因为您将控件放置在何处。您正在对一个摄影机执行多个光线投射，而不是对多个对象执行一个光线投射。如果您有一个光线投射器，它可以知道它所相交的所有对象（并且它将返回按距离排序的对象），则会更容易

我将如何构建它：

• 使用内置的光线投射器组件。主分支上即将发布的0.3.0版本有一个改进的API
• 具有依赖于光线投射器组件的拖动器组件
• 让dragger组件仅与具有

  DragTable

  组件、

  DragTable

  类或

  data DragTable

  属性的对象相交

---

这是因为你把控件放在哪里了。您正在对一个摄影机执行多个光线投射，而不是对多个对象执行一个光线投射。如果您有一个光线投射器，它可以知道它所相交的所有对象（并且它将返回按距离排序的对象），则会更容易

我将如何构建它：

• 使用内置的光线投射器组件。主分支上即将发布的0.3.0版本有一个改进的API
• 具有依赖于光线投射器组件的拖动器组件
• 让dragger组件仅与具有

  DragTable

  组件、

  DragTable

  类或

  data DragTable

  属性的对象相交

AFRAME.registerComponent('dragger', {
  init: function () {
    // Configure raycaster.
    this.el.setAttribute('raycaster', {
      objects: '[draggable]',
      // ...
    });
  },

  tick: function () {
    // Use this.el.components.raycaster.intersectedEls
  }
});