WebXR实践——利用aframe框架浏览器展示全景图片

news2024/9/22 5:39:39

一、效果

话不多说,先上效果

二、代码

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>360&deg; Image</title>
    <meta name="description" content="360&deg; Image - A-Frame">
    <script src="./aframe-master.js"></script>
  </head>
  <body>
    <a-scene>
      <a-sky src="360.jpg" rotation="0 -130 0"></a-sky>
      <!-- 添加音频 -->
      <a-sound src="sea.mp3" autoplay="true" loop="true"></a-sound>
    </a-scene>
  </body>
</html>

aframe-master.js下载链接aframe/dist/aframe-master.js at v1.0.4 · aframevr/aframe · GitHubicon-default.png?t=N7T8https://github.com/aframevr/aframe/blob/v1.0.4/dist/aframe-master.js

全景图片(就是上面代码中的360.jpg)

图片来源于:全景图 - 搜索 图片 (bing.com)

音频来源于:柔美抒情(可做我骄傲我是中国人背景音乐)_柔美抒情_音频素材免费下载_mp3格式-音素阁 (yinsuge.com)

项目结构 

 

 选择open in default browser,出现白屏

 三、问题解决

1、在vscode终端输入npm install -g live-server

2、输入live-server,出现以下页面

3、选择自己的index.html所在文件打开,我这里是点击log,成功出现以下页面

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1535082.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【QT入门】 Qt槽函数五种常用写法介绍

声明&#xff1a;该专栏为本人学习Qt知识点时候的笔记汇总&#xff0c;希望能给初学的朋友们一点帮助(加油&#xff01;) 往期回顾&#xff1a; 【QT入门】实现一个简单的图片查看软件-CSDN博客 【QT入门】图片查看软件(优化)-CSDN博客 【QT入门】 lambda表达式(函数)详解-CSDN…

odoo扩展导出pdf功能

1. 说明: odoo原生导出功能扩展导出pdf文件功能, 如有额外需求请联系博主 2. 版本说明: odoo版本: odoo15 其他odoo版本未进行测试,如有需要自行测试 3. 地址: 该补丁代码放在github仓库, 地址: https://github.com/YSL-Alpaca/odoo_export_pdf 4. 改补丁依赖于第三方软件wkh…

数学建模(灰色关联度 python代码 案例)

目录 介绍&#xff1a; 模板&#xff1a; 案例&#xff1a;哪些原因影响结婚率 数据标准化&#xff1a; 灰色关联度系数&#xff1a; 完整代码&#xff1a; 结果&#xff1a; 介绍&#xff1a; 灰色关联度是一种多指标综合评价方法&#xff0c;用于分析和评价不同指标之…

【MySQL】对表的相关操作(DDL)

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前学习计网、mysql和算法 ✈️专栏&#xff1a;MySQL学习 &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章对你有帮助的话 欢迎 评论&#x1f4ac…

软件杯 深度学习 大数据 股票预测系统 - python lstm

文章目录 0 前言1 课题意义1.1 股票预测主流方法 2 什么是LSTM2.1 循环神经网络2.1 LSTM诞生 2 如何用LSTM做股票预测2.1 算法构建流程2.2 部分代码 3 实现效果3.1 数据3.2 预测结果项目运行展示开发环境数据获取 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天…

AI助力生产制造质检,基于YOLOv5全系列【n/s/m/l/x】参数模型开发构建工业生产制造场景下的瓷砖瑕疵检测识别分析系统

瓷砖生产环节一般经过原材料混合研磨、脱水、压胚、喷墨印花、淋釉、烧制、抛光&#xff0c;最后进行质量检测和包装。得益于产业自动化的发展&#xff0c;目前生产环节已基本实现无人化。而质量检测环节仍大量依赖人工完成。一般来说&#xff0c;一条产线需要配数名质检工&…

塔楼VR火灾逃生应急安全教育突破了传统模式

城镇化的高速发展&#xff0c;给消防安全带来了严峻的挑战&#xff0c;尤其是人员密集的办公场所&#xff0c;如何预防火灾发生&#xff0c;学习火灾成因&#xff0c;减少火灾发生避免不必要的损失&#xff0c;成为安全应急科普的重中之重。 通过模拟真实的办公场所火灾场景&am…

JVM监控工具

JVM监控工具 jps 查看系统中运行的java进程id PS D:\practise\test> jps 22672 Jps 13688 RemoteMavenServer36 1068 14188 TestApplication PS D:\practise\test> jmap 用来查看进行内存信息&#xff0c;实例个数以及占用内存大小 jmap -histo 进程id PS D:\prac…

Python使用PaddleSpeech实现语音识别(ASR)、语音合成(TTS)

