Object3D内の交差点

Question

オブジェクトをグループ化するためにObject3Dにいくつかのオブジェクトを追加しましたが、その上でクリックを検出しようとしています。 私のシーンが600x400の大きさを持って、私のカメラは、三オブジェクト内にあり、私のイベントハンドラのコードは以下のようになります。

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でこの問題を示すためにサンプルを削除しました。たぶん、誰かが私に短いヒントを持っているかもしれません。

Answer 1

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

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

編集： - ないTHREE.Rayrayは今THREE.Raycasterのインスタンスです。

three.js

Answer 2

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

最初に、選択可能なオブジェクトの配列を作成しました。これはRayCasterがシーン内のすべてのオブジェクトを検索する必要はなく、選択に応答したいオブジェクトのみを検索するので、パフォーマンスが節約されることを願っています。私はまた、直接

scene.selectable = []; 

次のステップは、あなたがこの配列に選択可能にしたいすべてのオブジェクトをプッシュすることです（単にそれはすでに私のアプリのほとんどの部分からアクセス可能であるという事実のために）シーンオブジェクトにこの配列を添付します。グループ全体ではなく、グループからメッシュ/スプライト/ etcのみを挿入します。唯一の最後の行は、ここで重要なのは：

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