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

VueVirtuoso
2,090 阅读3分钟

需求背景

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

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

image.png

需求分析

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

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

avatar
文章
阅读
粉丝