项目开发中，我们会遇到各种需求，今天我们的需求是实现全景看房，并给房间里对应的场景物品添加标注。

准备素材

我们需要准备各个房间的全景图，为渲染做准备

动态效果

移动端兼容

移动端测试可以正常浏览

配置房间信息

我们通过
roomList来配置房间,
image为房间全景图,
default为当前房间的默认视角
link为label对应的房间，点击对应的label可以跳转到对应的房间
labelList为当前房间对应的标签，鼠标移上去可以显示对应的信息

roomList: [
{
  name: '客厅',
  id: 1,
  image: livingroom,
  default: [0.004462416413474557, 6.200447421781119],
  link: [{
    name: '厨房',
    id: 2,
    position: [0.016901838640870137, 2.824191484956904]
  }, {
    name: '阳台',
    id: 3,
    position: [-0.09078160155478066, 6.208635699116904]
  }, {
    name: '走廊',
    id: 4,
    position: [-0.08338922415879213, 1.4666233295481192]
  },],
  labelList: [
    {
      assetId: '1',
      assetName: '油画',
      position: [-0.13582816064354786, 0.41502126541757445]
    },
    {
      assetId: '2',
      assetName: '茶几',
      position: [-0.4708173515700462, 0.07097928959460549]
    },
    {
      assetId: '3',
      assetName: '沙发',
      position: [-0.3959674179007451, 5.663651604962541]
    },
    {
      assetId: '4',
      assetName: '椅子',
      position: [-0.6779325382830392, 2.324892386928859]
    },
    {
      assetId: '5',
      assetName: '花束',
      position: [-0.2900747817000602, 6.218594448123747]
    }
  ]
},
{
  name: '厨房',
  id: 2,
  image: kitchen,
  default: [0.09328385188665655, 0.6135062081428665],
  link: [{
    name: '客厅',
    id: 1,
    position: [-0.2084227785520698, 4.478063645111686]
  }],
  labelList: [
    {
      assetId: '1',
      assetName: '锅具',
      position: [-0.32040309847985693, 1.2697563771195304]
    },
    {
      assetId: '2',
      assetName: '油烟机',
      position: [0.33306242221675886, 1.5793125466479674]
    }
  ]
},
{
  name: '阳台',
  id: 3,
  image: balcony,
  default: [0.010700120950292824, 0.1715490327792142],
  link: [{
    name: '客厅',
    id: 1,
    position: [-0.20909100758988974, 3.13973647274324]
  }],
  labelList: [
    {
      assetId: '31',
      assetName: '绿植',
      position: [-0.23004977865286058, 1.495660967217504]
    },
    {
      assetId: '32',
      assetName: '盆栽',
      position: [-0.2594667408190994, 5.350830330601267]
    }
  ]
},
{
  name: '走廊',
  id: 4,
  image: corridor,
  default: [-0.022173309349004633, 5.3004805588348445],
  link: [{
    name: '客厅',
    id: 1,
    position: [-0.23694933108856153, 1.6637153034353807]
  }, {
    name: 'A卧室',
    id: 6,
    position: [-0.12898462142555878, 4.771346915257906]
  },{
    name: 'B卧室',
    id: 5,
    position: [-0.16972506617993943, 3.636162534947699]
  },{
    name: '儿童房',
    id: 7,
    position: [-0.15258789207123757, 5.860620394323365]
  },],
  labelList: [
    {
      assetId: '41',
      assetName: '灯开关',
      position: [0.05583900567831912, 1.2559256924742868]
    }
  ]
},
{
  name: 'B卧室',
  id: 5,
  image: elderroom,
  default: [-0.060600660705094844, 4.28014837364676],
  link: [{
    name: '走廊',
    id: 4,
    position: [-0.06382695401593685, 2.4312968468519767]
  },],
  labelList: [
    {
      assetId: '51',
      assetName: '灯开关',
      position: [0.025656577672767522, 3.096746567162901]
    },{
      assetId: '52',
      assetName: '床',
      position: [-0.40524988992018596, 4.575652180649995]
    },{
      assetId: '53',
      assetName: '壁画',
      position: [0.0981070449597663, 4.338252119723118]
    },
  ]
},
{
  name: 'A卧室',
  id: 6,
  image: bedroom,
  default: [-0.37202430179471135, 0.7883401345123922],
  link: [{
    name: '走廊',
    id: 4,
    position: [-0.08569721802629693, 3.125521320871638]
  },],
  labelList: [
    {
      assetId: '61',
      assetName: '灯开关',
      position: [-0.0016850013269975594, 3.232396589929455]
    },
    {
      assetId: '62',
      assetName: '床',
      position: [-0.37202430179471135, 0.7883401345123922]
    },
    {
      assetId: '63',
      assetName: '床头柜',
      position: [-0.3061632949425557, 1.2358397614158223]
    },
  ]
},
{
  name: '儿童房',
  id: 7,
  image: childroom,
  default: [-0.08715790946130575, 4.482227088077283],
  link: [{
    name: '走廊',
    id: 4,
    position: [-0.06382695401593685, 2.4312968468519767]
  },],
  labelList: [
    {
      assetId: '71',
      assetName: '灯开关',
      position: [0.016933996172134425, 2.7674989692129213]
    },{
      assetId: '72',
      assetName: '读物',
      position: [-0.5928811354836303, 5.1803141454412005]
    },{
      assetId: '73',
      assetName: '床',
      position: [-0.537420512703882, 4.000039357027511]
    },{
      assetId: '74',
      assetName: '衣柜',
      position: [-0.053631294847794386, 3.2411977796609963]
    },
  ]
},
]

更新日志

2024年08月23日

移除切换图片时的加载状态

增加切换场景时过场效果

演示地址

vue vr实现全景看房并添加标注

源码下载

项目基于vue3 vite js nodejs16开发，购买代码请确保有相关开发基础

虚拟产品一经售出 概不退款请谅解