代码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 机房的几个常见功能:
- 在前端页面对IT 机房进行三维展示。
- 当鼠标划入IT 机柜的时候,提示当前机柜的详细信息。
- 一键显示机房中过热的机柜。
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