3

ユーザーが 3D シーンで特定のキューブをクリックしたことを検出しようとしています。同様の質問をいくつか見ましたが、私とまったく同じ問題があるようには見えません。

キューブの 3D 配列があり、正常に表示されますが、マウス ダウン機能が呼び出されると、交差配列は常に空になります。何が問題なのかわかりません。助けていただければ幸いです。

私のレンダラーは次のように設定されています：

function setupRenderer()
{
    renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColorHex( 0xEEEEEE, 1 );
    renderer.domElement.addEventListener( 'mousedown', onDocumentMouseMove, false );
    $('body').append(renderer.domElement);
}

イベントハンドラは次のとおりです。

function onDocumentMouseDown(event)
{
    console.log("mouse clicked!");
    event.preventDefault();
    if(event.target == renderer.domElement)
    {
        var mouseX = (event.clientX / window.innerWidth)*2-1;
        var mouseY = -(event.clientY /window.innerHeight)*2+1;

        var vector = new THREE.Vector3(mouseX, mouseY, 0.5);
        projector.unprojectVector(vector, camera);

        var raycaster = new THREE.Raycaster(camera.position, vector.subSelf(camera.position).normalize());
        var intersects = raycaster.intersectObjects(cubes);
        console.log("intersects.length: " + intersects.length);
        if ( intersects.length > 0 ) {
            console.log("intersected objects");
            /* do stuff */
        }
    }
}

http://kev-adsett.co.uk/experiments/three.js/experiment1/で現在のプロジェクトの動作を確認できます。

4

1 に答える 1

9

オブジェクトの単一の配列をに渡す必要があります

var intersects = raycaster.intersectObjects( objects );

オブジェクト配列が階層的である (つまり、オブジェクトの 1 つに子がある) 場合は、次のように指定する必要があります。

var intersects = raycaster.intersectObjects( objects, true );

で渡すこともできますscene.children。

この関数は、「キューブ」データ構造では機能しません。

three.js r.54

于 2013-01-03T00:42:11.030 に答える