【前端进阶之旅】项目实战：使用 three.js+vue3+ts 完成 VR 全景看房应用
文章目录
前言
在房地产、家居展示等场景中，VR 全景看房已成为提升用户体验的核心功能。本文将带大家从零到一实战开发一款基于 Three.js、Vue3+TypeScript +WebGL的 VR 全景看房应用，涵盖 3D 场景搭建、房间切换、交互提示等核心功能，帮助前端开发者进阶掌握 3D 可视化开发技能。
一、项目概述与技术栈选择
1. 项目需求
实现多房间（客厅、阳台、厨房）的 3D 全景展示，支持：
- 鼠标拖拽旋转视角，模拟沉浸式看房体验；
- 点击房间标识切换不同房间视角；
- 鼠标悬浮物品显示详情提示；
- 窗口自适应，保证不同设备下的展示效果。
2. 技术栈选择
Three.js：Web 端 3D 图形渲染的核心库，提供场景、相机、渲染器、几何体等基础能力，满足全景看房的 3D 渲染需求；Vue3 + TypeScript：Vue3 的组合式 API 更适合复杂逻辑的组织，TypeScript 提供类型安全，降低 3D 开发中因类型缺失导致的错误；GSAP：轻量级动画库，实现房间切换时的相机平滑移动，提升交互体验；原生 Canvas：用于生成自定义的 3D 精灵（Sprite）纹理，实现房间标识的可视化。
二、项目核心实现步骤
1. 基础环境搭建（Vue3 + Three.js 初始化）
首先在 Vue3 组件中完成 Three.js 核心对象（场景、相机、渲染器）的初始化，这是 3D 应用的基础骨架。
// Index.vue 核心初始化代码import*asTHREEfrom"three";import{ ref, onMounted }from"vue";import gsap from"gsap";// 1. 创建场景：承载所有3D对象的容器const scene =newTHREE.Scene();// 2. 创建相机：模拟人眼的视角（透视相机更贴近真实视觉）const camera =newTHREE.PerspectiveCamera(75,// 视野角度（FOV） window.innerWidth / window.innerHeight,// 宽高比0.1,// 近裁剪面1000// 远裁剪面); camera.position.set(0,0,0.01);// 相机初始位置// 3. 创建渲染器：将3D场景渲染到页面const renderer =newTHREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight);// 适配窗口大小// 4. 挂载渲染器到DOMconst container = ref<HTMLElement |null>(null);onMounted(()=>{ if(container.value){ container.value.appendChild(renderer.domElement);// 持续渲染（动画循环）constrender=()=>{ renderer.render(scene, camera);requestAnimationFrame(render);};render();}});2. 全景房间模型实现（Room 类）
全景看房的核心是 “立方体全景”：将房间的 6 个面（前、后、左、右、上、下）的纹理贴图映射到立方体几何体上，相机置于立方体中心，模拟沉浸式全景效果。
// Room.ts 核心代码解析import*asTHREEfrom"three";exportclassRoom{ constructor(public name:string,public roomPrefix:string,// 房间纹理前缀（如living_r、living_l）public textureUrl:string,// 纹理图片路径public scene:THREE.Scene,public position:THREE.Vector3 =newTHREE.Vector3(0,0,0),// 房间位置public euler:THREE.Euler =newTHREE.Euler(0,0,0)// 房间旋转角度){ // 创建10x10x10的立方体几何体（适配全景视角）const geometry =newTHREE.BoxGeometry(10,10,10); geometry.scale(1,1,-1);// 修正纹理方向（解决贴图反转问题）// 加载6个面的纹理（右、左、上、下、前、后）const arr =[`${ roomPrefix}_r`,`${ roomPrefix}_l`,`