VRTK使用心得(六):优化用户体验——防穿墙及自动坠落

我们知道在VR中,尤其是像HTC VIVE或Oculus这样的设备,体验者除了能够使用瞬移来移动自身位置,还可以在空间小范围地自主移动,当距离一面墙或者障碍物比较近的时候,体验者的头部可以穿过墙面或障碍物的模型,看到里面的内容(CS穿墙既视感),比如在VR房产项目中,用户会看到隔壁房间的内容,个别会有闪躲的动作,这种体验显然与现实不符,从而影响到沉浸感;另外,同样是由于自由移动引起的问题,当体验者瞬移到一个有高度的地方以后,比如高塔、楼梯等,当走出这个高度的范围,并没有因为重力而下落,而是悬停在了空中,这也是影响用户体验的地方。

VRTK对于这两方面都有对应的优化措施,首先,对于穿墙,使用VRTK_HeadsetCollisionFade组件,能够在检测到用户与物体发生碰撞以后做一个黑屏效果,这样体验者就会本能地退出这个区域(如下图),在PlayArea(见VRTK的基本配置,PlayArea用来挂载瞬移相关组件)上添加脚本以后,用户头盔与碰撞体发生碰撞,场景会有一个逐渐变黑的过程。


1199677-417a14015b278c26.png

需要说明的是:当添加VRTK_HeadsetCollisionFade以后,会自动挂载另外两个组件:
1.VRTK_HeadsetCollision:用来检测头盔与碰撞体的碰撞,当单独挂载这个脚本的时候,可以获取到这个脚本,使用HeadsetCollisionDetect事件来检测碰撞发生,然后撰写自己的碰撞检测逻辑,比如除了黑屏,还可以播放提示音,显示提示UI等。

    void Start () {
        GetComponent<VRTK_HeadsetCollision>().HeadsetCollisionDetect += CollisionDetect_HeadsetCollisionDetect;
    }

    private void CollisionDetect_HeadsetCollisionDetect(object sender, HeadsetCollisionEventArgs e)
    {
      //你的处理逻辑
    }

2. VRTK_HeadsetFade:用来实现黑屏。当单独挂载时,可以在除了头盔碰撞之外,调用其Fade()函数来实现黑屏效果,传递颜色及持续时间参数。

对于自动坠落,VRTK提供了VRTK_BodyPhysics这个组件,同样是挂载到PlayArea上,当体验者移出高度范围的区域,会因为重力自动坠落到能够承载其的下一个高度。调节参数Gravity Fall Y Threshold,设定引起坠落的值,如下图,如果设置为1,则距离下一个高度大于1米时下落。


1199677-b98c380b9d14661c.png

其原理是,VRTK在运行时,会在CameraRig上添加两个Collider,一个“代表”Body,一个“代表”Foot,如下图:

1199677-fd9b703a9bdb5cad.png

FootCollider通过检测碰撞,当没有碰撞时,则认为悬空,继而实现下落。

以上是VRTK中对于因为用户自由移动引起的用户体验的优化,希望对你有帮助,欢迎指正。

1199677-d4942913d18cee9a.png

  • 0
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
以下是一个简单的实现烟花绽放然后坠落的HTML代码,并添加了“杨文建”这个文字: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>烟花绽放</title> <style> #canvas { background: #000; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } h1 { color: #fff; text-align: center; position: absolute; top: 50%; width: 100%; font-size: 5rem; font-weight: bold; transform: translateY(-50%); } </style> </head> <body> <canvas id="canvas"></canvas> <h1>杨文建</h1> <script> // 获取canvas元素 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // 设置canvas宽高 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 烟花粒子数组 var particles = []; // 烟花粒子数量 var particleCount = 30; // 烟花粒子构造函数 function Particle(x, y, color) { this.x = x; this.y = y; this.color = color; this.radius = 2; this.vx = Math.random() * 10 - 5; this.vy = Math.random() * 10 - 5; this.gravity = 0.2; } // 烟花绘制函数 function drawFirework(x, y) { // 随机颜色 var color = 'rgb(' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ')'; // 创建烟花粒子 for (var i = 0; i < particleCount; i++) { particles.push(new Particle(x, y, color)); } // 绘制烟花 for (var j = 0; j < particles.length; j++) { ctx.beginPath(); ctx.arc(particles[j].x, particles[j].y, particles[j].radius, 0, Math.PI * 2); ctx.fillStyle = particles[j].color; ctx.fill(); // 烟花粒子运动 particles[j].x += particles[j].vx; particles[j].y += particles[j].vy; particles[j].vy += particles[j].gravity; particles[j].radius -= 0.02; } } // 鼠标点击事件 document.addEventListener('click', function(e) { var x = e.clientX; var y = e.clientY; drawFirework(x, y); }); </script> </body> </html> ``` 你可以将上述代码保存为一个HTML文件,然后用浏览器打开,就可以看到烟花绽放并坠落的效果,并且中间有“杨文建”这个文字。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

XR技术研习社

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值