• Pointer Lock API
  • 雪峰 发表于 2016-07-10 标签:
  • Pointer Lock API即指针锁定,又叫鼠标锁定,是js用于隐藏鼠标,并进行大量的鼠标移动的一套API,即不受区域或屏幕限制,就如同游戏中移动那样,360度无死角,一般用于全屏游戏中使用。详细使用或介绍可以看这里:Pointer Lock API,还有Mozilla developer network 给出的超详细API文档

    我之所以会找到这个API,还不得不从用three.js制作第一人称视角模拟空间开始说起,在之前我所使用的为mouseover事件进行动态视角模拟,可是默认的鼠标(cursor)由于受区域和浏览器窗口大小的限制,超出边界即无法使用,而且由于不能自动往返进行移动,所以在水平方向不能进行360连续视角的转动,于是我就想着能不能使鼠标能360度移动视角且无空间限制(灵感来源于http://voxeljs.com/这个网站的example ,这是一个基于three.js制作沙盒游戏的js,比较像我的世界),他们的一些例子就是点击鼠标就能隐藏鼠标,然后就可以自由的移动鼠标,没有限制,且不会“跳出来”,除非按ESC键。起初我以为可以改变鼠标的坐标,然后发现原来鼠标的坐标只能获取,并不能设置,于是就放弃了。不过,后来我注意到,谷歌浏览器和火狐浏览器在打开这些页面时都会有提示——“按ESC键离开”,这不禁让我联想到fullScreen API的提示,所以就找到这个API了。

    说实话,如果是全屏的3d游戏,绝对要使用这个API,体验效果十分良好。以下是使用API并全屏的效果,可以看到没有鼠标的影子了。

    3d

     

    使用该API有几个需要注意的地方:

    1.mousemove事件返回给event对象的不再是绝对的坐标x,y,而是移动方向的差值(即相对于鼠标上一点的位置的改变值)

    2.由于该API目前支持情况并且良好,只有chrome和firefox支持,而且需要加上厂商前缀,因此使用前务必进行判断。

    3.一般与全屏效果进行搭配效果更好。

     

    好好学习,天天向上!由于目前three.js教程不是很多,所以还得去three.js的官网多看看案例,进行分析总结,这样才能一步步掌握高级技巧,成为大神!

    发表回复