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

需求背景

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

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

需求分析

1. VR 看房：

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

2. 实时场景展示：

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

3. 自定义标记点：

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

4. 海量标记点创建（MassMarks）：

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

技术方案

技术栈：

• 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 度全景图。

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

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: `
   ${title}
   `, 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 看房和实时场景展示将成为家居行业的新趋势。