vr全景看房原理以及实现

vr全景看房通过创建多个立方体盒子，并给立方体盒子是6个方位添加图片，将视角设置为立方体盒子中心通过鼠标调整视角视角达到vr全景看房的效果。

动态效果

创建加载进度

创建一个div当我们的资源加载时，显示这些信息给用户返回当前状态，当进度为100%的时候就隐藏信息.

<div class="loading" v-if="progress != 100"></div>
<div class="progress" v-if="progress != 100">
<img src="../assets/loading.gif" alt=""/>
<span>房间加载中：{{ progress }}%</span>
</div>

加载状态

纹理加载进度是通过threejs的 DefaultLoadingManager 来获取.

THREE.DefaultLoadingManager.onProgress = function (item, loaded, total) {
  console.log(item, loaded, total);
  progress.value = new Number((loaded / total) * 100).toFixed(2);
};

初始化场景

// 初始化场景
const scene = new THREE.Scene();

初始化相机

// 初始化相机
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);

设置相机位置

vr看房是在盒子中心查看四周，所以我们将相机位置设为中心点

// 设置相机位置
camera.position.set(0, 0, 0);

创建渲染器

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

const render = () => {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
};
render()

创建立方体

创建立方体盒子，也就是当前我们所在的房间，因为立方体默认是向外展示的，所以我们需要设置立方体的面是向里面的。通过scale来设置。

const geometry = new THREE.BoxGeometry(10, 10, 10);
geometry.scale(1, 1, -1);

设置房间的6个面

引入纹理图片

let textureUrl = './img/balcony'
let roomIndex = 8
var arr = [
  `${roomIndex}_l`, //左侧
  `${roomIndex}_r`, //右侧
  `${roomIndex}_f`, //
  `${roomIndex}_b`,//
  `${roomIndex}_u`,//上
  `${roomIndex}_d`,//下
]

创建纹理加载

通过TextureLoader加载我们的纹理图片。

arr.forEach((item) => {
  const texture = new THREE.TextureLoader().load(textureUrl + item + '.jpg')
})

设置材质

将纹理图片加载完成后，创建材质，并将图片设置为纹理图片。

let boxMaterials = []
arr.forEach((item) => {
  const texture = new THREE.TextureLoader().load(textureUrl + item + '.jpg')
  boxMaterials.push(new THREE.MeshBasicMaterial({map: texture}))
})

创建立方体

创建盒子，并将我们上面创建的纹理材质加入到盒子中

const cube = new THREE.Mesh(geometry, boxMaterials);
scene.add(cube);

通过鼠标拖动查看

当我们把盒子创建完成后，我们需要可以拖动鼠标查看周围的场景，这时候我们需要监听鼠标按下事件

监听鼠标

let isMouseDown = false
container.value.addEventListener('mousedown', () => {
  isMouseDown = true
}, false)
container.value.addEventListener('mouseup', () => {
  isMouseDown = false
}, false)
container.value.addEventListener('mouseout', () => {
  isMouseDown = false
})

移动鼠标来实现相机的移动

移动鼠标来实现相机的移动，达到视角移动的效果。

container.value.addEventListener('mousemove', (event) => {
  if (isMouseDown) {
    camera.position.x += event.movementX * 0.002
    camera.position.y += event.movementY * 0.002
    camera.rotation.order = "YXZ";
  }
})

切换场景

VR看房不仅需要查看当前房间，还需要能够查看其他房间，VR全景看房实现场景房间切换效果

VR全景看房视频教程

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

VR全景看房演示地址

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

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

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

请确保有一定的代码基础

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

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