three.js全景看房

创建项目

• vue create app
• cd app
• npm add three

App.vue

1 用几何体的方式来实现（贴图6张）

<template>
  <div class="container" ref="container"></div>
</template>
<script setup>
import * as THREE from 'three';
import { onMounted, reactive, ref } from "vue";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

//创建场景
const scene = new THREE.Scene();
//创建相机
let 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 container = ref(null)

//封装渲染函数
const render = () => {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
//添加立方体
const geometry = new THREE.BoxGeometry(10, 10, 10); //几何体 
//存放贴图名称列表
var arr = ["4_l", "4_r", "4_u", "4_d", "4_b", "4_f"];
var 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; //旋转180°
    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.geometry.scale(1, 1, -1);
scene.add(cube);

onMounted(() => {
  // 添加轨道控制器
  const control = new OrbitControls(camera,container.value);
  control.enableDamping = true; //添加阻尼
  //挂载完毕后获取DMO ref="container"
  container.value.appendChild(renderer.domElement);
  render();
})

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

立方体方式实现

用球体方式实现(使用hdr，导入RGBELoader)

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

<script setup>
import * as THREE from 'three';
import { onMounted, reactive, ref } from "vue";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader"; //hdr

//创建场景
const scene = new THREE.Scene();
//创建相机
let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 设置相机位置
camera.position.z = 0.5;
//初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
const container = 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);
})

onMounted(() => {
  // 添加轨道控制器
  const control = new OrbitControls(camera,container.value);
  control.enableDamping = true; //添加阻尼
  //挂载完毕后获取DMO ref="container"
  container.value.appendChild(renderer.domElement);
  render();
})
</script>

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

球体方式实现