これらの2つのキューブが同時にドラッグされないようにするにはどうすればよいですか？

Question

以下はドラッグの例です：https://codepen.io/alexcheninfo/pen/vKkgkE。あるキューブを別のキューブの上に置き、そのキューブを前につかんだ場合は、後ろのキューブもドラッグします。これを防ぐためにどのように

<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> 

：

はここで完全なコードですか？ （例えば、正面にある立方体をドラッグできるだけなのですか？）

Answer 1

これは、コントロールを置く場所が原因です。あなたは、1つのレシーバから多数のオブジェクトではなく、複数のレイキャスターから1つのカメラを実行しています。交差しているすべてのものを認識しているレイキャスターが1つあれば（距離によってソートされたオブジェクトが返されます）、その方が簡単です。

• ビルトインraycasterコンポーネントを使用します。私はそれがある構造化する方法をhttp://threejs.org/docs/api/core/Raycaster.html

  。 0.3.0でリリースされようとしているマスターブランチ上のAPIは、改良されたAPIを備えています。 https://aframe.io/docs/master/components/raycaster.html

• レイキャスターコンポーネントに依存するドラッガーコンポーネントがあります。
• draggerコンポーネントは、draggableコンポーネント、draggableクラス、またはdata-draggable属性を持つオブジェクトと交差するだけです。

<a-scene> <a-camera> <a-entity dragger></a-entity> </a-camera> <a-entity draggable></a-entity> </a-scene>

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

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