Vue中用Three.js创建一个3D会议室（一）初步创建_vue+threejs 创建完整会议室三维模型-优快云博客

本文介绍了使用Three.js构建3D会议室的过程，包括场景、相机、灯光的初始化，以及 OrbitControls 轨道控制器的使用。作者分享了在Vue项目中引入Three.js的注意事项，如性能优化和插件应用，同时展示了实时性能监控和3D交互功能。文章适合Three.js初学者阅读，旨在提供一个基础的3D开发实例。

第一章

文章目录

前言
效果展示
初步实现
结束语

前言

最近在研究Three.js 3D开发，正好迎合项目需求做了一个简易的3D会议室，因为完全是第一次开发，也没什么经验，所以虽然经过各种资料搜集以及实践最后完成了一些功能，但是代码逻辑吗嘿嘿，懂得都懂。

效果展示

在这里插入图片描述

看起来是比较空旷，没有往里面加入过多的元素，除了3D效果展示之外，会议室中所有设备都支持移动和角度旋转，并且会执行一定的物理规则校验，如重力以及与墙壁之间的碰撞效果等

初步实现

引入Three.js

对于Vue项目，首先当然是要引入相关依赖，可以采用npm安装或者用sprict标签引入外部资源，这里我就从我采用的方式npm安装来往下进行：
npm i three 安装three.js

import * as THREE from "three";
import {
   
    OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import * as Stats from "three/examples/js/libs/stats.min.js";

对于一个Vue项目中，Three.js我们只是会在部门模块中引用，所以我们最好不要再main.js中全局引用它，而是选择在相关模块的代码中去引用，除了需要引用THREE对象之外，我们可能还需要用到许多three.js的插件，这里我用的方法比较笨，从node_modules中去找相关的插件并引用它，至于如何找到相关插件的位置，可以参考官网中下载来的three.js的目录结构

创建3D场景

在这里有一点需要注意，虽然我们是Vue项目，但是不要将three.js封装的scene、camera等对象保存在data中，这样十分消耗性能，推荐在生命周期mounted中注册，在beforeDestory中注销，代码如下图所示

mounted() {
   
   
    this.scene = null; // 场景
    this.camera = null; // 相机
    this.renderer = null; // 渲染器
    this.stats = null; // 性能检测器
    this.animateAbled = true; // 是否开启帧数动画检测
    this.selectObject = null; // 鼠标点击选中的物体
    this.dragControls = null; // 拖拽对象
    this.cube = null; // 碰撞的对象
    this.selectGroup = null; // 选中的组
    this.init();
    this.loader = new OBJLoader();
    this.mat = new MTLLoader