three - 2 - IT机房案例

代码git地址：https://github.com/buglas/threejs-lesson

知识点

• 场景 Scene
• 透视相机 PerspectiveCamera
• 基础材质 MeshBasicMaterial
• 几何体 BufferGeometry
• 网格对象 Mesh
• 渲染对象 WebGLRenderer
• 轨道控制器 OrbitControls

项目概述

按理说，学习一门新技术的时候，没有一入门就实战的。

但是，有个三维机房的案例，确实很适合一入门就实战，因为它是很简单，很经典，也很适合我们统揽全局，看一下threejs 是如何实战的。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zdCK57bk-1653464897384)(images/1-1648868935945.gif)]

等说完这个案例，我们会从基础慢慢说threejs。

1-IT机房简介

在一些安全要求比较高的企业，比如电信、网通、移动等，都有自己的独立服务器，而不是使用阿里云、腾讯云之类的第三方服务器。

这种大企业的服务器可能很多，需要装进IT 机柜里。

一般小点的企业的服务器需要二三十个机柜，而大的则需要上千个机柜。

IT 机房就是用于放置这些机柜的房间。

2-三维IT机房

随着科技的进步和信息化进程的推进，IT机房的重要性越来越高，企业需要对IT机房进行更加妥善的管理和监控，比如实时监控机房的温度和湿度。

现在市面上好点的IT 机柜都可以将其内部数据同步到服务端，这个时候，虚拟现实的三维IT机房便有了用武之地。

三维IT机房可以将机房数据可视化，让企业更好的监控和管理IT 机柜。

3-项目需求

当前这个项目先不整太复杂了，毕竟现在还是入门阶段，以后再逐步深入。

咱们先说几个IT 机房的几个常见功能：

1. 在前端页面对IT 机房进行三维展示。
2. 当鼠标划入IT 机柜的时候，提示当前机柜的详细信息。
3. 一键显示机房中过热的机柜。

react+ts+threejs 开发三维IT机房

react+ts 是我当前所知的大部分企业开发三维项目的标配，所以我着这里就选择了react+ts。

1-1-建模思路

• 简化模型，能用贴图表现的细节，就用贴图。这样可提高渲染速度。
• 将光效融入贴图中，即模型贴图后便具备光效和体感。这样在three 中就无需打灯，即可提高开发速度，亦可提高渲染效率。

1-2-建模软件

现在市面上可以3d建模的软件有很多，3dsMax、ZRender、C4D 都可以。

我当前用的3dsMax 版本是2018，无法导出gltf 文件，所以还需要安装一个gltf 文件导出插件。

一般公司都是有专门的建模师。

1-3-模型文件

GLTF 模型文件包含了整个场景的数据，比如几何体、材质、动画、相机等。

GLTF 模型在使用起来，要比传统的obj 模型方便很多。

在导出GLTF模型后，一般会包含以下文件：

• gltf 模型文件
• bin文件
• 贴图文件

1-4-规范模型的结构和命名

在建模软件中，同一类型的模型文件可以放入一个数组里，数组可以多层嵌套。

当前的机房模型比较简单，我就没有使用数组，所有的Mesh对象都是平展开的。

为了便于访问和区分模型，需要对模型进行规范命名，如机房中的IT机柜都是按照cabinet-001、cabinet-002、cabinet-003 命名的。

假设IT机柜的名称都是唯一的，那我们便可以基于这个名称从后端获取相应机柜的详细信息。

1.5 构建项目

npx create-react-app 02-machineroom --template typescript
npm install three @types/three --save

npm run start

调整一下ts的配置文件，取消strict 模式。因为如果strict为true，用threejs 写程序时，会比较麻烦。

tsconfig.json

{
   
  "compilerOptions": {
   
    ……
    // "strict": true,
    ……
  },
  ……
}

如果当前的vscode编辑器还无法对tsx 文件做格式化，可以安装一个Prettier - Code formatter 插件。

• react 18 对react 做了更新，index.tsx需要这样写：

import {
    createRoot } from "react-dom/client";
import "./index.css";
import App from "./App";

const container = document.getElementById("root");
const root = createRoot(container);
root.render(<App />);

创建models 文件夹，将之前的模型文件放进去。同理，在public文件夹里放一份。

在App.tsx中创建canvas画布

• App.tsx

import React from 'react';
import './App.css';
 
class App extends React.Component {
  // 建立canvas 画布
  render() {
    return <div className="App">
      <canvas id='canvas'></canvas>
    </div>
  }
}

export default App;

设置css样式，让App组件充满窗口。

• index.css

html{
   
  height: 100%;
}
body{
   
  height: 100%;
  margin