Geek Answers Handbook

Three js clickable objects

I have two meshes 3d objects that I created in three.js. I want to add a click event to these objects so that when I click on one of them it will scale, and when I click on the other, it rotates.

I tried this method to add a click event to an object and it does not work.

<script src='threex.domevent.js'> </script> <script> var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(20, window.innerWidth/window.innerHeight, 1, 1000); camera.position.z = 100; var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); var geometry = new THREE.CubeGeometry(1,1,1); var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); var cube = new THREE.Mesh(geometry, material); scene.add(cube); cube.addEventListener( 'click',function(){cubeScale()} , false ); function cubeScale() { cube.scale.x *= 20; } var render = function () { requestAnimationFrame(render); cube.rotation.y += 0.1; renderer.render(scene, camera); }; render(); </script>
+7
javascript html5
source share
3 answers

Absolutely you need to implement raycaster to select / click / select a specific object in the three.js file. I have already implemented it in one of my projects using three. Js and raycaster vs collada model. For your link, these links can help you:

+6
source share

You can use pickingRay to click with the spelling camera, as shown in this code:

 var vector = new THREE.Vector3( (event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5); var rayCaster = projector.pickingRay(vector, camera); var intersectedObjects = rayCaster.intersectObjects(scene.children, true);

But if you want to click on a perspective camera, you need to click using unprojectVector , as shown below:

 var vector = new THREE.Vector3( (event.clientX / window.innerWidth) * 2 - 1, - (event.clientY / window.innerHeight) * 2 + 1, 0.5 ); var rayCaster = projector.unprojectVector(vector, camera); var intersectedObjects = rayCaster.intersectObjects(objects);
+1
source share

you can use this three.interaction event manager

and see this demo

 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 on parent-node or any display-tree node, * source event will bubble up along with display-tree. * you can stop the bubble-up by invoke ev.stopPropagation function. */ scene.on('touchstart', ev => { console.log(ev); }) scene.on('touchmove', ev => { console.log(ev); })
0
source share

More articles:


All Articles