vue3+threejs实现全景看房

安装 Threejs

npm i three

1、第一种方式

效果：

素材截图：

原理：
创建一个正方体 把图贴到6个面，视角进入正方形体内部反转

代码

<template>
  <div class="container" ref="containerRef"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 初始化场景
const scene = new THREE.Scene();

// 初始化 透视 相机  参数1 视角  屏幕宽高比  近端  远端
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
// 设置相机位置
camera.position.z = 0.1;

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

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

// 添加立方体
const geometry = new THREE.BoxGeometry(10, 10, 10);
// const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// const cube = new THREE.Mesh(geometry, material);
// scene.add(cube);

let arr = ["4_l", "4_r", "4_u", "4_d", "4_b", "4_f"]; // 左右  上下 前后
let boxMaterials = [];
arr.forEach((item) => {
  // 纹理加载
  let texture = new THREE.TextureLoader().load(`./imgs/living/${item}.jpg`);
  // 创建材质
  if (item === "4_u" || item === "4_d") {
    texture.rotation = Math.PI; //旋转
    texture.center = new THREE.Vector2(0.5, 0.5); //设置旋转中心
  }
  boxMaterials.push(new THREE.MeshBasicMaterial({ map: texture }));
});
const cube = new THREE.Mesh(geometry, boxMaterials);
// 进入盒子内部  修改z轴
cube.geometry.scale(1, 1, -1);
scene.add(cube);

// 挂载完毕 获取dom
onMounted(() => {
  // 添加控制器
  const contros = new OrbitControls(camera, containerRef.value);
  contros.enableDamping = true;
  containerRef.value.appendChild(renderer.domElement);
  render();
});
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.container {
  width: 100vw;
  height: 100vh;
  background-color: #f0f0f0;
}
</style>

2、 第二种方式

效果：

素材截图：

原理：
hdr图是铺开的矩形，类似世界地图，所以我们要创建的不再是正方体，而是球体，然后把图包裹上去，同理需要翻转进入球体内部

代码：

<template>
  <div class="container" ref="containerRef"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader"; // 加载 hdr需要
// 初始化场景
const scene = new THREE.Scene();

// 初始化 透视 相机  参数1 视角  屏幕宽高比  近端  远端
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
// 设置相机位置
camera.position.z = 0.1;

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

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

// 添加球
const geometry = new THREE.SphereGeometry(5, 32, 32);
const loader = new RGBELoader();
loader.load("./imgs/hdr/Living.hdr", (texture) => {
  const material = new THREE.MeshBasicMaterial({ map: texture });
  const sphere = new THREE.Mesh(geometry, material);
  sphere.geometry.scale(1, 1, -1); // 反转过来  本来是图片包裹在球上的
  scene.add(sphere);
});

// 挂载完毕 获取dom
onMounted(() => {
  // 添加控制器
  const contros = new OrbitControls(camera, containerRef.value);
  contros.enableDamping = true;
  containerRef.value.appendChild(renderer.domElement);
  render();
});
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.container {
  width: 100vw;
  height: 100vh;
  background-color: #f0f0f0;
}
</style>