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,全景图的技术路线而已- 更多的配置自己研究,后续有空我也会在看看,欢迎交流
