如何在 THREE.Points 对象中单击特定点？答案

【问题标题】：How can I get the particular point clicked on in a THREE.Points object?如何在 THREE.Points 对象中单击特定点？
【发布时间】：2017-04-29 12:45:50
【问题描述】：

我正在尝试使用 raycaster 来确定二维点表面上的点...

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

我在这里有完整的代码： https://som.hex21.com/threejs/wtf/ 是页面，和 https://som.hex21.com/threejs/wtf/js/gridsearch.js 是代码..

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

我应该如何读取被点击点的索引？我点击了所有四个角点，并且我希望它们中的至少一个会是 0，就我构建数据的方式而言。（只有 2 个嵌套的 for 循环）但是，它们从来都不是，并且 intersects[0].point 中的点似乎总是很遥远。我做错了什么？

谢谢！

【问题讨论】：

标签： javascript three.js

【解决方案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））

【讨论】：

【解决方案2】：

你的鼠标坐标应该是：

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/

【讨论】：

谢谢！但是，我几乎可以肯定我的方式和你的方式是相同的。尽管如此，我做出了改变，但它仍然没有找到正确的位置。还有其他想法吗？（网站上应该有你现在建议的代码......）
你mouse.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));现在在我的代码中......（我只是剪切和粘贴。）而且，它仍然不起作用......？啊。代码没有在 cmets 中格式化，看起来像。