CODEWITHSUNDEEP
javascriptthree.js
mahadev s
mahadev s

Reputation: 61

How to handle Click events on three.js scene.?

I have a world map layer as a plane geometry, now i want to handle click events on different parts (For example continents or country). How to handle popup events on particular part like (popup of information or video playing or image data with links etc.)

Here's a fiddle that already has the scene setup.

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

the click event is applied to whole scene, i have created multiple cubes in that example and when clicked on that it is showing the same click event for all parts.

Upvotes: 2

Views: 3086

Answers (2)

Hasan
Hasan

Reputation: 2552

What you ask is too complex, you need to break it down. First problem you want to solve is to find out which object is being clicked.

You can do raycasting or gpu picking. since you sound like a beginner I would suggest you to start with raycasting.

Upvotes: 2

Martin Schuhfuß
Martin Schuhfuß

Reputation: 6986

There are some things you need to do in order to figure out where on the map the click occured (and this is just one way to do it, another one would be to use GPU-picking, which could be even easier):

  • use the raycaster that three.js provides to get information about the object that is under the cursor when the click happened. (docs/example)
  • in the result from the raycaster you will get the uv-coordinates for the point of intersection (so basically, where in your map-texture the click occurred).
  • now, you can either store your geographic features as values relative to these UV-coordinates or you need to convert the UV-values into a geographical format to work with (WGS84, or latitude/longitude). For that you need to know the type of projection that was used to create the map (probably a mercator-projection). Note that there are lots of libraries available for these kinds of conversions.

Now that you know where in your world-map the click occurred, you can test it against geographic features. Let's say continents. For each continent you will need to define a polygon in the same coordinate-system you are using for the coordinates of the clicks. Then you can do a 'point in polygon'-test (here's an implementation) to check if the clicked location is inside the polygon.

Upvotes: 1

Related Questions