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

一、效果

话不多说,先上效果

二、代码

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.rhkb.cn/news/281133.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaSE:数据类型与变量

目录 一、前言 二、数据类型与变量 &#xff08;一&#xff09;字面常量 &#xff08;二&#xff09;数据类型 &#xff08;三&#xff09;变量 1.变量概念 2.语法格式 3.整型变量 3.1整型变量 3.2长整型变量 3.3短整型变量 3.4字节型变量 4.浮点型变量 4.1双精…

REDHAWK——连接(续)

文章目录 前言一、突发 IO1、数据传输①、输入②、输出 2、突发信号相关信息 (SRI)3、多输出端口4、使用复数数据①、在 C 中转换复数数据 5、时间戳6、端口统计①、C 二、消息传递1、消息生产者①、创建一个消息生产者②、发送消息 2、消息消费者①、创建消息消费者②、注册接…

01mysql

登陆mysql 默认数据库 进入&#xff0c;展示&#xff0c;删除 &#xff0c;查看当前正使用的库 select version()查看版本 查看表结构desc 查询 not in不会忽略空 in会自动忽略 like模糊查询 %o%中间带o的 _A%第二个字母是A的 查名字是下划线的 %\_% 排序 order …

罗技G29游戏方向盘试玩拆解,带震动力反馈

1.正好有时间记录下 自己的爱好 一千多的罗技G29游戏方向盘试玩拆解&#xff0c;带震动力反馈&#xff0c;值这个价吗_哔哩哔哩_bilibili 一千多的罗技G29游戏方向盘试玩拆解&#xff0c;带震动力反馈&#xff0c;值这个价吗_哔哩哔哩_bilibili 2.拆解 3.2个大电机 4.主控芯…

docker的部署与安装以及部署一个docker(容器)应用及docker容器常出现的问题

docker 架构图 一、docker的部署与安装 1、在 CentOS 上安装 Docker 移除旧版本&#xff08;如果有的话&#xff09;&#xff1a;sudo yum remove docker docker-client docker-client-latest docker-common docker-latest docker-latest-logrotate docker-logrotate docker-…

MySQL 索引的分类和优化

​ 优质博文&#xff1a;IT-BLOG-CN 索引是什么 &#xff1a; MySQL 官方对索引的定义&#xff1a;索引&#xff08;Index&#xff09;是帮助 MySQL 高效获取数据的数据结构。可以得到索引的本质&#xff1a;索引是数据结构。索引的目的在于提高查询效率。可以简单理解为&#…

【记录39】html element-ui 加载

环境 html使用element-ui组件、用vue框架搭建 方法一&#xff1a; 方法二&#xff08;推荐&#xff09; 将相关资源下载下来&#xff0c;在对应的html文件中相对路径引入。注意&#xff1a;css加载放在js之前

java框架 2 springboot 过滤器 拦截器 异常处理 事务管理 AOP

Filter 过滤器 对所有请求都可以过滤。 实现Filter接口&#xff0c;重写几个方法&#xff0c;加上WebFilter注解&#xff0c;表示拦截哪些路由&#xff0c;如上是所有请求都会拦截。 然后还需要在入口处加上SvlterComponentScan注解&#xff0c;因为Filter是javaweb三大组件之…

基于深度学习的心律异常分类系统设计——算法设计

基于深度学习的心律异常分类系统——算法设计 第一章 研究背景算法流程本文研究内容 第二章 心电信号分类理论基础心电信号产生机理MIT-BIH 心律失常数据库 第三章 心电信号预处理心电信号噪声来源与特点基线漂移工频干扰肌电干扰 心电信号读取与加噪基于小波阈值去噪技术的应用…

PP-Matting——支持多场景精细化高精度人像抠图(C++模型推理)

简介 Matting和分割是图像处理中两个重要的任务&#xff0c;它们在抠图和图像分析中起着不同的作用。 分割方法将图像分成不同的区域&#xff0c;并为每个像素分配一个分类标签&#xff0c;因此其输出是一个像素级别的分类标签图&#xff0c;通常是整型数据。这种方法适用于将…

