three.jsでオブジェクトをクリックした時の判定

Question

###前提・実現したいこと
現在three.jsを利用してオブジェクトをクリックした時のアクションを設定しようとしているところです。今回のコードは対象のオブジェクトをクリックした時に日付をログとして表示させるものとなっています。以下のコードで実行してもif文に入ることができません。
var intersects = raycaster.intersectObjects( object );
のobjectにはmeshを格納してある状況です。

###該当のソースコード
document.addEventListener( 'mousedown', clickPosition, false );

function clickPosition( event ) {
    var x = event.clientX;
    var y = event.clientY;

    var mouse = new THREE.Vector3();
    mouse.x =  ( x / window.innerWidth ) * 2 - 1;
    mouse.y = -( y / window.innerHeight ) * 2 + 1;

    var raycaster = new THREE.Raycaster();
    raycaster.setFromCamera( mouse, camera );
    var intersects = raycaster.intersectObjects( object );

    if( intersects.length > 0 ) {
        console.log(Date())
    }
}

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
javascript, three.js

Answer 1

推測になってしまいますが、

objectにはmeshを格納してある状況です。

こちらは配列になってますでしょうか？

intersectObjectsの最初の引数は配列のみ許可されているので、配列になっていない単品のオブジェクトを指定すると、何もしてくれません。

もし検知したいものが１つしかない場合は、 raycaster.intersectObject （最後の s がない） を使うか、 raycaster.intersectObjects( [object] ) としてみてください。

Comments

[Owl_]

objectにはpushを使い対象のオブジェクトを格納しています.
if手前で中身をコンソールに表示して見たところ
[Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, …]
のように出力されました。格納自体はできていると思います。
ちなみに検知したいものは複数あります。

Answer 2

おそらく、マウスポジションとして生成した Vector3 の値の z が 0 だからじゃないかなと思います。
z を 1 にしたらうまく行きませんか？

Comments

[Owl_]

回答ありがとうございます。
mouse.z = 1;
を追加して見ましたがうまくいきませんでした