如何处理three.js场景上的点击事件。？答案

【问题标题】：How to handle Click events on three.js scene.?如何处理three.js场景上的点击事件。？
【发布时间】：2017-12-11 17:10:44
【问题描述】：

我有一个世界地图图层作为平面几何图形，现在我想处理不同部分（例如大陆或国家）的点击事件。如何处理特定部分的弹出事件，例如（弹出信息或视频播放或带有链接的图像数据等）

这是一个 fiddle，已经设置了场景。

var camera, scene, renderer;
var geometry, material, mesh;

window.addEventListener("click", onClick, false);


function onClick() {
    alert("Replace me with code to add an object!");
}

var init = function () {

    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 500;

    scene = new THREE.Scene();

geometry = new THREE.CubeGeometry(200, 200, 200);
material = new THREE.MeshBasicMaterial({
                color: 0x000000,
                wireframe: true,
                wireframeLinewidth: 2
            });

mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

}

var animate = function () {

    requestAnimationFrame(animate);

    mesh.rotation.x = Date.now() * 0.0005;
    mesh.rotation.y = Date.now() * 0.001;

    renderer.render(scene, camera);

}

init();
animate();

点击事件应用于整个场景，我在该示例中创建了多个立方体，当点击它时，所有部分都显示相同的点击事件。

【问题讨论】：

标签： javascript three.js

【解决方案1】：

你问的太复杂了，你需要把它分解。您要解决的第一个问题是找出正在单击的对象。

您可以进行光线投射或 gpu 拾取。因为你听起来像个初学者，我建议你从光线投射开始。

【讨论】：

@mahadevs 你只有一个表面和一个世界地图作为它的纹理。你无法实现这样的交互性。为您需要交互性的每个部分创建形状，并在我发送的教程中进行光线测试。
我一定会试试的。
在教程的帮助下，我使用光线投射创建了点击事件。但问题是与拖动和单击事件存在冲突。使用 onMouseDown 事件（orbitcontrols）进行平移，使用 onDocumentMouseDown(event) 进行点击事件。测试link

【解决方案2】：

您需要做一些事情才能确定点击发生在地图上的哪个位置（这只是一种方法，另一种方法是使用GPU-picking，这可能更容易）：

使用three.js 提供的raycaster 来获取单击发生时光标下对象的信息。 (docs/example)
在光线投射器的结果中，您将获得相交点的 uv-coordinates（基本上就是在您的地图纹理中发生点击的位置）。
现在，您可以将地理特征存储为相对于这些 UV 坐标的值，或者您需要将 UV 值转换为地理格式以使用（WGS84 或纬度/经度）。为此，您需要知道用于创建地图的投影类型（可能是mercator-projection）。请注意，有很多库可用于此类转换。

现在您知道点击发生在世界地图的哪个位置，您可以针对地理特征对其进行测试。比方说大陆。对于每个大陆，您需要在与点击坐标相同的坐标系中定义一个多边形。然后你可以做一个“多边形中的点”测试（here's an implementation）来检查点击的位置是否在多边形内。

【讨论】：