three.js走进WebVR世界(一)之webvr-polyfill.js

最新推荐文章于 2024-08-16 07:46:12 发布
最新推荐文章于 2024-08-16 07:46:12 发布
阅读量2.9k 收藏 3
点赞数
分类专栏： three.js 文章标签： threejs webvr-polyfill.js webvr-polyfill.js的使用 浏览器兼容webvr
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kfyzjd2008/article/details/87254792
版权
本文是three.js走进WebVR系列的第一课，介绍了WebVR的VR模式（Mobile VR和PC VR）及裸眼模式的体验方式。文章强调在不支持WebVR的浏览器中，如360浏览器，会遇到`navigator.getVRDisplays is not a function`的错误。为解决这个问题，文章详细讲解了webvr-polyfill.js的作用和如何引入、使用该库，以确保在不同浏览器中的兼容性。
摘要由CSDN通过智能技术生成

因为这是第一节课，我们在学习之前先稍微讲一下webvr

WebVR的体验方式可以分为VR模式和裸眼模式

VR模式
1.Mobile VR
如使用cardboard眼镜来体验手机浏览器的webVR网页，浏览器将根据水平陀螺仪的参数来获取用户的头部倾斜和转动的朝向，并告知页面需要渲染哪一个朝向的场景。
2.PC VR
通过佩戴Oculus Rift的分离式头显浏览连接在PC主机端的网页，现支持WebVR API的浏览器主要是火狐的 Firefox Nightly和设置VR enabled的谷歌chrome beta。
裸眼模式
除了VR模式下的体验方式，这里还考虑了裸眼下的体验浏览网页的方式，在PC端如果探测的用户选择进入VR模式，应让用户可以使用鼠标拖拽场景，而在智能手机上则应让用户可以使用touchmove或旋转倾斜手机的方式来改变场景视角。

学习这个系列课程需要一定的three.js基础，详情请移步three.js

首先我们先来认识一下webvr-polyfill.js，它是做什么的。

由于WebVR API还没被各大主流浏览器支持，因此需要引入webvr-polyfill.js来支持WebVR网页，
它提供了大量VR相关的API，比如Navigator.getVRDisplay()获取VR头显信息的方法。

如果没有在你的项目中加入这个库，那么在没有支持webvr的浏览器中。比如 36x浏览器。那么你开发者模式下可以看到：

