Javascript 如何在三点对象中单击特定点？

我正在尝试使用光线投射器来确定二维点表面上的点

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);
        }
    }
}

我这里有完整的代码： 是页面，并且 这是密码

我的问题在mouseDownHandler中。基本上，当你点击鼠标时，我希望它告诉我点击了哪个点。但是，当我单击网格左下角的say时，鼠标（靠近）{-1，-1}，我认为这是预期的，对吗？），右上角靠近{1,1}

我应该如何读取被单击点的索引？我点击了所有的四个角点，我希望至少有一个角点是0，就像我构建数据的方式一样。（只有两个嵌套的循环）但是，它们从来都不是，而且相交点[0]中的点似乎总是非常遥远。我做错了什么

---

谢谢

您的鼠标坐标应该是：

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));

---

您可以在以下网址找到更多信息：

，供其他阅读本文的人参考。鼠标的计算很好。真正的问题是

camera=新的三视角摄像机（fov，1，1e-16，1000）

距离太小，透视摄影机无法使用。有一次我把它改成了

camera=新的三视角摄像机（fov，1，1e-2，1000）

一切都很好。回顾过去，这是有道理的，很可能某个地方发生了某种暗流。（您可以看到它在这里工作：
这里的单个更改失败：（都是原始的mouseDownHandler）
谢谢！但是，我几乎可以肯定我的方式和你的方式是一样的。。尽管如此，我还是做出了改变，但仍然没有找到正确的位置。还有其他想法吗？（网站上的代码应该与您现在建议的一样…）您的
鼠标.y
的符号不一样。也许有一把小提琴是合适的。我有：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））；现在在我的代码中。。。（我只是剪贴）而且，它还是不起作用。。？啊。代码不会在注释中格式化，看起来像。