Question

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

这里有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();

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

Answer 1

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

您可以进行光线投射或gpu采摘。既然你听起来像个初学者，我建议你先从光线投射开始。

Answer 2

为了弄清楚点击发生在地图上的位置，您需要做一些事情（这只是一种方法，另一种方法是使用GPU-picking，这可能是均匀的更容易）：

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

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

如何在three.js场景上处理Click事件。

2 个答案: