8

Object3D（要素をグループ化するため）にいくつかのオブジェクトを追加し、そのクリックを検出しようとしています。私のシーンのサイズは600x400、カメラは3つのオブジェクト内にあり、イベントハンドラーコードは次のようになります。

function onDocumentMouseDown( event ) {
   event.preventDefault();

   var mouse = {};
   mouse.x = ( event.clientX / 600 ) * 2 - 1;
   mouse.y = - ( event.clientY / 400 ) * 2 + 1;

   var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
   projector.unprojectVector( vector, three.camera );

   var ray = new THREE.Ray( three.camera.position, vector.subSelf( three.camera.position ).normalize() );

   var intersects = ray.intersectObjects( group.children );
   alert(intersects.length);
   [...]
}

実際、交差するオブジェクトの数を警告しています。しかし、それはゼロのままです。交差するオブジェクトが見つかりませんでした。投影ベクトルのx、y、zの値を少し試しましたが、成功しませんでした。

jsfiddleでこの問題を示すために、簡略化されたサンプルを追加しました。たぶん誰かが私に短いヒントを持っているのでしょうか？

4

2 に答える 2

6

あなたのフィドルでTHREE.SceneUtils.createMultiMaterialObject( )は、階層構造を作成する を呼び出しているため、再帰フラグを に追加する必要がありますray.intersectObjects()。

var intersects = ray.intersectObjects( group.children, true );

EDiT:rayはTHREE.Raycaster-- notのインスタンスになりましたTHREE.Ray。

three.js r.58

于 2012-09-04T13:10:58.947 に答える
2

私は同じ問題を抱えていました.WestLangleyの答えが答えを提供します. よくやった！Object3D ラッパーにグループ化されたオブジェクトのマウス選択にも苦労している人のために、私は独自のソリューションを投稿しています。

まず、選択可能なオブジェクトの配列を作成しました。RayCaster はシーン内のすべてのオブジェクトを検索する必要はなく、選択に応答したいオブジェクトのみを検索する必要があるため、これによりパフォーマンスがいくらか節約されることを願っています。また、この配列をシーン オブジェクトに直接アタッチしました (アプリのほとんどの部分から既にアクセスできるという事実のためだけに)。

scene.selectable = [];

次のステップは、選択可能にしたいすべてのオブジェクトをこの配列にプッシュすることです。グループ全体ではなく、グループからメッシュ/スプライト/などのみを挿入します。ここでは最後の行だけが重要です:

var myWrapper = new THREE.Object3D();
var myObject = new THREE.Mesh( something );
myWrapper.add( myObject );
scene.add ( myWrapper );
scene.selectable.push( myObject );

最後に、マウス選択ルーチンで次のように raycaster を呼び出します。

var intersects = ray.intersectObjects( scene.selectable );
于 2014-01-15T19:34:37.277 に答える