THREE.Pointsオブジェクトで特定のポイントをクリックする方法を教えてください。

Question

私はここに完全なコードを持って

function dynamic(x) { x.dynamic = true; return x; } 
geometry.addAttribute("position", dynamic(new THREE.BufferAttribute(positions, 3))); 
geometry.addAttribute("color", dynamic(new THREE.BufferAttribute(colors, 3))); 
var grid = new THREE.Points(geometry, material); 
scene.add(grid); 

function mouseDownHandler(event) { 
    if (event.button == 0) { 
     event.preventDefault(); 
     var mouse = new THREE.Vector2(); 
     var box = canvas.getBoundingClientRect(); 
     mouse.x = ((event.clientX - box.left)/(box.right - box.left)) * 2.0 - 1.0; 
     mouse.y = ((event.clientY - box.bottom)/(box.top - box.bottom)) * 2.0 - 1.0; 
     raycaster.setFromCamera(mouse, camera); 
     var intersects = raycaster.intersectObject(grid); 
     if (intersects.length > 0) { 
// Why does my intersect not work? 
// I _believe_ I'm calculating the mouse positions correctly. 
// But, the intersects are always way off. (Or, I'm misinterpreting 
// something...) 
      console.log("mouse: ", mouse); 
      console.log("First Intersect:", intersects[0]); 
      console.log("First Point:", intersects[0].point); 
     } 
    } 
} 

...ポイントの2D表面上の点を決定するためにraycasterを使用しようとしている： https://som.hex21.com/threejs/wtf/ページで、 https://som.hex21.com/threejs/wtf/js/gridsearch.jsは、コード..です

私の問題はmouseDownHandlerにあります。基本的には、マウスをクリックすると、クリックされたポイントを教えてください。しかし、グリッドの左下のをクリックすると、マウスは（近く）{-1、-1}になります（これは予想されるものだと思います）、右上が{1,1}の近くにあります。

クリックされたポイントのインデックスをどのように読み込むのですか？私は4つのコーナーポイントをすべてクリックしました。少なくとも、のうち1つがで、私がデータを構築した方法で与えられていると思います。 （ループのためにちょうど2つ入れ子になっています）しかし、それらは決して存在しません。また、intersects [0] .pointの点は常に非常に遠く感じられます。私は間違って何をしていますか？

ありがとうございます！

Answer 1

。マウスの計算は正常だった。本当の問題は

camera = new THREE.PerspectiveCamera(fov, 1, 1e-16, 1000);

はで動作するように透視カメラの最小距離の小さすぎるということでした。私は

camera = new THREE.PerspectiveCamera(fov, 1, 1e-2, 1000);

にそれを変更したら、すべてが大丈夫でした。振り返ってみると、それは間違いない、ある種のアンダーフローがどこかで起こっていたということです。 （あなたはここで働いて、それを見ることができます： https://som.hex21.com/threejs/ftw/、ここでその単一の変更で失敗：https://som.hex21.com/threejs/wtf/（）元mouseDownHandlerとの両方）

Answer 2

あなたのマウスCOORDSは次のようになります。

var box = canvas.getBoundingClientRect(); 
var mouseX = event.clientX - box.left; 
var mouseY = event.clientY - box.top; 

var mouse = new THREE.Vector2 (
     2 * (mouseX/canvas.width) - 1, 
    1 - 2 * (mouseY/canvas.height)); 

あなたがでより多くの情報を見つけることができます。ただ、これを読んで、誰のためにhttp://soledadpenades.com/articles/three-js-tutorials/object-picking/