私の問題はすでにタイトルにあるので、ご検討いただきありがとうございます。ポイントに直接行きます。
UPDATE 2:
問題が解決しました。私はそれらをメッシュに変換しませんでした。超新星から得たヒントと、シャドウマップを有効にする試みの失敗により、半日が失われましたが、非常に明確になりました...
UPDATE 1:
例はここにあります: JSFiddle
.
.
Original problem:
マウス座標を使用したオブジェクト ピッキングのレイ キャスティングの標準的な例です。
var vector = new THREE.Vector3((event.clientX / window.innerWidth ) * 2 - 1, -(event.clientY / window.innerHeight ) * 2 + 1, 1);
projector.unprojectVector(vector, camera);
var ray = new THREE.Ray(camera.position, vector.subSelf(camera.position).normalize());
var intersects = ray.intersectObjects(cubes);
if (intersects.length > 0)
{
console.log('hit');
}
、まったく機能しませんでした。
少し時間をかけて考えた後、私はこれを試しました:
// start a ray from your camera to the coordinates on
// x,y plane you pointed with the mouse:
// *I also draw the actual ray on the screen, it looked perfect! :( but...
var cx = event.clientX;
var cy = event.clientY;
var rx = cx - (SCREEN_WIDTH / 2);
var ry = (SCREEN_HEIGHT / 2) - cy;
var origin = new THREE.Vector3(camera.position.x, camera.position.y, camera.position.z - 200);
var direction = new THREE.Vector3(rx, ry, -20);
var ray = new THREE.Ray(origin, direction);
var intersects = ray.intersectObjects(cubes);
しかし、「交差」変数はまだ空です。私の要素は次のとおりであるため、機能するのは論理的に思えますが:
for ( i = 0; i < cols; i++)
{
for ( j = 0; j < rows; j++)
{
var cwidth = (SCREEN_WIDTH / cols) / scale;
var cheight = (SCREEN_HEIGHT / rows) / scale;
var cdepth = 10;
var cube = THREE.SceneUtils.createMultiMaterialObject(new THREE.CubeGeometry(cwidth, cheight, cdepth, 1, 1, 1), getMaterials());
// getMaterials() is a simple function returning an Array of materials
cube.position.x = cwidth * i - (SCREEN_WIDTH / 2) + cwidth / 2;
cube.position.x /= scale;
cube.position.y = cheight * j - (SCREEN_HEIGHT / 2) + cheight / 2;
cube.position.y /= scale;
cube.position.z = 0;
cubes.push(cube);
scene.add(cube);
}
}
そして私のカメラは:
camera.position.z = getDistance(window.innerHeight);
// or {x: 0, y:0, z: 403.00000000000006}
私はこれを2時間以上修正しようとしています.誰かが私が欠けているものを見ることができますか? そして、インターネットで検索しても無駄でした。
PSこの質問に「ray」という誤ったタグを付けなかったことを願っています。