在渲染器中捕捉特定网格上的点击事件 [英] catch the click event on a specific mesh in the renderer
问题描述
我设置了一个包含两个网格(立方体)的画布渲染器.我需要做的是捕捉每个cube上的点击事件
来为它调用方便的方法.
I set a canvas renderer which contain two meshs (cubes). What i need to do is to catch the click event on each cube
to call the convenient method for it.
到目前为止,我可以在所有渲染器上捕获单击事件,这意味着当我单击cube1 和cube2 时,单击属于相同的,因为它绑定到renderer
:)
So far, i could catch the click event on all the renderer, means when i click on cube1 and cube2, the click belong the same 'cause it's bound to the renderer
:)
我的问题是,如何绑定每个cube上的点击事件?
My question is, how to bind the click event on each cube?
我的相关代码如下:
//dom
var containerPopUp=document.getElementById('popup');
//renderer
var rendererPopUp = new THREE.CanvasRenderer();
rendererPopUp.setSize(420,200);
containerPopUp.appendChild(rendererPopUp.domElement);
//Scene
var scenePopUp = new THREE.Scene();
//Camera
var cameraPopUp = new THREE.PerspectiveCamera(50,60/60,1,1000);
cameraPopUp.position.z = 220;
cameraPopUp.position.y = 20;
//
scenePopUp.add(cameraPopUp);
//Add texture for the cube
//Use image as texture
var img2D = new THREE.MeshBasicMaterial({ //CHANGED to MeshBasicMaterial
map:THREE.ImageUtils.loadTexture('img/2d.png')
});
img2D.map.needsUpdate = true; //ADDED
//Add Cube
var cubeFor2D = new THREE.Mesh(new THREE.CubeGeometry(40,80,40),img2D);
cubeFor2D.position.x =- 60;
cubeFor2D.position.y = 20;
scenePopUp.add(cubeFor2D);
//
var img3D = new THREE.MeshBasicMaterial({ //CHANGED to MeshBasicMaterial
map:THREE.ImageUtils.loadTexture('img/3d.png')
});
img3D.map.needsUpdate = true;
var cubeFor3D = new THREE.Mesh(new THREE.CubeGeometry(40,80,40),img3D);
cubeFor3D.position.x = 60;
cubeFor3D.position.y=20;
scenePopUp.add(cubeFor3D);
//
rendererPopUp.render(scenePopUp,cameraPopUp);
//
animate();
rendererPopUp.domElement.addEventListener('click',testCall,false);//Here the click event is bound on the whole renderer, means what ever object in the renderer is clicked, the testCall method is called.
如您所见,cubeFor2D 和cubeFor3D 包含在渲染器中.我需要在每个网格上绑定点击事件.我用 threex.domevent.js
尝试了这个:
As you can see, cubeFor2D and cubeFor3D are contained in the renderer. I need to bind the click event on each mesh. I tried this with the threex.domevent.js
:
var meshes = {};
meshes['mesh1'] = cubeFor2D;
meshes['mesh1'].on('mouseover', function(event){
//response to click...
console.log('you have clicked on cube 2D');
});
但它不起作用,在控制台中,我收到此错误:
But it doesn't work, in the console, i got this error:
TypeError: meshes.mesh1.on is not a function
当然,我包含了 API 源代码文件:
Of course, i included the API source code file:
<script src="threex.domevent.js"></script>
推荐答案
您可以生成这样的回调.首先为每个对象定义回调函数:
You can generate a callback like this. First define your callback function for each object:
mesh.callback = function() { console.log( this.name ); }
然后按照标准采摘模式:
Then follow the standard picking pattern:
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
function onDocumentMouseDown( event ) {
event.preventDefault();
mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( objects );
if ( intersects.length > 0 ) {
intersects[0].object.callback();
}
}
更新为three.js r.70
updated to three.js r.70
这篇关于在渲染器中捕捉特定网格上的点击事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!