aframe 实现WebVR

最新推荐文章于 2023-08-02 11:22:55 发布
最新推荐文章于 2023-08-02 11:22:55 发布
阅读量325 收藏
点赞数
分类专栏： aframe.js webVR three.js 文章标签： webGL three.js vr 全景照片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HSJ0170/article/details/107335146
版权
aframe.js 同时被 3 个专栏收录
1 篇文章 0 订阅
订阅专栏
webVR
1 篇文章 0 订阅
订阅专栏
three.js
1 篇文章 0 订阅
订阅专栏

aframe.js 又是基于Three.js封装;
https://aframe.io/

https://aframe.io/releases/1.0.4/aframe.min.js

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
		<title>hsj</title>
        <script type="text/javascript" src="./aframe.min.js"></script>
    </head>
    <body>
    <a-scene>
	  <a-camera position="0 10 10" far='10000' near='0.5' fov='100'></a-camera>
      <a-sky src="./city.jpg" rotation="180 180 180" ></a-sky>
    </a-scene>
    </body>
</html>

发现没有，three.js使用过的童鞋应该很清楚，使用代码创建场景和相机等，换成html自定义标签，你也可以自定义标签。具体查看官网

demo效果：
在这里插入图片描述

南下狩猎的小花猫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VR探索之——aframe框架 在浏览器显示全景照片
12-27
VR探索之——aframe框架 在浏览器显示全景照片； 原文链接：http://blog.csdn.net/sundayaaron/article/details/53893303
A-Frame的使用 开启WebVR之旅
若水弹丸之地
01-21 7313
简 介 一、什么是A-Frame？ A-Frame 是一个用来构建虚拟现实（VR）应用的网页开源框架，它是基于HTML的，因而对于Web开发者使用起来得心应手。但是如果你认为A-Frame仅仅是一个3D场景渲染引擎或者一个标记语言那就大错特错了，A-Frame 是基于强大的three.js 框架, 同时提供声明式、组件化、可复用的实体组件结构，HTML只是冰山一角，开发者可以自由的使用Ja
A-Frame 前端WebVR以及后端Flask服务器搭建（二）
小陀螺
12-06 403
前面说的只是如何在网页里放置资源，这部分，讲讲交互。总体来说，A-Frame集成了两种交互，第一第二都是基于没有VR设备的交互，分别是模拟鼠标点击交互。第三种就是基于VR手柄的交互。 模拟鼠标光标 在给相机添加光标： &amp;lt;a-camera&amp;gt; &amp;lt;a-cursor&amp;gt;&amp;lt;/a-cursor&amp;gt; &amp;lt;/a-camera&amp;gt
A-Frame 前端WebVR以及后端Flask服务器搭建（一）
小陀螺
06-29 613
最近一直都在搞这些事，坑太多了一个一个去填，收获也很多。做出了一定成果及时总结养成好习惯。 A-Frame这个框架基于webGL中three.js模块，目前踩的坑来看，这是一个未完成的框架，我愿意与它共同成长。 明天再来写。。。...
WebVR与WebXR
wml00000的博客
11-21 821
WebVR技术可以实现在浏览器端接通VR设备，在VR模式下进行交互。
aframe-resonance-audio:使用Aframe的WebVR工具和Google的Resonance Audio引擎（Omnitone）创建逼真的声音VR环境。 将节拍同步与音乐源集成在一起，以随着音乐及时触发动画
04-28
A帧共鸣音频/节拍套件 -最好搭配耳机（正在进行中） 使用Aframe的WebVR工具和Google的Resonance Audio引擎（Omnitone）创建逼真的声音VR环境。 将节拍同步与音乐源集成在一起，以随着音乐及时触发动画。 此项目的...
蔡氏电路matlab仿真代码-aframe-react-demo:通过React，redux演示几乎Aframe（WebVR框架）的基本功能。
05-26
我看了一下Aframe并说了它的功能。 但是我心中提出一个问题： “那么，VR现在能做什么？它适合广泛用于生产/商业用途吗？” 在进行了以下快速研究之后：ReactVR，Aframe，Three.js，elevr ... 我选择了Aframe来制作...
ReactVR实验的集合也可能使用ReasonML和Elm的AFrame和WebVR实验
08-11
React VR实验的集合（也可能使用ReasonML和Elm的A-Frame和WebVR实验）
DataVerse:在AFrame之上构建的WebVR可视化工具
05-04
Dataverse是一个基于WebVR技术的开放平台，可帮助您基于Google表格构建身临其境的体验。 无需编码。 您可以将交互体验分为彼此链接的场景（电子表格中的“标签”）。 对于每个场景，您可以从几种可用的可视化类型中...
aframe-demo:用aframe实现一套简单的VR看房，和VR手机播放器
05-15
aframe-demo用aframe实现一套简单的VR看房，和VR手机播放器.
WebVR 演示
01-13
Oculus 的WebVR 演示代码， WebVR is a browser API used to interface with VR headsets. Working with WebVR directly requires knowledge of JavaScript and WebGL. Interfacing with a VR headset using WebVR is typically done in two phases: Setup. The application detects the headset, described by the VRDevice object, and targets it for presentation. Per-Frame Rendering. Once setup is complete, a requestAnimationFrame handler is used to query pose data, render the WebGL scene for each eye, and submit it to the headset. Though WebVR is an evolving API, a configuration of the API has crystallized that most major browser vendors believe can reach general availability in 2018. Oculus Browser targets this configuration. All of our samples and documentation explain how to use this version of the API and also where we diverge from it and why.
webvr-polyfill, 使用 WebVR，不需要特殊的浏览器生成.zip
09-18
webvr-polyfill, 使用 WebVR，不需要特殊的浏览器生成 WebVR Polyfill 一个 WebVR规范的JavaScript实现。 无论浏览器/设备是否有本地WebVR支持，或者在实现中存在不一致的地方，这个项目确保你的WebVR内容能够在任何平台上工作。看一下基本WebVR示
WebVR简介
yunchao的专栏: HTML5/Chromium/Web, Graphics, Android
03-10 6459
转载请标明出处：http://blog.csdn.net/yunchao_he/article/details/61195801 所谓WebVR，就是VR on Web。它把虚拟现实这项酷炫的技术带到Web领域来，用JavaScrpit来写虚拟现实相关的应用，从而在浏览器或者Web runtime上跨平台运行。
浅谈 WebVR 全景
趣谈前端
10-23 1294
大厂技术坚持周更精选好文前言近年来VR概念越来越火，相信大家在网上都有过VR的浏览体验，比如VR全景看房[1]、VR全景看车[2]、VR全景旅游[3]等等，VR全景给了我们视觉上的沉浸式体验。本文将会简单探究Web VR全景的实现原理，同时也会用threejs实现两个小的demo，希望对大家以后在业务上遇到类似的场景能有所帮助。什么是VR引用维基百科的定义：虚拟现实（英语：virtual ...
webVR技术介绍
凌风子夜
04-03 6120
基于FireFox浏览器的WebVR环境配置 WebVR，即VR on Web。将虚拟现实技术应用到网页中，用JavaScrpit来写虚拟现实相关的程序，从在浏览器平台运行。webVR具有更好的共享性，能提供用户之间的交互。 ...
使用WebVR创建虚拟现实前端体验
最新发布
sybh的博客
08-02 506
WebVR是一种Web技术，它允许用户通过虚拟现实头显（如Oculus Rift、HTC Vive等）或智能手机配合VR头盔体验虚拟现实。它的目标是在Web浏览器中实现跨平台、无需插件的虚拟现实体验。
webvr 的初步认识
持续改变
05-11 1080
webvr 的初步认识
【webAR】用AR.js和A-frame实现webAR – ns2250225 – CSDN博客
测试
12-24 435
文章目录[隐藏]【webAR】用AR.js和A-frame实现webARGithub效果图【webAR】用AR.js和A-frame实现webAR2018年02月14日 12:38:05Immok阅读数：4880更多个人分类：Web所属专栏：web技术实验室版权声明：本文为博主原创文章，未经博主允许不得转载。https://blog.csdn.net/ns2250225/article/detai...
WebVR开发教程——标准入门
热门推荐
Yone的博客
01-11 2万+
WebVR即web + VR的体验方式，本文介绍如何开发一个WebVR网页，在此之前，我们有必要了解WebVR的体验方式。 WebVR体验模式 体验WebVR的方式 WebVR的体验方式可以分为VR模式和裸眼模式 VR模式 1.Mobile VR 如使用cardboard眼镜来体验手机浏览器的webVR网页，浏览器将根据水平陀螺仪的参数来获取用户的头部倾斜和转动的朝向，
如何在uniapp中引入aframe
05-19
要在uniapp中引入aframe，需要进行以下步骤： 1. 在uniapp项目的根目录下，创建一个名为 `custom-uni-aframe` 的文件夹。 2. 在 `custom-uni-aframe` 文件夹中创建一个新的文件夹，命名为 `components`。 3. 在 `components` 文件夹中创建一个新的文件夹，命名为 `aframe`。 4. 在 `aframe` 文件夹中创建一个名为 `aframe.vue` 的文件。 5. 在 `aframe.vue` 文件中，引入aframe的js和css文件，并编写aframe的代码。例如： ```html <template> <div> <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> </a-scene> </div> </template> <script> export default { name: "aframe", mounted() { // 引入 aframe.js 和 aframe.css const aframeScript = document.createElement("script"); aframeScript.setAttribute("src", "https://aframe.io/releases/1.0.4/aframe.min.js"); document.head.appendChild(aframeScript); const aframeStyle = document.createElement("link"); aframeStyle.setAttribute("rel", "stylesheet"); aframeStyle.setAttribute("href", "https://aframe.io/releases/1.0.4/aframe.min.css"); document.head.appendChild(aframeStyle); }, }; </script> ``` 6. 在需要使用aframe的页面引入aframe组件。例如，在 `index.vue` 页面中： ```html <template> <div> <aframe></aframe> </div> </template> <script> import aframe from "@/custom-uni-aframe/components/aframe.vue"; export default { components: { aframe, }, }; </script> ``` 这样就可以在uniapp中使用aframe了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值