1. 前言
- 最近有人问到这个前端实现这个
vr看房,看车这种的需求,如何实现- 实现的方案大致有2种,一种是通过某些
工具来制作vr/全景图的网页,只要准备好图片就行,其他的都是自动配置,自动生成,然后把生产的网页放到服务器,前端请求获取这个网页的链接,然后显示,小程序用webView的src属性接收就行,其他的vue啥的也都更简单;- 工具可用krpano 生产全景图,3d图,还有其他很多好用的工具,欢迎留言,大家分享
- 另外一种方式就是用第三方的库比如photo-sphere-viewer ,three.js
2. photo-sphere-viewer
1.这里使用photo-sphere-viewer 来讲解,全景图/VR效果
3. 传统方式
- 就是直接写
个html的方式,来说明- 因为用起来是在简单
<head>
<meta charset="utf-8">
<title>全景图</title>
<style>
#viewer {
width: 100vw;
height: 100vh;
}
</style>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.css" />
</head>
<body>
<div id="viewer"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uevent@2/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.js"></script>
<script>
var viewer = new PhotoSphereViewer.Viewer({
container: document.querySelector('#viewer'),
// 图片地址
panorama: './img/A.jpg'
});
</script>
4. 效果
- 效果演示
演示.gif- 因为上传的图片不能超过
10M,所以这个录屏的时候 把这个宽高改下了- 最后的白屏是因为点击了右下角的全屏,录屏软件录不上去,所以白屏了
- 更多功能自己可以研究哦photo-sphere-viewer 来讲解,全景图/VR效果
- 演示的这个全景图,如有侵权,请告知,我会删除
- 代码不多吧,所以就用起来吧
5. vue中使用 环境准备
- 小程序 react uniApp当然都可以使用
- 安装依赖
npm install photo-sphere-viewe --save
- 我这里是 "photo-sphere-viewer":
"^4.6.4",版本
6. 页面使用
- 这里使用了
setup语法糖panorama用来配置全景图的地址- 地址不能直接赋值,下面是
错误的写法
panorama:''../assets/al.jpg"
- 注意 初始化要写在
mounted里面,不要写在created里面
<template>
<div id="viewer"></div>
</template>
<script setup>
import * as PhotoSphereViewer from 'photo-sphere-viewer'
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
import { onMounted, ref } from "vue"
let vrImg = ref()
vrImg = require('../assets/al.jpg')
onMounted(() => {
initViewer()
})
const initViewer = () => {
//全景图展示
var viewer = new PhotoSphereViewer.Viewer({
container: document.querySelector('#viewer'),
panorama: vrImg
});
}
</script>
7. 后记
- 这个只是最简单的使用,指明一个前端搞
vr,全景图的技术路线而已- 更多的配置自己研究,后续有空我也会在看看,欢迎交流
