[英]how to get clicked element in THREE.js
假设我在画布中有一些元素,它们可能会被相互覆盖。 点击某个点时,我该如何获得该元素?
更新 :这个演示有很多帮助: http : //mrdoob.github.com/three.js/examples/canvas_interactive_cubes.html
使用以下代码。 这将允许您添加单击事件,并在发生这种情况时执行所需操作。 您可以查看页面的来源以查看他们正在做什么,这是我从中获取此代码。
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
var projector = new THREE.Projector();
function onDocumentMouseDown( event ) {
event.preventDefault();
var vector = new THREE.Vector3(
( event.clientX / window.innerWidth ) * 2 - 1,
- ( event.clientY / window.innerHeight ) * 2 + 1,
0.5
);
projector.unprojectVector( vector, camera );
var ray = new THREE.Ray( camera.position,
vector.subSelf( camera.position ).normalize() );
var intersects = ray.intersectObjects( objects );
if ( intersects.length > 0 ) {
intersects[ 0 ].object.materials[ 0 ].color.setHex( Math.random() * 0xffffff );
var particle = new THREE.Particle( particleMaterial );
particle.position = intersects[ 0 ].point;
particle.scale.x = particle.scale.y = 8;
scene.add( particle );
}
/*
// Parse all the faces
for ( var i in intersects ) {
intersects[ i ].face.material[ 0 ].color
.setHex( Math.random() * 0xffffff | 0x80000000 );
}
*/
}
您链接到的示例有一个简单的API。
把它放在你的HTML中。 您必须下载脚本并确保加载。
<script src='threex.domevent.js'></script>
然后,在您的网格对象上,调用以下内容:
mesh.on('click', function()
{
// response to click...
mesh.scale.x *= 2;
});
或者一个更有趣的例子,可以平滑地动画对象的旋转和颜色:
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();
})
也许这个工具可以帮助你,一个完整的交互管理器,帮助three.js轻松绑定交互事件
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); })
Drew使用THREEx.domevents的答案已经过时了。 新API需要初始化domEvents对象,然后将具有相应事件侦听器的网格绑定到它。
来自Github回购 :
var domEvents = new THREEx.DomEvents(camera, renderer.domElement)
// ...
domEvents.addEventListener(mesh, 'click', function(event){
console.log('you clicked on the mesh')
}, false)
此外,它可以在凉亭上使用!
bower install threex.domevents
编辑:虽然没有记录,但也支持'touchstart'
, 'touchend'
和其他一些移动事件。 请务必查看这些支持移动设备,因为鼠标“点击”并非总是在某些设备上报告。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.