最低0.47元/天 解锁文章
人工智能-肥鹅
关注
专栏目录
基于Three.js的WebXR渲染入门
xiangzhihong8的专栏
08-19 1100
我不会花太多时间讨论 Three.JS 渲染管道的工作原理，因为它在互联网上有详细记录（例如，我将在下图中列出基础知识，以便更容易理解各个部分的去向。
webvr-polyfill, 使用 WebVR，不需要特殊的浏览器生成.zip
09-18
webvr-polyfill, 使用 WebVR，不需要特殊的浏览器生成 WebVR Polyfill 一个 WebVR规范的JavaScript实现。 无论浏览器/设备是否有本地WebVR支持，或者在实现中存在不一致的地方，这个项目确保你的WebVR内容能够在任何平台上工作。看一下基本WebVR示
webvr-polyfill
weixin_30847865的博客
04-24 164
https://github.com/googlevr/webvr-polyfill 转载于:https://www.cnblogs.com/guochen/p/6755724.html
vr.js 开源项目安装与使用指南
最新发布
gitblog_00444的博客
08-16 541
vr.js 开源项目安装与使用指南 vr.jsNPAPI plugin to expose fun VR devices to Javascript.项目地址:https://gitcode.com/gh_mirrors/vr/vr.js 目录结构及介绍 在克隆或下载vr.js项目之后,你会看到以下主要文件和目录: bin: 包含用于不同平台（如Windows和Mac）上安装NPAPI插件的脚...
webvr-polyfill:立即使用WebVR，无需特殊的浏览器构建
04-12
WebVR Polyfill JavaScript实现。 该项目可确保您的WebVR内容在任何平台上均可工作，无论浏览器/设备是否具有本机WebVR支持，或实现中存在不一致之处。 看一下使用此。 正在安装 脚本 从下载该构建，并将其作为脚本标签包括在内，或使用CDN。 您也可以在与webvr-polyfill.min.js相同的位置使用缩小的文件。 < script src =' webvr-polyfill.js ' > </ script > <!-- or use a link to a CDN --> < script src =' https://cdn.jsdelivr.net/npm/webvr-polyfill@latest/build/webvr-polyfill.js ' > </ script > npm 如果你使用像一个构建工具或 ，安装它通过 。
使用 Polyfill 而不再是 bable 来实践js新特性
06-02 5641
现状 我们想要用 ES6 语法来写 JavaScript。然而由于我们需要兼容老版本的浏览器，那些浏览器不支持 ES6，我们需要解决这个问题。 有一个标准的做法是：写 ES6 代码 → 将所有代码编译成 ES5 的（比如通过 Babel）→ 再将编译后的代码加载到浏览器执行。 这可能已经不再是最有效率的方式了。因为用这种方式，我们强制最新的浏览器运行旧代码，实际上它们完全可以运行最新的代码。
polyfill.min.js
03-19
解决IE9无法使用promise的js脚本，引入后，还需跟browser.js配合使用
three.min.js和webvr-polyfill.min.js
01-26
在本篇中，我们将深入探讨两个重要的JavaScript库——"three.min.js"和"webvr-polyfill.min.js"，它们在WebVR开发中扮演着关键角色。 **一、three.min.js** `three.min.js`是Three.js库的压缩版本。Three.js是一个...
three.js走进WebVR世界(二)之VREffect.js与VRControls.js
kfyzjd2008的博客
03-06 2444
上节课已经大致讲解了webvr。所以我们这里不再赘述。 那么我们直接进入正题，首先了解一下VREffect.js 它是做什么的。 VR 分屏器，这是 three.js 的一个场景分屏的渲染器，提供戴上 VR 头显的显示方式，VREffect.js 重新创建了左右两个相机， 对场景做二次渲染，产生双屏效果。 VREffect库的使用有一下两点 一、把渲染器传入VREffect然后设...
vr-tmpl:基本threejs WebVR模板
05-01
script src =" js/webvr-polyfill.js " > </ script > < script src =" js/VRHMD.js " > </ script > < script src =" js/VREffect.js " > </ script > < script src =" js/...
polyfill-ie8.min.js
03-19
polyfill-ie8.min.js可以增强ie8在js方面的兼容性，大家可以下载使用。
polyfill.min.js下载
04-27
Babel 默认只转换新的 JavaScript 句法，polyfill.min.js可以转换新的 API ，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象
polyfill.js:一个为 polyfill.js 客户端框架提供服务的 node.js 应用程序
06-18
polyfill.js 版本：2.0.0 版权所有 2015 詹姆斯布鲁蒙德 根据 ISC 获得许可 一个 JavaScript Polyfill 框架 polyfill.js 是一个非常轻量级的JavaScript 框架，用于替换过时浏览器中缺失的功能。 只需将以下脚本标记添加到您的文档即可加载它： < script type =" text/javascript " src =" http://polyfill.herokuapp.com/core " > </ script > polyfill.js 的核心非常小，你只需要加载你需要的 polyfill。 例如，如果你想在你的应用程序中使用 localStorage、EventSource 和 Array.prototype.forEach，你告诉 polyfill.js 你需要它们，它检查你是否已经拥有它们，然后只加载你
browser-polyfill.min.js
09-16
babel转换Set、Maps、Proxy、Reflect、Symbol、Promise、Iterator、Generator、 等全局对象
Polyfill是一个js库,主要抚平不同浏览器之间对js实现的差异
weixin_41711593的博客
11-07 1713
Polyfill是一个js库,主要抚平不同浏览器之间对js实现的差异
js相关方法的polyfill
weixin_33739627的博客
12-19 363
assign if(typeof Object.assign != 'function'){ Object.assign = function(target){ 'use strict'; if(target == null){ throw new TypeError('Cannot convert undefined or null to object'); ...
通过polyfill了解JS(一)
weixin_34064653的博客
09-14 1442
Number.isNaN // window.isNaN('a') true if(!Number.isNaN) { Number.isNaN = function(n) { return ( typeof n === 'number' && window.isNaN(n) ) } } 复制代码O...
Three.js与Webpack实战：构建3D地图教程视频详解
Three.js是一个强大的JavaScript库，专用于在Web浏览器中创建3D图形，而Webpack则是一个现代的模块打包工具，用于管理和优化前端项目的资源。以下章节概述了教程的主要内容： 1. **课程介绍**：首先，视频介绍了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

人工智能-肥鹅

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

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

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

打赏作者

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

抵扣说明：

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

余额充值