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

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

这是一个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事件被应用到整个场景，我已经在示例中创建多个多维数据集，当点击它显示所有部件相同的点击事件。

来源

2016-08-02 mahadev s

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

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

来源

2016-08-02 11:31:16 Hasan

@mahadevs你只有一个表面和一个世界地图作为它的纹理。你不能实现这样的交互性。为需要交互性的每个部分创建形状，并在我发送的教程中进行raytest。 – Hasan

当然，我会尝试。 –

在教程的帮助下，我使用光线投射创建了点击事件。但问题是与拖动和点击事件有冲突。用于平移的onMouseDown事件（orbitcontrols）和用于点击事件的onDocumentMouseDown（事件）。测试[链接]（http://arkatest.com/testing/working/test1.html） –

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

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

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

来源

2016-08-02 12:34:08

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

回答

相关问题