当前位置:Gxlcms > JavaScript > 详解Three.js获取鼠标点击的三维坐标的示例代码

详解Three.js获取鼠标点击的三维坐标的示例代码

时间:2021-07-01 10:21:17 帮助过:23人阅读

本篇文章主要介绍了Three.js获取鼠标点击的三维坐标示例代码。具有一定的参考价值,感兴趣的小伙伴们可以参考一下。

由于工作需要,但是对于three.js又是一窍不通,网上的资料又很少,所以上来就让我获取坐标,真是一个头两个大。好歹最后终于实现了。

既然已经是想要获取鼠标点击的三维坐标了,相信你camera对象和scene都已经有了,如果不了解的小伙伴,可以先去看一下这两个对象。这里主要说一下怎么获取到三维坐标,原理性的东西不提。上代码:

我理解的就是鼠标点击的时候屏幕收到的是二维坐标,这个二维坐标和相机连线,在视角的方向上延伸,形成一条射线,这条射线会和场景中的物体相交,接收这些相交的所有物体,第一个物体就是离相机最近的,最后一个就是离相机最远的。一般就把第一个相交的物体作为鼠标点击的物体。

以上就是详解Three.js获取鼠标点击的三维坐标的示例代码的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行