目录 安装 语音识别 补全标点 语音合成 参考 PaddleSpeech是百度飞桨开发的语音工具 安装 注意&#xff0c;PaddleSpeech不支持过高版本的Python&#xff0c;因为在高版本的Python中&#xff0c;飞桨不再提供paddle.fluid API。这里面我用的是Python3.7 需要通过3个pip…

华为北向网管NCE开发教程(5)打包org.omg.CosNotification找不到

1问题描述 在IDE中&#xff0c;代码能正常运行&#xff0c;但是打包的时候&#xff0c;会抱不到一些类 2问题原因 导入的本地包中&#xff0c;能在IDE中找到&#xff0c;但是在使用maven打包时&#xff0c;maven找不到这些依赖包 3解决办法 将依赖包通过maven安装到maven…

基于python+vue灾害应急救援平台flask-django-php-nodejs

灾害应急救援平台的目的是让使用者可以更方便的将人、设备和场景更立体的连接在一起。能让用户以更科幻的方式使用产品&#xff0c;体验高科技时代带给人们的方便&#xff0c;同时也能让用户体会到与以往常规产品不同的体验风格。 与安卓&#xff0c;iOS相比较起来&#xff0c;…

python银行柜台管理系统flask-django-php-nodejs

相比于以前的传统手工管理方式&#xff0c;智能化的管理方式可以大幅降低银行的运营人员成本&#xff0c;实现了银行柜台的标准化、制度化、程序化的管理&#xff0c;有效地防止了银行柜台的随意管理&#xff0c;提高了信息的处理速度和精确度&#xff0c;能够及时、准确地查询…

Linux:Prometheus+Grafana+睿象云告警平台(3)

在上一章我进行了Prometheus和Grafana的基础搭建以及部署 Linux&#xff1a;Prometheus的源码包安装及操作&#xff08;2&#xff09;-CSDN博客https://blog.csdn.net/w14768855/article/details/136855988?spm1001.2014.3001.5501 1.注册 在监控中必不可少的就是监控告警&am…

螺旋卫星通信天线设计与有限元分析matlab仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 卫星搭载用于通讯的螺旋型天线&#xff0c;卫星尺寸&#xff1a; 10cm*10cm*30cm&#xff1b;天线类型&#xff1a;螺旋&#xff1b;天线UHF&#xff08;约1GHz – 3GHz&#…

【精彩回顾】百度智能云千帆产品3月21日发布会

3月21日&#xff0c;AI Cloud Day&#xff1a;百度智能云千帆产品发布会在北京举办。会议聚焦百度智能云千帆大模型平台最新进展&#xff0c;分享思考与实践。百度智能云在发布会期间宣布&#xff1a; >>满足企业“效价比”核心诉求&#xff0c;千帆ModelBuilder大模型服…

clickhouse sql使用

1、arrayMap(fun1,arr1)使用 第一个参数是一个 lambda 函数&#xff0c;第二个参数是一个集合 eg、select arrayMap(x->x1,[1,2,3]) 对集合中每个数1 2、arrayJoin(arr1) 将集合由行转列 eg、 select arrayJoin([1,2,3]) eg、select arrayJoin(arrayMap(x->x1,[1,2,3])) …

学工系统0day挖掘-危害拉满

前言: 21年的挖的漏洞了 漏洞均已提交且均已修复,这里文章只做技术交流 正文: 漏洞挖掘过程: 起因是这样的 20年简单挖了一下这个学校,但是没把shell拿了 后面随着学习21年又回来看了看这个系统,果然发觉了很多新的东西,脱敏了就写文章下。 漏洞1:未授权批量挖掘:…

【C++】---string的模拟

【C】---string的模拟 一、string类实现1.string类的构造函数2.swap&#xff08;&#xff09;函数3.拷贝构造函数4.赋值运算符重载5.析构6.迭代器7.operator[ ]8.size9.c_str&#xff08;&#xff09;10.reserve&#xff08;&#xff09;11.resize&#xff08;&#xff09;12.p…

BetterDisplay Pro:让屏幕管理更高效、更便捷

BetterDisplay Pro是一款功能强大的显示器管理软件&#xff0c;适用于Windows和Mac操作系统。其主要功能包括显示器校准、自动校准、多种预设模式、手动校准以及可视化数据等。 具体而言&#xff0c;这款软件可以根据用户的需求和环境条件调整显示器的颜色、亮度和对比度等参数…

Java项目:68 ssm0校园美食交流系统+vue

作者主页&#xff1a;舒克日记 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 主要功能包括管理员&#xff1a;首页、个人中心、美食分类管理、美食信息管理、用户管理、管理员管理、论坛中心、系统管理。 前台首页&#xff1a;首…