有ai写文案的工具吗?分享5款好用的工具!

在数字化时代&#xff0c;人工智能&#xff08;AI&#xff09;已渗透到我们生活的方方面面&#xff0c;包括内容创作领域。AI写文案的软件以其高效、便捷的特点&#xff0c;正逐渐受到广大内容创作者、营销人员、甚至普通用户的青睐。本文将为您盘点几款热门的AI写文案软件&…

matlab 最小二乘拟合圆柱

目录 一、算法原理1、算法简介2、参考文献二、代码实现三、结果展示四、测试数据本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫。 一、算法原理 1、算法简介 圆柱拟合步骤主要包括两步: 一是确定柱面模型参数初始值; 二是…

记一次由于buff/cache导致服务器内存爆满的问题

目录 前言 复现 登录服务器查看占用内存进程排行 先了解一下什么是buff/cache&#xff1f; 尝试释放buffer/cache /proc/sys/vm/drop_caches dirty_ratio dirty_background_ratio dirty_writeback_centisecs dirty_expire_centisecs drop_caches page-cluster swap…

关于在CentOS中卸载MySQL

想要卸载MySQL当然要知道自己的MySQL是用那种方法来安装的了&#xff0c;一般来说MySQL的安装方法在市面上有三种 编译安装、YUM安装、RPM安装&#xff0c;下面会介绍到后两种安装的卸载方法 首先查看是否安装MySQL&#xff0c;一般可以看到版本信息就证明安装了 mysql -V 卸载…

Linux虚拟主机如何快速卸载一键安装的网站程序

接到一位用户发送的请求帮助&#xff0c;想要卸载通过Softaculous一键安装的网站程序&#xff0c;但是没有找到地方&#xff0c;根据与该用户的沟通得知是一个小白用户&#xff0c;想要自己搭建一个博客类的网站&#xff0c;了解到Hostease 有适合新用户并且带管理面板的产品Li…

nacos 更新报错“发布失败。请检查参数是否正确”

文章目录 &#x1f50a;博主介绍&#x1f964;本文内容起因解决方案结果 &#x1f4e2;文章总结&#x1f4e5;博主目标 &#x1f50a;博主介绍 &#x1f31f;我是廖志伟&#xff0c;一名Java开发工程师、Java领域优质创作者、CSDN博客专家、51CTO专家博主、阿里云专家博主、清华…

从底层结构开始学习FPGA(0)----FPGA的硬件架构层次(BEL Site Tile FSR SLR Device)

系列目录与传送门 《从底层结构开始学习FPGA》目录与传送门 Xilinx的FPGA&#xff0c;从硬件架构的角度可以划分为6个层次&#xff0c;从底层到顶层依次是&#xff1a; BEL&#xff08;最底层单元&#xff09;SiteTileFSRSLRDevice&#xff08;FPGA芯片&#xff09; 接下来我…

【研究僧总结】回顾第1095个创作日

目录 前言一. 机缘二. 日常三. 展望 前言 感觉刚过1024不久&#xff0c;现在又来个1095创作日 一. 机缘 研究僧一直在找平台做笔记&#xff0c;方便之后的回顾总结&#xff0c;也让各位网友见证你我的成长&#xff0c;相互学习 止不住的写文止不住的成长&#xff0c;大家共同…

Halcon 路标牌识别

文章目录 gray_closing_shape 使用选定的掩码执行灰度值关闭create_planar_uncalib_deformable_model 为未校准的透视匹配创建一个可变形的模型get_deformable_model_params 返回可变形模型的参数find_planar_uncalib_deformable_model 在图像中寻找平面投影不变变形模型的最佳…

面试常问:为什么 Vite 速度比 Webpack 快?

前言 最近作者在学习 webpack 相关的知识&#xff0c;之前一直对这个问题不是特别了解&#xff0c;甚至讲不出个123....&#xff0c;这个问题在面试中也是常见的&#xff0c;作者在学习的过程当中总结了以下几点&#xff0c;在这里分享给大家看一下&#xff0c;当然最重要的是…