VR全景看房实现场景房间切换效果，当我们实现了房间切换后，我们还需要添加一个小地图，小地图的作用就是标记位置，告诉用户自己当前所处的位置

推荐

推荐新的方法：vue vr实现全景看房并添加标注，兼容移动端

创建地图

这里使用一个图片作为小地图，定位到左下角，用来表示房间的房型，以及当前用户的位置。

切换房间是地图也跟着切换

当我们监听到房间标签被点击后，我们在切换房间的同时，还需要让左下角的房间地图也跟着切换，我们通过修改左下角地图上的标签坐标来调整位置

text.onClick(() => {
    console.log("厨房");
    gsap.to(camera.position, {
      x: kitPosition.x,
      y: kitPosition.y,
      z: kitPosition.z,
      duration: 1,
    });
    moveTag("厨房");
});

定义地图小图标

事先定义好小图标在每个房间的位置

let positions = {
  客厅: [100, 110],
  厨房: [180, 190],
  阳台: [50, 50],
  卧室: [160, 40],
  走廊: [150, 90],
};

切换小图标的位置

当我们执行房间切换的时候，获取房间的名称，根据房间的名称获取坐标，将定位小图标移动到对应的房间中，这里我们给移动添加一个动画，使用gsap补间动画实现移动

  function moveTag(name) {
   let positions = {
      客厅: [100, 110],
      厨房: [180, 190],
      阳台: [50, 50],
      卧室: [160, 40],
      走廊: [150, 90],
    };
    if (positions[name]) {
      gsap.to(tagDiv.value, {
        duration: 1,
        x: positions[name][0],
        y: positions[name][1],
        ease: "power3.inOut",
      });
    }
  }

小地图切换效果实现后，我们就需要对加载进行优化了，因为vr看房需要用到很多图片，所以我们需要给用户一个资源加载进度反馈告诉用户当前图片加载情况，VR全景看房全局加载进度管理实现页面loading

VR全景看房教程

当前内容为 threejs视频教程 Three.js可视化企业实战WEBGL课 -全景看房与科技展馆-房间切换之地图动画-学习笔记

VR全景看房演示地址

vue3 VR全景看房实例演示地址

vue3 全景看房完整实例代码下载

vue3 全景看房实例代码开发环境基于vue3 vite js nodejs 14

请确保有一定的代码基础

当前资源仅为跟随视频教程学习的实践代码非视频教程。

代码效果可以查看上方的演示地址