基于 Vue +three.js +Photo Sphere Viewer + 高德地图实现 VR 效果

点击关注公众号，“技术干货” 及时达！

需求背景

随着科技的进步，虚拟现实（VR）技术在家居行业的应用越来越普遍。我们项目的目标是通过结合 VR 看房和实时场景展示，提升用户的体验，用户可以在家中便能身临其境地感受房屋的空间布局和氛围。此外，我们希望通过高德地图提供的标记点功能，帮助用户快速定位感兴趣的区域。

业务这边想要实现右边链接的效果阿里云付费全景图，类似VR看房，支持360° x 360°任意旋转，支持自定义添加标注，支持切换场景等功能，效果如下

需求分析

1. 「VR 看房」：

• 用户能够通过 VR 技术查看房屋的内部和外部环境。
• 提供 360 度全景展示，使用户获得沉浸式体验。

• 通过高德地图展示特定区域内的房屋信息。
• 确保场景内容的及时更新，提升信息的准确性和实用性。

• 利用高德地图 API 实现用户自定义标记点，标记感兴趣的房屋。
• 每个标记点配有信息提示框，展示房屋的基本信息。

• 支持在地图上实现批量标记展示，确保用户能够高效获取信息。

技术方案

「技术栈」：

• 「Vue.js」：前端框架，用于构建用户界面。
• 「Photo Sphere Viewer」：用于显示 360 度全景图的组件。
• 「高德地图 API」：提供地图服务和标记点功能。

实施步骤

1. 「项目初始化」：创建新的 Vue 项目，并安装依赖：

   vue create vr-house-view
   cd vr-house-view
   npm install photo-sphere-viewer vue-amap
   

2. 「集成 Photo Sphere Viewer」：在 Vue 组件中使用 Photo Sphere Viewer 显示 360 度全景图。

   <template>
     <div id="photo-sphere-viewer"></div>
   </template>
   <script>
   import PhotoSphereViewer from 'photo-sphere-viewer';
   export default {
     mounted() {
       const viewer = new PhotoSphereViewer({
         container: document.getElementById('photo-sphere-viewer'),
         panorama: 'path/to/your/panorama.jpg', // 替换为你的全景图路径
       });
     },
   };
   </script>
   <style>
   #photo-sphere-viewer {
     width: 100%;
     height: 400px;
   }
   </style>

3. 「高德地图集成」：创建地图组件，并配置高德地图 API。

   <template>
     <div id="map" style="width: 100%; height: 400px;"></div>
   </template>
   <script>
   export default {
     mounted() {
       const map = new AMap.Map('map', {
         center: [116.397428, 39.90923],
         zoom: 13,
       });
     },
   };
   </script>

4. 「添加标记点功能」：创建自定义标记点，并展示房屋信息。

   // 在地图组件中添加标记点
   addMarker(lng, lat, title) {
     const marker = new AMap.Marker({
       position: new AMap.LngLat(lng, lat),
       title: title,
     });
     marker.setMap(this.map);
     marker.on('click', () => {
       this.showInfoWindow(lng, lat, title);
     });
   }
   showInfoWindow(lng, lat, title) {
     const infoWindow = new AMap.InfoWindow({
       content: `<div>${title}</div>`,
       position: new AMap.LngLat(lng, lat),
     });
     infoWindow.open(this.map, new AMap.LngLat(lng, lat));
   }

5. 「实现海量标记点」：从后端获取房屋数据，并在地图上批量生成标记点。

   async fetchProperties() {
     const response = await fetch('/api/properties'); // 替换为你的 API
     const properties = await response.json();
     properties.forEach(prop => {
       this.addMarker(prop.longitude, prop.latitude, prop.title);
     });
   }
   

6. 「结合 VR 效果」：在用户点击特定标记点时，切换至对应的 VR 场景。

   marker.on('click', () => {
     this.viewer.setPanorama(`path/to/vr/${prop.id}.jpg`); // 替换为相应的 VR 场景路径
   });
   

全景图实现使用了 photo-sphere-viewer 插件，它基于three.js和uEvent 2实现

这边实现主要用了 photo-sphere-viewer和他的标记Markers插件

思考与总结

在实现这个项目的过程中，我们关注用户体验的提升。VR 技术让用户更直观地感受到房屋的空间布局，而高德地图的集成则提供了便捷的房屋定位方式。这种结合不仅提升了产品的附加值，也让用户在选择家居产品时感受到更强的参与感。

随着技术的不断发展，我们相信 VR 看房和实时场景展示将成为家居行业的新趋势。

点击关注公众号，“技术干货” 及时达！