基于React+Umi4+Three.js 实现3D模型数据可视化
项目效果
💡 Tips：需要对threejs 的基础知识有一定了解，代码中尽量使用ts以及中文注释了。
- 使用umi4+antd快速搭建项目框架。Umi是可扩展的企业级前端应用框架，也是蚂蚁集团的底层前端框架,Umi 以路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。
- 参考开源项目对threejs的api进行基本的封装。建模并不是 Three.js 最核心和擅长的，Three.js 最核心功能是进行 浏览器 3D 场景渲染和交互。
项目地址：github.com/Gzx97/umi-t… 项目效果： 
对于Threejs基本功能的封装
场景Viewer类
我们会在Viewer中封装好 初始化场景、摄像机、渲染器、灯光、鼠标监听，坐标轴、性能面板等。在业务代码中就不需要关注这一部分逻辑。业务代码中我们只需要关注数据与交互即可。对于相关逻辑，代码中皆有注释说明，这一部分代码的编写以及使用需要具备一定3D的基础知识，建议先去使用Threejs创建一个场景实现一两个demo之后就明白这一步的必要性了。
import {
Scene,
PerspectiveCamera,
AxesHelper,
WebGLRenderer,
Camera,
SRGBColorSpace,
AmbientLight,
Raycaster,
Vector2,
} from "three";
import * as THREE from "three";
import mitt, { type Emitter } from "mitt";
import Events from "./Events";
import { throttle } from "lodash";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import Stats from "three/examples/jsm/libs/stats.module.js";
export default class Viewer {
public id: string;
public viewerDom!: HTMLElement;
public scene!: Scene;
public camera!: PerspectiveCamera;
public renderer!: WebGLRenderer;
public controls!: OrbitControls;
public skyboxs!: SkyBoxs;
public animateEventList: any[] = [];
public statsControls!: Stats;
public raycaster!: Raycaster;
public mouse!: Vector2;
public emitter!: Emitter<any>;
public mouseEvent: MouseEvent | undefined;
public raycasterObjects: THREE.Object3D[] = [];
public isDestroy = false;
constructor(id: string) {
this.id = id;
this.initViewer();
}
// TODO:场景、相机、灯光等
}
首先我们把threejs渲染图像的基本要素在Viewer中初始化出来：
private initScene() {
this.scene = new Scene();
}
private initCamera() {
// 渲染相机
this.camera = new PerspectiveCamera(
25,
window.innerWidth / window.innerHeight,
// 1,
1,
2000
);
//设置相机位置
this.camera.position.set(4, 2, -3);
//设置相机方向
this.camera.lookAt(0, 0, 0);
}
private initControl() {
this.controls = new OrbitControls(
this.camera as Camera,
this.renderer?.domElement
);
this.controls.enableDamping = false;
this.controls.screenSpacePanning = false; // 定义平移时如何平移相机的位置 控制不上下移动
this.controls.minDistance = 2;
this.controls.maxDistance = 1000;
this.controls.addEventListener("change", () => {
this.renderer.render(this.scene, this.camera);
});
}
private initLight() {
const ambient = new AmbientLight(0xffffff, 0.6);
this.scene.add(ambient);
const light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 200, 100);
light.castShadow = true;
light.shadow.camera.top = 180;
light.shadow.camera.bottom = -100;
light.shadow.camera.left = -120;
light.shadow.camera.right = 400;
light.shadow.camera.near = 0.1;
light.shadow.camera.far = 400;
// 设置mapSize属性可以使阴影更清晰，不那么模糊
light.shadow.mapSize.set(1024, 1024);
this.scene.add(light);
}
然后使用渲染器把场景以及添加在场景的元素渲染出来。
private initRenderer() {
// 获取画布dom
this.viewerDom = document.getElementById(this.id) as HTMLElement;
// 初始化渲染器
this.renderer = new WebGLRenderer({
logarithmicDepthBuffer: true,
antialias: true, // true/false表示是否开启反锯齿
alpha: true, // true/false 表示是否可以设置背景色透明
precision: "mediump", // highp/mediump/lowp 表示着色精度选择
premultipliedAlpha: true, // true/false 表示是否可以设置像素深度（用来度量图像的分辨率）
// preserveDrawingBuffer: false, // true/false 表示是否保存绘图缓冲
// physicallyCorrectLights: true, // true/false 表示是否开启物理光照
});
this.renderer.clearDepth(); //清除深度缓冲区。在渲染之前，这通常用于重置深度缓冲区，以确保正确的深度测试
this.renderer.shadowMap.enabled = true;
this.renderer.outputColorSpace = SRGBColorSpace; // 可以看到更亮的材质，同时这也影响到环境贴图。
this.viewerDom.appendChild(this.renderer.domElement);
}
因为需要进行鼠标事件监听，所以把鼠标以及射线事件封装进来,并且通过 setRaycasterObjects 方法，传递一个触发鼠标事件的模型范围，可以避免在整个场景中都去触发鼠标事件。这里也可以用一个 Map 去存不同模型的事件，在取消订阅时再移除。
/**注册鼠标事件监听 */
public initRaycaster() {
this.raycaster = new Raycaster();
const initRaycasterEvent: Function = (
eventName: keyof HTMLElementEventMap
): void => {
//这里的container就是画布所在的div，也就是说，这个是要拿整个scene所在的容器来界定的
let getBoundingClientRect = this.viewerDom.getBoundingClientRect();
let offsetWidth = this.viewerDom.offsetWidth;
let offsetHeight = this.viewerDom.offsetHeight;
const funWrap = throttle((event: any) => {
this.mouseEvent = {
...event,
//真正的鼠标相对于画布的位置
x: event.clientX - getBoundingClientRect.left,
y: event.clientY - getBoundingClientRect.top,
};
this.mouse.x =
((event.clientX - getBoundingClientRect.left) / offsetWidth) * 2 - 1;
this.mouse.y =
-((event.clientY - getBoundingClientRect.top) / offsetHeight) * 2 + 1;
this.emitter.emit(
(Events as any)[eventName].raycaster,
this.getRaycasterIntersectObjects()
);
}, 50);
this.viewerDom.addEventListener(eventName, funWrap, false);
};
initRaycasterEvent("click");
initRaycasterEvent("dblclick");
initRaycasterEvent("mousemove");
}
/**自定义鼠标事件触发的范围，给定一个模型组，对给定的模型组鼠标事件才生效 */
public setRaycasterObjects(objList: THREE.Object3D[]): void {
this.raycasterObjects = objList;
}
private getRaycasterIntersectObjects(): THREE.Intersection[] {
if (!this.raycasterObjects.length) return [];
this.raycaster.setFromCamera(this.mouse, this.camera);
// console.log(this.raycaster.intersectObjects(this.raycasterObjects, true));
return this.raycaster.intersectObjects(this.raycasterObjects, true);
}
除了这些基础的功能，还可以添加性能面板、坐标轴、新增地板场景、天空场景等方法，可以根据实际需求灵活编写运用。
模型加载 ModelLoder
模型的加载我们需要用的threejs里面的，GLTFLoader、DRACOLoader 这两个类。 模型加载器 ModelLoder 初始化的时候需要把 Viewer 的实例传进去。 需要注意的是，需要把 draco 从 node_modules 拷贝到项目的 public 目录中去。
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
import BaseModel from "../BaseModel";
import type Viewer from "../Viewer";
type LoadModelCallbackFn<T = any> = (arg: T) => any;
/**模型加载器 */
export default class ModelLoder {
protected viewer: Viewer;
private gltfLoader: GLTFLoader;
private dracoLoader: DRACOLoader;
constructor(viewer: Viewer, dracolPath = "/draco/") {
this.viewer = viewer;
this.gltfLoader = new GLTFLoader();
this.dracoLoader = new DRACOLoader();
// 提供一个DracLoader实例来解码压缩网格数据
// 没有这个会报错 dracolPath 默认放在public文件夹当中
this.dracoLoader.setDecoderPath(dracolPath);
this.gltfLoader.setDRACOLoader(this.dracoLoader);
}
/**模型加载到场景 */
public loadModelToScene(
url: string,
callback: LoadModelCallbackFn<BaseModel>
) {
this.loadModel(url, (model) => {
this.viewer.scene.add(model.object);
callback && callback(model);
});
}
private loadModel(url: string, callback: LoadModelCallbackFn<BaseModel>) {
this.gltfLoader.load(url, (gltf) => {
const baseModel = new BaseModel(gltf, this.viewer);
callback && callback(baseModel);
});
}
}
import type { Object3DExtends } from "@/types";
import * as THREE from "three";
import type { GLTF } from "three/examples/jsm/loaders/GLTFLoader.js";
import type { Material } from "three";
import { clone } from "three/examples/jsm/utils/SkeletonUtils.js";
import type Viewer from "../Viewer";
import type { Animate } from "../Viewer";
export default class BaseModel {
protected viewer: Viewer;
public gltf: GLTF;
public object: THREE.Group;
/**模型原始材质 */
public originMaterials: Material[] = [];
public isSaveMaterial = false;
public animaIndex = -1;
public mixer!: THREE.AnimationMixer;
public clock: THREE.Clock;
public animaObject!: Animate;
constructor(gltf: GLTF, viewer: Viewer) {
this.gltf = gltf;
this.viewer = viewer;
this.object = gltf.scene || gltf;
this.clock = new THREE.Clock();
}
/**
* 设置模型比例
* @param x 可以只填写一个参数
* @param y 纵轴缩放
* @param z 横轴缩放
*/
public setScalc(x: number, y?: number, z?: number) {
this.object.scale.set(x, y || x, z || x);
}
public getLength() {
const box = new THREE.Box3();
box.setFromObject(this.object);
const size = box.getSize(new THREE.Vector3());
return size;
}
/**
* 设置模型动画
* @param i 选择模型动画进行播放
*/
public startAnima(i = 0) {
this.animaIndex = i;
if (!this.mixer) this.mixer = new THREE.AnimationMixer(this.object);
if (this.gltf.animations.length < 1) return;
this.mixer.clipAction(this.gltf.animations[i]).play();
// 传入参数需要将函数与函数参数分开，在运行时填入
this.animaObject = {
fun: this.updateAnima,
content: this,
};
this.viewer.addAnimate(this.animaObject);
}
private updateAnima(e: any) {
e.mixer.update(e.clock.getDelta());
}
/**
* 克隆模型
* @param x
* @param y
* @param z
* @returns {*}
*/
public cloneModel([x, y, z] = [0, 0, 0]) {
const newScene = { ...this.gltf };
const newModel = clone(this.object);
newModel.position.set(x, y, z);
this.viewer.scene.add(newModel);
newScene.scene = newModel as any;
return new BaseModel(newScene, this.viewer);
}
/**
* 开启模型阴影 数组中移除阴影
*/
public openCastShadow(names = []) {
this.gltf.scene.traverse((model: Object3DExtends) => {
if (model.isMesh && !names.includes(model.name as never)) {
//它会在渲染对象之前检查每一帧对象是否位于相机的视锥体中。 如果设置为 false，则即使对象不在相机的视锥体中，也会在每一帧进行渲染。
model.frustumCulled = false;
model.castShadow = true; //对象是否渲染成阴影贴图。
}
});
}
/**设置模型颜色 */
public setColor(color = "yellow", opacity = 0.5) {
if (!this.isSaveMaterial) this.originMaterials = [];
this.gltf.scene.traverse((model: Object3DExtends) => {
if (model.isMesh) {
if (!this.isSaveMaterial)
this.originMaterials.push(model.material as Material);
model.material = new THREE.MeshPhongMaterial({
side: THREE.DoubleSide,
transparent: true,
depthTest: false,
depthWrite: true, // 无法被选择，鼠标穿透
color: new THREE.Color(color),
opacity: opacity,
});
}
});
this.isSaveMaterial = true;
}
/**设置模型材质 */
public setMaterial(material = new THREE.MeshBasicMaterial()) {
if (!this.isSaveMaterial) this.originMaterials = [];
this.gltf.scene.traverse((model: Object3DExtends) => {
if (model.isMesh) {
if (!this.isSaveMaterial)
this.originMaterials.push(model.material as Material);
model.material = material;
}
});
this.isSaveMaterial = true;
}
// 还原模型材质
public setDefault() {
let i = 0;
this.gltf.scene.traverse((model: Object3DExtends) => {
if (model.isMesh) {
model.material = this.originMaterials[i];
i++;
}
});
}
}
使用方式
使用这些封装好的方法，可以实现加载外部glb/gltf的模型文件，并且可以播放文件动画，可以根据模型的结构对相应的模块进行交互操作，包含报警、信息展示、模型部分显示隐藏等交互操作。
import React, { useEffect, useRef, useState } from "react";
import * as THREE from "three";
import Viewer, { Animate } from "@/modules/Viewer";
import ModelLoader from "@/modules/ModelLoder";
import BoxHelperWrap from "@/modules/BoxHelperWrap";
import styles from "./index.less";
import Floors from "@/modules/Floors";
import { checkNameIncludes, findParent } from "@/utils";
import Event from "@/modules/Viewer/Events";
import { Object3DExtends } from "@/types";
import Popover from "./components/Popover";
const PAGE_ID = "FACTORY_CONTAINER";
const ThreeDemo: React.FC = () => {
const [rackList, setRackList] = useState<THREE.Object3D[]>([]);
const [showPopover, setShowPopover] = useState<boolean>(false);
const [popoverPosition, setPopoverPosition] = useState({ top: 0, left: 0 });
const [popoverData, setPopoverData] = useState({});
let viewer: Viewer;
let modelLoader: ModelLoader;
let boxHelperWrap: BoxHelperWrap;
// 加载
const init = () => {
viewer = new Viewer(PAGE_ID);
viewer.addAxis();
viewer.addStats();
viewer.initRaycaster();
modelLoader = new ModelLoader(viewer);
const floors = new Floors(viewer);
floors.addGird(8, 25, 0x004444, 0x004444);
boxHelperWrap = new BoxHelperWrap(viewer);
viewer.emitter.on(
Event.mousemove.raycaster,
(list: THREE.Intersection[]) => {
onMouseMove(list);
}
);
viewer.emitter.on(Event.click.raycaster, (list: THREE.Intersection[]) => {
onMouseClick(list);
});
};
const checkIsRack = (obj: THREE.Object3D): boolean => {
return checkNameIncludes(obj, "rack");
};
const onMouseClick = (intersects: THREE.Intersection[]) => {
if (!intersects.length) return;
const selectedObject = intersects?.[0].object || {};
selectedObject.visible = !selectedObject.visible;
};
const onMouseMove = (intersects: THREE.Intersection[]) => {
if (!intersects.length) {
boxHelperWrap.setVisible(false);
setShowPopover(false);
return;
}
const selectedObject = intersects[0].object || {};
let selectedObjectName = "";
const findClickModel = (object: THREE.Object3D) => {
if (object.type === "Group") {
selectedObjectName = object.name;
return;
}
if (object.parent && object.type !== "Scene") {
findClickModel(object.parent);
}
};
findClickModel(selectedObject);
const rack = findParent(selectedObject, checkIsRack);
if (rack) {
// console.log(rack);
boxHelperWrap.attach(rack);
updateRackInfo(rack.name);
}
};
const updateRackInfo = (name: string) => {
if (!name) {
setShowPopover(false);
return;
}
const event = viewer.mouseEvent as MouseEvent;
setPopoverPosition({
top: event.y + 10,
left: event.x + 10,
});
setPopoverData({ title: name });
setShowPopover(true);
};
// 修改颜色
const changeWarningColor = (model: THREE.Object3D) => {
model.traverseVisible((item: Object3DExtends) => {
if (item.isMesh) {
item.material = new THREE.MeshStandardMaterial({
metalness: 1.0,
roughness: 0.5,
});
item.material.color = item?.oldMaterial?.warningColor;
}
});
};
// 通过name修改成警告颜色
const changeWarningColorByName = (name: string) => {
console.log(rackList);
const model = rackList.find((item) => item.name === name);
if (model) {
changeWarningColor(model);
}
};
// 加载模型
const initModel = () => {
modelLoader.loadModelToScene("/models/datacenter.glb", (baseModel) => {
// /models/datacenter.glb
// /models/GuiGu-factory.glb
console.log(baseModel);
// 设置基础模型的缩放比例
baseModel.setScalc(0.15);
// 暂时注释掉旋转代码
// baseModel.object.rotation.y = Math.PI / 2;
// 获取实际的模型对象
const model = baseModel.gltf.scene;
model.position.set(0, 0, 0.3);
// 为模型设置名称
model.name = "机房1";
model.uuid = "机房1";
console.log(model);
// 启用基础模型的投射阴影功能
baseModel.openCastShadow();
let rackList: Object3DExtends[] = [];
model.traverse((item) => {
if (checkIsRack(item)) {
rackList.push(item);
}
if (item instanceof THREE.Mesh) {
// 保存原始颜色数据，以及警告颜色
if (item.isMesh) {
item.material.warningColor = {
r: 1,
g: 0,
b: 0,
isColor: true,
};
// 保存旧的材质
(item as Object3DExtends).oldMaterial = item.material;
}
}
});
setRackList(rackList);
// console.log("rackList------", rackList);
// 将 rackList 中的机架设置为 viewer 的射线检测对象
viewer.setRaycasterObjects(rackList);
});
};
useEffect(() => {
init();
initModel();
return () => {
viewer.destroy();
};
}, []);
// 模拟报警测试
useEffect(() => {
setTimeout(() => {
changeWarningColorByName("rackA_3");
}, 5000);
}, [rackList]);
return (
<div className={styles.wrapper}>
<div
id={PAGE_ID}
style={{ width: 1000, height: 1000, border: "1px solid red" }}
></div>
<Popover show={showPopover} {...popoverPosition} data={popoverData} />
</div>
);
};
export default ThreeDemo;
import React from "react";
import styles from "./Popover.less";
import { Descriptions, Typography } from "antd";
export type PopoverProps = {
top?: number;
left?: number;
show?: boolean;
data?: Record<string, any>;
};
const Popover: React.FC<PopoverProps> = ({
top = 0,
left = 0,
show = false,
data = { title: "" },
}) => {
const position = {
top: `${top}px`,
left: `${left}px`,
};
return (
<div
style={{
...position,
display: show ? "block" : "none",
color: "white",
}}
className={styles.wrapper}
>
<Descriptions
labelStyle={{ color: "white" }}
contentStyle={{ color: "white" }}
column={1}
title={<div style={{ color: "white" }}>{data?.title}</div>}
>
<Descriptions.Item label="温度">{data?.title}℃</Descriptions.Item>
<Descriptions.Item label="湿度">{data?.title}</Descriptions.Item>
<Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item>
<Descriptions.Item label="Remark">empty</Descriptions.Item>
</Descriptions>
</div>
);
};
export default Popover;
TODO：
基于这些功能，还可以继续封装对模型的控制、可视化的移动、视角切换等功能。敬请期待。
最后
项目参考了以下开源项目： github.com/Cqqgyh/smar… github.com/fh332393900…
原文链接：https://juejin.cn/post/7346032359437254665 作者：却黑97
