以上一篇入门篇为例来简单的设置下3d模型当中的交互事件,上一篇我们已经完成了在3d页面中添加了一个红色球,下面我们给这个球一个点击事件让它Y轴位置上升,再设置一个鼠标移入到球上时让其变色。
1.其实three.js当中没有事件可以直接选中物体的,我们需要监听window对象来完成与3d页面的交互,通过使用到three.js当中RayCaster对象,用于在三维空间中进行鼠标拾取,原理是:相机与鼠标所在的设备坐标之间的连线与哪些物体相交。相交的物体离屏幕越近的越靠前,所以第一个物体就是我们选中的对象。
第一步:给window对象添加点击事件监听器;
window.addEventListener('mousedown', mouseDownFuc);
第二步:在事件监听函数里拾取到点击的对象集合;
function mouseDownFuc(){
let raycaster = new THREE.Raycaster();//创建光线投射对象
let mouse = new THREE.Vector2();//创建二维平面
let intersectsObjArr = getSelsectOBj(mouse,raycaster, e);//通过封装的getSelsectOBj函数获取鼠标选中对象集合,e是点击事件对象
}
//获取事件操作对象
function getSelsectOBj(mouse,raycaster, e) {
//将html坐标系转化为webgl坐标系,并确定鼠标点击位置
mouse.x = e.clientX / renderer.domElement.clientWidth*2-1;
mouse.y = -(e.clientY / renderer.domElement.clientHeight*2)+1;
raycaster.setFromCamera(mouse,camera);//以camera为z坐标,确定所点击物体的3D空间位置
let intersects = raycaster.intersectObjects(scene.children, true);//确定所点击位置上的物体数量集合
return intersects;//返回连线经过的物体集合
}
第三步:判断intersectsObjArr集合长度不为零,确认我们鼠标点击的地方有物体,如果有物体那么intersectsObjArr[0]就是我们选中的对象,通过页面console.log(intersectsObjArr[0])发现intersectsObjArr[0]包含了相交点的许多信息,而我们只需要交点的对象,所以我们需要取到intersectsObjArr[0].object对象;然后我们还需要进行一次判断当前