微信小程序---实现VR看房效果

最新推荐文章于 2025-02-10 08:12:51 发布

一块西瓜皮啦

最新推荐文章于 2025-02-10 08:12:51 发布

阅读量1.1w

点赞数 7

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.csdn.net/weixin_44431073/article/details/123652239

版权

微信小程序专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了如何利用微信小程序结合Springboot技术实现VR看房功能，包括使用PtGui制作全景图、Pannellum库的前端展示和后端控制器的配合。通过步骤和代码实例，展示了从工具选择到实际应用的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、前言

客户需求需要实现VR看房功能。使用技术为微信小程序+spring boot。

2、工具

① 下载PtGui绘制全景图工具：https://www.jb51.net/softs/743790.html

② 下载Pannellum :https://pannellum.org/download/

3、前端页面

使用web-view标签，src为后端页面地址，id为自定义参数

4、后端方法

html代码

<!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层代码

@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、其他

pannellum的使用方法参考官网：潘内勒姆 (pannellum.org)

全景图制作参考官网：照片拼接软件360度全景图像软件 - PTGui拼接软件

欢迎交流讨论