Raycasterメンバーへのアクセス

Question

私のシーンでは、スクリプトを使用してレイキャスターコンポーネントを持つエンティティを作成しています。これはうまく動作し、イベントのリスナーは、私の地面のオブジェクトと衝突して正常に動作しています。しかし、私の地面は不均一で、レイキャスターが当たる地面の高さを知る必要があります。私が知る限り、これはA-Frameが提供するものだけでは不可能です。私はTHREEのraycaster.intersectObjectを呼びたいと思いますが、私はTHREE raycasterへの作業参照を取得することができません。 A-Frameのドキュメントには、raycasterというメンバーが記載されていますが、私にとっては未定義です。私はいくつかの異なることを試しましたが、無駄です。私の次の計画は新しいコンポーネントを作ることでしたが、私はまずここで質問したいと思いました。

var ray = document.createElement('a-entity'); 
ray.setAttribute('id', 'raycaster'); 
ray.setAttribute('raycaster', 'objects: #ground'); 
ray.setAttribute('position', pos); 
ray.setAttribute('rotation', '-90 0 0'); 
scene.appendChild(ray); 

var ground = document.querySelector('#ground'); 

ray.addEventListener('raycaster-intersection', function() { 
    console.log(ray.raycaster);   //undefined 
    console.log(ray.intersectedEls); //undefined 
    console.log(ray.objects);   //undefined 
    console.log(ray.object3D.id);  //gives me the THREE id 
    console.log(ray.object3D.intersectObject(ground.object3D, false)); //intersectObject not a function 
}); 

手がかりはありますか？私は何か愚かなことをやっていると確信しています。

Answer 1

これは、あなたが掘り下げなければならないコンポーネントのメンバーです。

ray.components.raycaster.raycaster

• ray - エンティティ
• .components - エンティティのコンポーネント
• .raycaster
- raycaster成分
• .raycaster - raycaster部品の部材としてraycasterオブジェクト

Answer 2

ここに誰かが興味がある場合のための完全なコンポーネント。あなたのエンティティに "set-to-ground"を追加するだけです。オブジェクトを地面に立たせたい場合は、それらをエンティティに子として追加し、相対的なy位置をオブジェクトの高さの半分に設定することができます。

、現在地上にid「地面」であることが必要であるものの、まだ「ターゲット」セレクタで強化されるべき

 AFRAME.registerComponent('set-to-ground', { 
      schema: { 
       type: 'string' 
      }, 
      init: function() { 
       var data = this.data; 
       var el = this.el; 
       var scene = document.getElementById('ascene'); 
       var ray = document.createElement('a-entity'); 
       ray.setAttribute('id', 'raycaster'); 
       ray.setAttribute('raycaster', 'objects: #ground'); 
       ray.setAttribute('rotation', '-90 0 0'); 
       el.appendChild(ray); 

       var ground = document.querySelector('#ground'); 

       ray.addEventListener('raycaster-intersection', function getY() { 
        console.log(ray.components.raycaster.raycaster.intersectObject(ground.object3D, true)[0].point.y); //groundPos to log 
        var groundPos = ray.components.raycaster.raycaster.intersectObject(ground.object3D, true)[0].point.y; 
        ray.removeEventListener('raycaster-intersection', getY); 
        el.setAttribute('position', {y: groundPos}); 
       }); 

      } 
     });