新知榜官方账号
2023-07-13 17:30:53
外部世界是三维立体的,但是它在我们的视网膜上留下的投影却是二维的。因为大脑会自动利用视觉信息中的各种深度知觉的线索,“重建”出立体的感知。人眼立体视觉的原理基本是依靠深度知觉+双眼视差。
WebVRAPI目前还停留在草案阶段,仅能在安装了Firefoxnightly的OculusRift、Chrome的实验性版本和SamsungGearVR的浏览器上使用。除了使用原生API开发外,目前还可以使用Mozilla开发的A-Frame框架和Three.js。本文主要描述的是使用Three.js的移动浏览器WebVR体验。
Three.js是一个3DJavaScript库。封装了底层的图形接口,除了WebGL之外,Three.js还提供了基于Canvas、SVG标签的渲染器。2016年天猫双十一宇宙邀请函中酷炫的“一镜到底”就是用的Three.js实现的。
创建Three.js创建一个Three.js的项目,至少包括:
WebGL和Three.js使用的三维坐标轴遵循“右手坐标系”。使用Three.js创建的场景是三维的,而通常情况下显示屏是二维的。相机它定义了三维空间到二维屏幕的投影方式。针对投影方式的不同,相机又分为正交投影(OrthographicCamera)与透视投影(PerspectiveCamera)。
正交投影,六个参数分别对应x、y,z轴的最小最大值。透视投影,四个参数分别是视野在y-z平面的角度、投影平面宽高比、近平面(沿Z负轴)的距离,远平面(沿Z负轴)的距离。此外项目中加入光源(Light)与阴影(Shadow)会让场景的渲染效果更加丰富逼真。
我们以Three.js官方examples中的WebVR360°全景图为例,看看一个完整的WebVR项目还依赖哪些js。其他VR插件除了引入Three.js外,还引入了:
编写全景图项目引用完Three.js和3个VR插件后,就可以开始编写全景图项目主要代码了。首先需要判断设备是否支持WebVR,不支持就需要在屏幕上提醒用户。开始创建渲染器、场景和相机。接着就是制作360°全景场景,一般可分为球面全景图方式、柱状全景图方式和立方体全景图方式。然后再用Canvas把全景图片源文件转化为所需数量的贴图面,并用THREE.Texture创建纹理贴图对象保存。
因为VREffect.js会渲染左右2个屏幕,左相机对应layers=1的skyBox,所以还需要创建一份右相对应layers=2的skyBoxR。然后加入VRControls、VREffect和按钮。最后监测一下window窗口的大小变化,在requestAnimationFrame中不断监测设备状态并更新到Camera和WebVR渲染上。剩下的就是带上VRHMD设备查看全景图。
注:部分图片来自网络
微信扫码咨询
相关工具
相关文章
相关快讯
推荐
阿里Accio中文版上线!一键搞定复杂采购
2025-08-19 09:13
视频“用嘴编辑”的时代来了,但钱包顶得住吗?
2025-08-15 17:59
智谱新模型GLM-4.5V全面开源,玩家们有福啦!
2025-08-12 17:56
扎心文案+AI插画=爆款!揭秘8万赞视频的制作全流程
2025-08-12 10:08
GPT-5没你想的那么好,附实测体验~
2025-08-11 11:07
一站式搞定AI绘图+视频,AI短片效率飙升的秘密在这儿!
2025-08-08 09:26
打工人新神器!10款国产AI,让你告别996!
2025-08-08 09:24
豆包视觉推理深度体验,AI也能“边看边想”了!
2025-08-08 09:19
300美元的AI男友来了!马斯克的情感生意从女友做到男友
2025-08-01 17:56
Agent智能体:2025年企业新员工,月薪仅需一度电?
2025-07-30 17:49