如何處理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事件。

回答

相關問題