VR全景看房实现场景房间切换效果

vr全景看房，在实现VR全景查看房间后，我们还需要进行VR全景看房实现场景房间切换效果。

创建多个房间

VR全景看房，要切换房间，首先要有多个房间可供切换，所以我们需要创建多个房间。
因为要创建多个房间，所以我们需要一个房间函数

class Room {
  constructor(
      name,
      roomIndex,
      textureUrl,
      position = new THREE.Vector3(0, 0, 0),
      euler = new THREE.Euler(0, 0, 0)
  ) {
    this.name = name;
    // 添加立方体
    const geometry = new THREE.BoxGeometry(10, 10, 10);
    geometry.scale(1, 1, -1);
    
    var arr = [
      `${roomIndex}_l`,
      `${roomIndex}_r`,
      `${roomIndex}_u`,
      `${roomIndex}_d`,
      `${roomIndex}_b`,
      `${roomIndex}_f`,
    ];
    var boxMaterials = [];

    arr.forEach((item) => {
      // 纹理加载
      let texture = new THREE.TextureLoader().load(`${textureUrl}/${item}.jpg`);
      // 创建材质
      if (item === `${roomIndex}_u` || item === `${roomIndex}_d`) {
        texture.rotation = Math.PI;
        texture.center = new THREE.Vector2(0.5, 0.5);
        boxMaterials.push(new THREE.MeshBasicMaterial({map: texture}));
      } else {
        boxMaterials.push(new THREE.MeshBasicMaterial({map: texture}));
      }
    });
    const cube = new THREE.Mesh(geometry, boxMaterials);
    cube.position.copy(position);
    cube.rotation.copy(euler);
    scene.add(cube);
  }
}

创建房间

创建房间，我们需要设置房间的位置，房间纹理贴图的目录，以及房间的名称。

  let mainPosition = new THREE.Vector3(-25, 0, 2);
  let mainIndex = 18;
  let mainUrl = "./img/bedroom";
  const main = new Room(
      "主卧",
      mainIndex,
      mainUrl,
      mainPosition
      // mainEuler
  );

创建房间标签

房间创建完成以后，我们需要创建房间的标签，通过点击这个标签来实现房间的切换，为了避免标签受到视角的影响，这里使用精灵材质来创建标签，通过canvas来绘制我们的标签

创建标签需要标签文字以及标签所在的位置

const canvas = document.createElement("canvas");
canvas.width = 1024;
canvas.height = 1024;
const context = canvas.getContext("2d");
this.context = context;
context.fillStyle = "rgba(100,100,100,1)";
context.fillRect(0, 256, 1024, 512);
context.textAlign = "center";
context.textBaseline = "middle";
context.font = "bold 200px Arial";
context.fillStyle = "rgba(255,255,255,1)";
context.fillText(text, canvas.width / 2, canvas.height / 2);

let texture = new THREE.CanvasTexture(canvas);

const material = new THREE.SpriteMaterial({
  map: texture,
  color: 0xffffff,
  alphaMap: texture,
  side: THREE.DoubleSide,
  transparent: true,
  // blending: THREE.AdditiveBlending,
});
this.mesh = new THREE.Sprite(material);
this.mesh.scale.set(0.5, 0.5, 0.5);
this.mesh.position.copy(position);

给标签添加点击事件

给标签添加点击事件，点击标签后我们来进行后续处理，通过射线拾取我们来获取鼠标点击了哪个标签，再根据标签进行房间切换

window.addEventListener("click", (event) => {
  this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  this.mouse.y = -((event.clientY / window.innerHeight) * 2 - 1);
  this.raycaster.setFromCamera(this.mouse, camera);
  event.mesh = this.mesh;
  event.spriteCanvas = this;
  const intersects = this.raycaster.intersectObject(this.mesh);
  if (intersects.length > 0) {
    this.fns.forEach((fn) => {
      fn(event);
    });
  }
});

标签点击切换房间

我们通过监听标签点击来获取点击了哪个标签，然后进行房间切换，切换房间就是切换相机的位置，这里使用gsap补间动画，来增加一个摄像机切换场景的效果。

gsap.to(camera.position, {
  x: mainPosition.x,
  y: mainPosition.y,
  z: mainPosition.z,
  duration: 1,
});

VR全景看房视频教程

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

VR全景看房演示地址

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

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

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

请确保有一定的代码基础

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

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

完竣世界 -关注前端分享心得