项目实战：使用 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 * as THREE from "three";
import { ref, onMounted } from "vue";
import gsap from "gsap";

// 1. 创建场景：承载所有 3D 对象的容器
const scene = new THREE.Scene();

// 2. 创建相机：模拟人眼的视角（透视相机更贴近真实视觉）
const camera = new THREE.PerspectiveCamera(
  75, // 视野角度（FOV）
  window.innerWidth / window.innerHeight, // 宽高比
  0.1, // 近裁剪面
  1000 // 远裁剪面
);
camera.position.set(0, 0, 0.01); // 相机初始位置

// 3. 创建渲染器：将 3D 场景渲染到页面
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); // 适配窗口大小

// 4. 挂载渲染器到 DOM
const container = ref<HTMLElement | null>(null);
onMounted(() => {
  if (container.value) {
    container.value.appendChild(renderer.domElement);
    // 持续渲染（动画循环）
    const render = () => {
      renderer.render(scene, camera);
      requestAnimationFrame(render);
    };
    render();
  }
});

2. 全景房间模型实现（Room 类）

全景看房的核心是'立方体全景'：将房间的 6 个面（前、后、左、右、上、下）的纹理贴图映射到立方体几何体上，相机置于立方体中心，模拟沉浸式全景效果。

// Room.ts 核心代码解析
import * as THREE from "three";

export class Room {
  constructor(
    public name: string,
    public roomPrefix: string, // 房间纹理前缀（如 living_r、living_l）
    public textureUrl: string, // 纹理图片路径
    public scene: THREE.Scene,
    public position: THREE.Vector3 = new THREE.Vector3(0, 0, 0), // 房间位置
    public euler: THREE.Euler = new THREE.Euler(0, 0, 0) // 房间旋转角度
  ) {
    // 创建 10x10x10 的立方体几何体（适配全景视角）
    const geometry = new THREE.BoxGeometry(10, 10, 10);
    geometry.scale(1, 1, -1); // 修正纹理方向（解决贴图反转问题）
    // 加载 6 个面的纹理（右、左、上、下、前、后）
    const arr = [
      `${roomPrefix}_r`,
      `${roomPrefix}_l`,
    ];
    // ... (后续代码省略)
  }
}