この例をthree.jsから変更して、マウスクリックでキャラクターを制御しようとしています。まず、キャンバスをクリックすると、マウス座標が必要になり、THREE.Raycaster.intersectObjectsを使用してそれを3D空間座標に変換します。変更されたコードでは、マウスを上に向けて、次のようになります。
var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
var projector = new THREE.Projector();
projector.unprojectVector(vector, camera);
var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
var intersects = raycaster.intersectObjects(objects);
if (intersects.length > 0) {
console.log('intersect: ' + intersects[0].point.x.toFixed(2) + ', ' + intersects[0].point.y.toFixed(2) + ', ' + intersects[0].point.z.toFixed(2) + ')');
}
else {
console.log('no intersect');
}
objects
グラウンドメッシュを配列に追加しましたが、グラウンドメッシュraycaster.intersectObjects
をクリックすると空の配列が返されます。scene.children
の代わりにパスしてみましobjects
たが、運が悪かったです。
これが完全に変更されたソースです。