threejs基础案例之十:模拟点击事件

threejs基础案例之十:模拟点击事件_第1张图片

注意点击时控制台的打印

threejs最后渲染的时候是以canvas形式进行渲染的。所以在界面中如何实现点击事件实际上成了如何在canvas中如何进行点击事件。但其实这只是其一。threejs是3d空间,鼠标在点击的时候,是去的是x和y二位数据,而在3d世界中,如何得到鼠标的坐标呢?这里引入了一个标准设备坐标。

它是一个相对值,其值在-1和1之间。用来记录我们鼠标在设备上移动的相对位置,既然是相对位置,那它相对于谁呢?

threejs基础案例之十:模拟点击事件_第2张图片

没错。设备坐标和web中的canvas定位的基点不一样。在web中,canvas画布的位置的基点是左上角(0,0),而对于设备坐标而言它的基点在canvas的画布中心。这样鼠标的移动,我们可以通过web中鼠标的位置得到其相对于设备坐标的移动位置。也就是sx,sy最后得到的结果。当然想要得到鼠标点在3d世界中的坐标。我们还需要做一个操作,把设备坐标转化成3D世界坐标,这需要我们通过这个project方法来实现真正的转换worldVector.project(camara)

有了坐标就可以了吗?还不行。

好在threejs给我们提供了一个方案。new THREE.Raycaster(),光线投射Raycaster,这个类用于进行raycasting(光线投射)。 光线投射用于进行鼠标拾取(在三维空间中计算出鼠标移过了什么物体),通过这个类的intersectObjects方法。能获取到场景中所有与该射线相交的物体。依此就能判断是否点击


  
  
  

你可能感兴趣的:(threejs,前端,javascript,html5)