1 Introduction
Customer needs need to realize the VR viewing function. The technology used is WeChat applet + spring boot.
2. Tools
① Download PtGui panorama drawing tool: https://www.jb51.net/softs/743790.html
② Download Pannellum: https://pannellum.org/download/
3. Front-end page
Use the web-view tag, src is the backend page address, and id is a custom parameter
4. Backend method
html code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A simple example</title>
<#include "${rc.contextPath}/framework/importAdminLTE.html"/>
//引入pannellum的js和css文件
<link rel="stylesheet" href="${rc.contextPath}/static/css/pannellum.css"/>
<script type="text/javascript" src="${rc.contextPath}/static/js/pannellum.js"></script>
<style>
#panorama {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
//创建div放全景图
<div id="panorama"></div>
//接收前端的id 用来指定显示哪一张图片
<div id="temp" name="${data.id}"></div>
<script>
$(function () {
var name = $("#temp").attr("name");
pannellum.viewer('panorama', {
"type": "equirectangular",
"panorama": "${rc.contextPath}/static/image/" + name + ".jpg",//全景图地址
"autoLoad": true,
"haov": 180,//水平
"vaov": 90,//垂直
}
);
});
</script>
</body>
</html>
Controller layer code
@Controller
@RequestMapping("/test")
public class pageController {
@RequestMapping("/test1")
public ModelAndView test1(@RequestParam(value ="id", required = false) String id) {
ModelAndView mv = new ModelAndView();
JSONObject json = new JSONObject();
json.put("id",id);
mv.addObject("data",json);
mv.setViewName("test/test1");
return mv;
}
}
5. Others
Refer to the official website for how to use pannellum: Pannellum (pannellum.org)
Panorama production reference official website: photo stitching software 360-degree panoramic image software-PTGui stitching software
Welcome to exchange and discuss