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

最新推荐文章于 2024-05-20 22:43:05 发布

平平无奇 > _ <

最新推荐文章于 2024-05-20 22:43:05 发布

阅读量701

点赞数 5

文章标签：前端框架前端

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_53141315/article/details/136912093

版权

一、效果

话不多说，先上效果

二、代码

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 · GitHubhttps://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，成功出现以下页面

平平无奇 > _ <

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
WebXR实践——利用aframe框架浏览器展示全景图片

浏览器展示全景图片，可移动拖拽
复制链接

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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