体感在js中的调用
体感技术,在于人们可以很直接地使用肢体动作,与周边的装置或环境互动,而无需使用任何复杂的控制设备,便可让人们身临其境地与内容做互动。
体感分为三大类:
惯性感测:主要是以惯性传感器为主,例如用重力传感器,陀螺仪以及磁传感器等来感测使用者肢体动作的物理参数,分别为加速度、角速度以及磁场,再根据此些物理参数来求得使用者在空间中的各种动作。
光学感测:主要是通过光学传感器获取人体影像,再得此人体影像的肢体动作与游戏中的内容互动,主要是以
D平面为主,而内容也多属较为简易类型的互动游戏。
惯性及光学联合感测:主要是以手柄上放置一个重力感应器,用来侦测手部三轴向的加速度,以及一红外线传感器,用来感应在电视屏幕前方的红外线发射器讯号,主要可用来侦测手部在垂直及水平方向的位移,来操控一空鼠标。
手机重力感应
手机重力感应技术:利用压电效应实现,简单来说是测量内部一片重物(重物和压电片做成一体)重力正交两个方向(x轴与y轴)的分力大小,来判断水平方向。
手机重力感应指的是手机内置重力摇杆芯片,支持摇晃切片所需的界面和功能,甩歌甩屏,翻转静音,甩动切换视频等,是一种非常具有使用乐趣的功能。通过对力敏感的传感器,感受手机在变换姿势时,重心的变化,使手机光标变化位置从而实现选择的功能。
重力感应依赖于磁阻传感器、加速度传感器、角速度传感器(陀螺仪)、重力传感器、方向传感器(电子罗盘)等。
手机重力感应可以应用于
指南针
地图导航
现实增强
摇一摇
游戏控制
计步器
重力感应小球
重力感应举例
重力感应小球
屏幕旋转
摇一摇改变颜色
陀螺仪
在重力感应中,有两种javascript事件负责处理设备方向信息
第一种是DevceOrientation,它是新的DOM事件,会在加速度传感器检测到设备在反复向上产生改变时触发。
第二种是DeviceMotion,它也是新DOM事件,会在加速度发生改变时触发。
区别在于:
DeviceOrientation的值是相对于初始状态的差值,只要设备方向不变,怎么动都不会影响数值;
DeviceMotionEevent是相对于之前的某个瞬间值的差值时间比,即变化的速度,一旦设备静止则会恢复为0.
设备方向(DeviceOrientation事件)
DeviceOrientation API是一个Web开发者能控制屏幕旋转方向的接口,
开发者可以利用该API检测屏幕的当前方向,在屏幕方向发生改变时得到消息通知,并能通过接口将屏幕方向锁定到指定状态。
当浏览器的Orientation发生变化时,触发DeviceOrientation事件,并返回一个DeviveOrientationEvent对象。DeviveOrientationEvent封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据。例如手机所处角度、方向、朝向。
设备运动(DeviceMotion事件)
DeviceMotion事件是监听手机加速度变化的事件,利用了手机加速传感器提供的API,当监听到手机加速度变化的事件时,根据获取的加速度来执行不同的动作。相应事件的类型必须为DevceMotionEvent,且必须在window对象上触发。
接口说明:DeviceMoiton封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。
设备旋转(OrientationChange事件)
orientationchange事件是在用户水平或者垂直翻转设备(即方向发生变化)时触发的事件。如果要查看orientationchange事件的效果,用户必须使用移动设备或者移动模拟器来查看。
事件对象
使用event.orientation返回移动设备的方向。
窗口对象
使用window.orientation属性设置“portrait(纵向)”和“landscape(横向)”间不同的样式
扩展应用
使用DeviceOrientationAPI接口可以实现在web中获取手机设备的屏幕旋转方向参数,在示例的基础上进行改进,可以扩展到在屏幕上控制页面元素的移动,实现动画或游戏的目的。例如通过调整屏幕的方向控制页面上的小球走迷宫,控制小车的移动躲避障碍等。
前端发展
(1)js动画:可以配合平台提供的api(重力感应等)开发更复杂的动效。
(2)利用重力感应开发物理游戏
(3)陀螺仪实现摇一摇功能
链接:手机计步器软件的原理 https://blog.csdn.net/finnfu/article/details/45273183
附:举例
1.重力感应小球:
摇一摇肯定必须安装有重力感应装置才能实现. 但是如果另一个角度理解,比如在太空没有重力存在(重力感应)会不会正常工作?在这一方面认为是可以的,应为外力会改变传感器的位置,就一样实现摇一摇的功能和效果。
核心代码:
运行效果由于不便导入视频,所以做了截屏处理
2.手机摇一摇:
3.旋转手机屏幕:
4.陀螺仪
体感在js中的调用的更多相关文章
- JS中怎么调用<%%>的值
JS中怎么调用<%%>的值 示例代码一: <% String usercode = request.getParameter("usercode");//用req ...
- JS中直接调用后台静态方法
这两天在维护一个很久之前的老项目,需要在jsp中增加显示一些新的模块,需要连表查询数据库返回数据 最开始想到的是用ajax,但是由于项目十几年前的老项目(jsp页面都是最原始的拼接组成,没有单独的js ...
- js中直接调用函数和new函数的区别
如果函数返回值为常规意义上的值类型(Number.String.Boolean)时,new函数将会返回一个该函数的实例对象,而如果函数返回一个引用类型(Object.Array.Function),则 ...
- js中定时器调用函数时为什么会有引号
之前在学习的时候并没有发现的细节,关于js中,定时器的问题 这里我们写两个延时器 setTimeout(func, 0); setTimeout("func()", 0);定时器中 ...
- 详解 JS 中 new 调用函数原理
JavaScript 中经常使用构造函数创建对象(通过 new 操作符调用一个函数),那在使用 new 调用一个函数的时候到底发生了什么?先看几个例子,再解释背后发生了什么. 1)看三个例子 1.1 ...
- js 中直接调用和new的区别
var test = new Test(); // 这里的 test 是什么? 是一个 Test 对象吗?错!这里 test 是一个函数——Test 中返回的 function() { return ...
- js中对象调用对象中的方法
var o = {a:"abc", b:{ c:function(param){ alert(this.a); //这里的this指向的不是o而是b,所以this是没有a属性的,这 ...
- js中被调用的函数获取调用者对象
通过event.srcElement即可.一直用了很久的传参,终于解决了.
- 使用HTML5开发Kinect体感游戏
一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...
随机推荐
- JS基础-全局内置对象
对象 JS中有那些内置对象 数据封装类对象 String.Array.Object.Boolean.Number 其他对象 Math.Date.RegExp.Error.Function.Argume ...
- 201871010119-帖佼佼《面向对象程序设计(java)》第十六周学习总结
博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.co ...
- NodeJS2-5环境&调试----process(进程)
argv(参数相关的) /* argv argv0 execArgv execPath */ const { argv, argv0, execArgv, execPath } = process; ...
- WCF服务部署到IIS
WCF服务部署 一.将WCF服务部署到IIS上 1.首先检测电脑上是否安装了IIS,一般来说Win7以上系统自带IIS 2.下面进行IIS服务的开启设置: 控制面板=>打开或关闭Windos功 ...
- 使用Future
/** * Runnable接口有个问题,它的方法没有返回值.如果任务需要一个返回结果,那么只能保存到变量,还要提供额外的方法读取,非常不便. * Java标准库还提供了一个Callable接口,和R ...
- python 类属性与实例属性
#__author__ = 'juzi_juzi' #类属性与实例属性 #1.无法通过类访问实例属性: #2.类属性归类所所有,但是所有实例都可访问: #3.如果存在相同名称的类属性与实例属性,实例访 ...
- Internet History,Technology,and Security - Technology: Internets and Packets (Week5)
Week5 Technology: Internets and Packets Welcome to Week 5! This week, we’ll be covering internets an ...
- MIT-6.824 操作系统 汇总
MIT-6.828-JOS-环境搭建 ELF文件格式 lab1:C, Assembly, Tools, and Bootstrapping lab2:Memory management lab3:Us ...
- k8s~跨namespace的service相互访问
在k8s里,你可以通过服务名去访问相同namespace里的服务,然后服务可以解析到对应的pod,从而再由pod转到对应的容器里,我们可以认为这个过程有两个port的概念,service port 就 ...
- Life is not supposed to be easy 。
对每个人而言,真正的职责只有一个: 找到自我.然后在心中坚守一生,全心全意,永不停息. 所有其他的路都是不完整的,是人的逃避方式,是对大众理想的懦弱回归,是随波逐流,是对内心的恐惧. 对婚姻,对房子的 ...