Menu
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: this demo helps a lot: http://mrdoob.github.com/three.js/examples/canvas_interactive_cubes.html
347
In this article, we’ll look at how to get the ID of the clicked element in the JavaScript click handler. One way to let us get the ID of the element when we click on an element is to set the onclick property of each element object to the same click event handler function.
In JavaScript, a click (or, on touch screen devices, a tap) is an event that you can listen and react to. You do this by creating an event listener that, as the name implies, listens to the user’s interactions with the DOM elements on the frontend and fires when the event being listened to takes place.
Another way to get the element we clicked on in the event handler is to get it from the event object which is the first parameter in the event handler function. We call window.addEventListener to attach the click event listener to the html element. Then we get the element that’s clicked on from the event.srcElement property.
If the clicked element has multiple classes, the function will return all classes, with pairs of adjacent classes separated by blank space. I hope this tutorial helped. I recently found myself tackling this challenge as I was implementing a data layer for analytics purposes on one of my websites.
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.
<script src='threex.domevent.js'></script>
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();
})
maybe this tool can help you, a full-interaction manager, help three.js easy to binding interaction event
more detial see three.interaction
import { Scene, PerspectiveCamera, WebGLRenderer, Mesh, BoxGeometry, MeshBasicMaterial } from 'three';
import { Interaction } from 'three.interaction';
const renderer = new WebGLRenderer({ canvas: canvasElement });
const scene = new Scene();
const camera = new PerspectiveCamera(60, width / height, 0.1, 100);
// new a interaction, then you can add interaction-event with your free style
const interaction = new Interaction(renderer, scene, camera);
const cube = new Mesh(
new BoxGeometry(1, 1, 1),
new MeshBasicMaterial({ color: 0xffffff }),
);
scene.add(cube);
cube.cursor = 'pointer';
cube.on('click', function(ev) {});
cube.on('touchstart', function(ev) {});
cube.on('touchcancel', function(ev) {});
cube.on('touchmove', function(ev) {});
cube.on('touchend', function(ev) {});
cube.on('mousedown', function(ev) {});
cube.on('mouseout', function(ev) {});
cube.on('mouseover', function(ev) {});
cube.on('mousemove', function(ev) {});
cube.on('mouseup', function(ev) {});
// and so on ...
/**
* you can also listen at parent or any display-tree node,
* source event will bubble up along with display-tree.
*/
scene.on('touchstart', ev => {
console.log(ev);
})
scene.on('touchmove', ev => {
console.log(ev);
})If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
