So behandeln Sie Click-Ereignisse in der three.js-Szene.

Question

Ich habe eine Weltkartenebene als Ebenengeometrie, jetzt möchte ich Klickereignisse auf verschiedenen Teilen behandeln (zum Beispiel Kontinente oder Länder). Wie man Popup-Ereignisse auf einem bestimmten Teil behandelt (Popup von Informationen oder Videowiedergabe oder Bilddaten mit Links usw.)

Hier ist ein fiddle, der bereits die Szene eingerichtet hat.

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

das Click-Ereignis auf ganze Szene angewandt wird, ich habe in diesem Beispiel mehr Würfel erstellt und wenn darauf geklickt wird, dass es das gleiche Click-Ereignis für alle Teile angezeigt wird.

Answer 1

Was Sie fragen, ist zu komplex, Sie müssen es aufteilen. Das erste Problem, das Sie lösen möchten, ist herauszufinden, auf welches Objekt geklickt wird.

Sie können Raycasting oder GPU auswählen. Da Sie sich wie ein Anfänger anhören, würde ich Ihnen empfehlen, mit Raycasting zu beginnen.

Answer 2

Es gibt einige Dinge, die Sie tun müssen, um herauszufinden, wo auf der Karte der Klick passiert ist (und dies ist nur eine Möglichkeit, eine andere zu verwenden wäre GPU-picking, was noch einfacher sein könnte):

Verwenden Sie den von threw.js bereitgestellten Rycaster, um Informationen über das Objekt zu erhalten, das sich unter dem Cursor befindet, als das Klicken ausgeführt wurde. (docs/example)

im Ergebnis aus dem Rycaster erhalten Sie die uv-coordinates für den Schnittpunkt (also im Grunde, wo in Ihrer Map-Textur der Klick aufgetreten ist).

Jetzt können Sie entweder Ihre geografischen Merkmale als Werte in Bezug auf diese UV-Koordinaten speichern oder Sie müssen die UV-Werte in ein geographisches Format konvertieren, mit dem Sie arbeiten können (WGS84 oder Breiten-/Längengrad). Dazu müssen Sie den Projektionstyp kennen, mit dem die Karte erstellt wurde (wahrscheinlich mercator-projection). Beachten Sie, dass für diese Arten von Konvertierungen viele Bibliotheken verfügbar sind.

Nun, da Sie wissen, wo in Ihrer Weltkarte der Klick aufgetreten ist, können Sie ihn gegen geographische Merkmale testen. Sagen wir Kontinente. Für jeden Kontinent müssen Sie ein Polygon in demselben Koordinatensystem definieren, das Sie für die Koordinaten der Klicks verwenden. Dann können Sie einen 'Punkt im Polygon'-Test (here's an implementation) durchführen, um zu prüfen, ob die angeklickte Position innerhalb des Polygons liegt.