how to get clicked element in THREE.js

Question

Say I have some elements in the canvas, they may be overridden with each other. When clicking on a point, how can I get that very element?

update: t

Answer 1

The example you link to has a simple API for this.

Put this in your HTML. You'll have to download the script and make sure it loads.

Then, on your mesh object, call the following:

mesh.on('click', function()
{
    // response to click...
    mesh.scale.x *= 2;
});

Or a more interesting example that animates the rotation and color of an object smoothly:

mesh.on('click', function(event)
{
    var object3d = event.target,
        rotation, color;
    if (object3d.rotation.x < Math.PI / 4) {
        rotation = {x: Math.PI / 2};
        color = {r: 1, g: 0.5, b: 0};
    } else {
        rotation = {x: 0};
        color = {r: 0.5, g: 0.75, b: 0.25};
    }
    new TWEEN.Tween(object3d.rotation)
        .to(rotation, 800)
        .easing(TWEEN.Easing.Bounce.EaseOut)
        .start();
    new TWEEN.Tween(object3d.material.color)
        .to(color, 300)
        .easing(TWEEN.Easing.Quartic.EaseIn)
        .start();
})