一、效果
话不多说,先上效果
二、代码
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>360° Image</title>
<meta name="description" content="360° 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,成功出现以下页面