ThreeJS - 封装一个GLB模型展示组件（TypeScript）

一、引言

最近基于Three.JS，使用class封装了一个GLB模型展示，支持TypeScript、支持不同框架使用，具有多种功能。（下图展示一些基础的功能，可以自行扩展，比如光源等）

二、主要代码

本模块依赖： three、 @types/three，请先下载这两个npm包

yarn add three @types/three   或    npm i three @types/three

使用了class进行封装，将主要的操作代码从组件中抽离出来，便于不同框架之间的使用

// /components/ShowModel/GLBModel.ts

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import * as THREE from "three";
import Stats from "three/examples/jsm/libs/stats.module.js";
import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.js";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
import { onErr, setting } from "./type";

/**GLB模型展示 */
class GLBModel {
    /**当前canvas挂载的node节点 */
    node: HTMLElement
    /**判断模型是否加载完成（代表那些原本undefined的变量已经可以使用了）*/
    load = false
    /**一些模式的开关和设置，外部只读，修改无效。会把配置保存在本地存储，记录数据  */
    setting!: setting
    /**渲染器 */
    private renderer!: THREE.WebGLRenderer
    /**摄像机 */
    private camera!: THREE.PerspectiveCamera
    /**场景 */
    private scene!: THREE.Scene;
    /**操控摄像机的控制器 */
    private controls!: OrbitControls;
    /**性能统计信息的工具 */
    private stats!: Stats
    /**clock对象，用于跟踪时间的流逝，并在动画循环中提供统一的时间更新 */
    private clock!: THREE.Clock
    /**辅助观察的帮助器，包括 三维坐标、网格平面、包围盒框框 */
    private helpers?: ReturnType<typeof initHelper>['helper']
    /**包围盒有关的数据，包括放大倍数、放大后的中心坐标、放大后的模型大小 */
    private box?: ReturnType<typeof getBoxAndScale>['box']
    /**动画混合器 */
    private mixer?: THREE.AnimationMixer
    /**当前模型实例 */
    private gltf?: GLTF
    /**模型的动画列表 */
    private actionList: THREE.AnimationAction[] = []
    /**模型的原始材质Map，可以用于还原 */
    private originalMesh = new Map<THREE.Mesh, THREE.Mesh["material"]>()
    /**当内部的setting变量发生改变时，会触发这个函数，可以用于框架的响应式 */
    private settingChangeCallback?: (setting: setting) => void


    /**GLB模型展示 - 构造函数
     * @param node 要挂载canvas画布的节点。注意需要设置好node的宽高
     * @param settingChangeCallback 当内部的setting变量发生改变时，会触发这个函数，可以用于框架的响应式
     */
    constructor(node: HTMLElement, settingChangeCallback?: (setting: setting) => void) {
        this.node = node
        this.settingChangeCallback = settingChangeCallback
        Object.assign(this, initBaseDevice(node), initOtherDevice(node))//这个操作是，把函数的返回值赋值到this上， 省的我一个个去 this.xxx = xxx
        this.resizeListen()
        this.settingFn.getSettingFromLocal()//给setting属性赋值
    }
    /**加载glb模型，同时进行基础设置
     * @param url 要加载的url
     * @param onload 加载成功的回调函数
     * @param onProgress 进度更新时触发的函数，可以用来配置进度条
     * @param onErr 加载失败的回调
     */
    loadGlb(url: string, onload: (data: GLTF) => void, onProgress: (e: ProgressEvent) => void, onErr?: onErr) {
        /**dracoLoader模型压缩器 */
        const dracoLoader = new DRACOLoader();
        dracoLoader.setDecoderPath('https://threejs.org/examples/jsm/libs/draco/gltf/');//这段代码在部署时会不会报错？
        /**glb模型加载器 */
        const loader = new GLTFLoader();
        loader.setDRACOLoader(dracoLoader); //设置压缩器
        loader.load(
            url,
            (gltf) => {
                this.gltf = gltf
                const model = gltf.scene;
                this.box = getBoxAndScale(model, this.camera, this.controls, this.scene).box
                this.helpers = initHelper(150, this.box.centerWithScale, model).helper;
                this.mixer = new THREE.AnimationMixer(model); //设置新的动画混合器 
                this.actionList = getAnimations(gltf, this.mixer); //获取动画列表
                this.animate()
                this.originalMesh = getOriginalMesh(model)//保存原始材质
                onload(gltf)
                this.load = true
                this.settingFn.setFromLocal()
            },
            onProgress,
            (e) => {
                onErr && onErr(e);
                console.error("加载glb模型出错啦", e);
            });
    };
    /**卸载时需要做的事。 */
    destory() {
        try {
            this.resizeDestory();//清除DOM监听
            window.cancelAnimationFrame(this.animateKey || 0);//清除canvas动画
            while (this.node.firstChild) this.node.firstChild.remove(); //删除DOM下所有子元素
        } catch (error) {
            console.error('执行清除函数失败，请检查问题。可能是由于this指向的问题，请保证此函数的调用者是实例本身。', error);
            //注意调用时，必须保证调用者是实例本身，否则此处请改为箭头函数
        }
    }
    /**开启/关闭骨架模式
     * @param open 开启还是关闭
     * @param onErr 失败的回调
     */
    changeWireframe(open: boolean, onErr?: onErr) {
        try {
            this.judgeLoad()
            this.gltf!.scene.traverse(function (child) {
                if (child instanceof THREE.Mesh) {
                    child.material.wireframe = open; //查看骨架模式 
                }
            });
            this.settingFn.setSetting('wireframe', open)
        } catch (error) {
            console.error('开启/关闭骨架模式失败', error)
            onErr && onErr(error)
        }
    }
    /**开启/关闭法线模式 */
    changeNormal(open: boolean, onErr?: onErr) {
        try {
            this.judgeLoad()
            this.gltf!.scene.traverse((object) => {
                if (object instanceof THREE.Mesh) {
                    if (open) {
                        object.material = new THREE.MeshNormalMaterial({
                            transparent: true, // 是否开启使用透明度
                            wireframe: this.setting.wireframe, //骨架模式
                            opacity: 0.8, // 透明度
                            depthWrite: false, // 关闭深度写入 透视效果
                        });
                    } else {
                        const origin = this.originalMesh.get(object); //原始材质
                        object.material = origin;
                        this.changeWireframe(this.setting.wireframe);
                    }
                }
            });
            this.settingFn.setSetting('normal', open)
        } catch (error) {
            console.error('开启/关闭法线模式失败', error)
            onErr && onErr(error)
        }
    }
    /**开启/关闭动画
     * @param open 是否开启
     * @param onErr 失败回调，参数是失败提示 
     */
    changeAnimation(open: boolean, onErr?: onErr) {
        try {
            if (open && !this.actionList.length) {
                console.log("该模型暂无动画哦");
                onErr && onErr("该模型暂无动画哦")
                return;
            }
            this.actionList.forEach((k) => {
                open ? k.play() : k.stop();
            });
            this.settingFn.setSetting('animation', open)
        } catch (error) {
            console.error('开启/关闭动画失败', error)
            onErr && onErr(error)
        }
    };
    /**开启/关闭坐标系 */
    changeAxesHelper(open: boolean, onErr?: onErr) {
        try {
            this.judgeLoad()
            open ? this.scene.add(this.helpers!.axesHelper) : this.scene.remove(this.helpers!.axesHelper)
            this.settingFn.setSetting('axesHelper', open)
        } catch (error) {
            console.error('开启/关闭坐标系失败', error);
            onErr && onErr(error)
        }
    }
    /**开启/关闭网格 */
    changeGridHelper(open: boolean, onErr?: onErr) {
        try {
            this.judgeLoad()
            open ? this.scene.add(this.helpers!.gridHelper) : this.scene.remove(this.helpers!.gridHelper)
            this.settingFn.setSetting('gridHelper', open)
        } catch (error) {
            console.error('开启/关闭网格失败', error);
            onErr && onErr(error)
        }
    }
    /**开启/关闭包围盒 */
    changeBoundingBoxHelper(open: boolean, onErr?: onErr) {
        try {
            this.judgeLoad()
            open ? this.scene.add(this.helpers!.boundingBoxHelper) : this.scene.remove(this.helpers!.boundingBoxHelper)
            this.settingFn.setSetting('boundingBoxHelper', open)
        } catch (error) {
            console.error('开启/关闭包围盒 失败', error);
            onErr && onErr(error)
        }
    }
    /**切换背景颜色，参数是十六进制颜色字符串 */
    changeBgcolor(hex: string, onErr?: onErr) {
        try {
            this.judgeLoad()
            this.scene.background = new THREE.Color(hex); //场景背景色 
            this.settingFn.setSetting('bgcolor', hex)
        } catch (error) {
            console.error('开启/关闭包围盒 失败', error);
            onErr && onErr(error)
        }
    }
    /**相机归回原位 */
    cameraOriginalPosition(onErr?: onErr) {
        try {
            this.judgeLoad()
            const { camera, controls, box } = this
            camera.position.copy(box!.sizeWithScale); //设置摄像机的初始位置，乘上缩放倍数
            controls.target.copy(box!.centerWithScale); //设置摄像机旋转和放大等操作的目标点
        } catch (error) {
            console.error('相机归回原位 失败', error);
            onErr && onErr(error)
        }
    };

    /**有关于setting的一些函数 */
    private settingFn = {
        /**设置模块配置 */
        setSetting: <T extends keyof setting>(key: T, value: setting[T]) => {
            this.setting[key] = value
            localStorage.setItem('glbModelSetting', JSON.stringify(this.setting))//存到本地存储 
            this.settingChangeCallback && this.settingChangeCallback(this.setting)
        },
        /**从本地存储读出设置，保存在实例中 */
        getSettingFromLocal: () => {
            const setting = JSON.parse(localStorage.getItem('glbModelSetting') || 'null') as setting | null
            if (setting) {
                this.setting = setting
            } else {
                this.setting = {
                    wireframe: false,
                    normal: false,
                    animation: false,
                    axesHelper: false,
                    gridHelper: false,
                    boundingBoxHelper: false,
                    bgcolor: "#000000"
                }
            }
        },
        /**根据setting，配置对应的模式 - 在加载模型后使用 */
        setFromLocal: () => {
            const setting = this.setting
            //设置这些设置的函数，都是 change + Xxxxx 形式的命名，所以下面直接遍历调用
            for (const key in setting) {
                if (Object.prototype.hasOwnProperty.call(setting, key)) {
                    const fnName = 'change' + key.slice(0, 1).toUpperCase() + key.slice(1)
                    try {
                        (this as any)[fnName]((setting as any)[key])
                    } catch (error) {
                        console.log('调用', fnName, '失败', error);
                    }
                }
            }
        }
    }
    /**判断是否加载完成，没完成的话会抛出错误，可以被catch捕获 */
    private judgeLoad = () => {
        if (!this.load) {
            throw '模型还未加载完成'
        }
    }
    /**窗口监听事件的卸载函数，在卸载时需要清除 */
    private resizeDestory!: () => void
    /**绑定窗口大小监听事件 */
    private resizeListen() {
        const { node, camera, renderer, scene } = this
        //下面这个监听，可能有性能问题吧，看左上角自带的性能指标，拖动时起伏很大，如果加节流的话，又会因为没有及时更新而大小不同
        /**创建 ResizeObserver 实例 */
        let observer: ResizeObserver | null = new ResizeObserver(entries => {
            for (let entry of entries) {
                const width = entry.contentRect.width;
                const height = entry.contentRect.height;
                camera.aspect = width / height; //设置新比例
                camera.updateProjectionMatrix(); //更新相机的投影矩阵
                renderer.setSize(width, height);
                renderer.render(scene, camera) //渲染
            }
        });
        observer.observe(node); // 开始观察目标元素
        this.resizeDestory = () => {
            observer!.unobserve(node);  // 停止观察目标元素
            observer!.disconnect();// 停止观察所有元素
            observer = null //垃圾回收
        }
    }
    /**当前canvas的动画key，在卸载时需要清除 */
    private animateKey: number = 0
    /**canvas动画，在这里更新数据并实时render渲染 */
    private animate = () => {
        this.animateKey = window.requestAnimationFrame(this.animate);
        const delta = this.clock.getDelta(); // 获取每帧的时间间隔，从而可以根据时间进行动画更新，使动画在不同的设备和性能下保持一致
        this.mixer!.update(delta); //更新动画
        this.controls.update(); //操作器更新
        this.stats.update(); //更新性能计算器 
        this.renderer.render(this.scene, this.camera) //渲染
    }
}
export default GLBModel
/**初始化基础设备 */
const initBaseDevice = (node: HTMLElement) => {
    /**节点宽度 */
    const width = node.clientWidth;
    /**节点高度 */
    const height = node.clientHeight;

    /**渲染器 */
    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); //antialias启用抗锯齿功能
    renderer.setPixelRatio(window.devicePixelRatio); //设置渲染器的设备像素比例的方法，在不同设备展示一样的东西
    renderer.setSize(width, height); //设置宽高
    node.appendChild(renderer.domElement); //挂载渲染器DOM

    /**摄像机 */
    const camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 10000);

    /**创建场景 */
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x000000); //场景背景色
    scene.environment = new THREE.PMREMGenerator(renderer).fromScene(new RoomEnvironment(renderer), 0.04).texture; //将场景的当前光照信息计算为环境贴图。第二个参数 0.04 指定了纹理的精度，数值越小表示精度越高，但计算时间也越长。

    /**操控摄像机的控制器 */
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.update(); //更新控制器的状态。在动画函数中也需要执行
    controls.enablePan = true; //是否启用控制器的右键平移功能。
    controls.enableDamping = true; //是否启用惯性功能

    return {
        /**渲染器 */
        renderer,
        /**摄像机 */
        camera,
        /**场景 */
        scene,
        /**操控摄像机的控制器 */
        controls,
    };
};
/**初始化其它设备，如性能展示器、clock时钟 */
const initOtherDevice = (node: HTMLElement) => {
    /**用于在 WebGL 渲染中显示性能统计信息的工具 */
    const stats = new Stats();
    stats.dom.style.position = "absolute";
    node.appendChild(stats.dom); //挂载性能展示DOM

    /**clock对象，用于跟踪时间的流逝，并在动画循环中提供统一的时间更新 */
    const clock = new THREE.Clock();

    return {
        /**用于在 WebGL 渲染中显示性能统计信息的工具 */
        stats,
        /**clock对象，用于跟踪时间的流逝，并在动画循环中提供统一的时间更新 */
        clock,
    };
};
/**初始化三维坐标系、网格帮助器、包围盒帮助器 */
const initHelper = (size: number, center: THREE.Vector3, model: THREE.Group<THREE.Object3DEventMap>) => {
    /**AxesHelper：辅助观察的坐标系 */
    const axesHelper = new THREE.AxesHelper(size);
    axesHelper.position.copy(center); //三维坐标系的位置

    /**网格帮助器 */
    const gridHelper = new THREE.GridHelper(size, size);
    gridHelper.position.copy(center); //网格的位置

    /**新包围盒辅助展示 */
    const boundingBoxHelper = new THREE.BoxHelper(model); //创建一个BoxHelper对象，传入模型的网格对象作为参数
    boundingBoxHelper.material.color.set(0xff0000); //将包围盒的材质设置为红色

    return {
        /**辅助观察的帮助器 */
        helper: {
            /**辅助观察的坐标系 */
            axesHelper,
            /**网格帮助器 */
            gridHelper,
            /**包围盒轮廓，可以添加到场景中 */
            boundingBoxHelper,
        },
    };
};
/**获得模型包围盒的数据，并计算模型位置、缩放倍数，设置相机位置等，最后把模型添加到场景。 */
const getBoxAndScale = (model: THREE.Group<THREE.Object3DEventMap>, camera: THREE.PerspectiveCamera, controls: OrbitControls, scene: THREE.Scene) => {
    /**获取模型包围盒 */
    const boundingBox = new THREE.Box3().expandByObject(model);
    /**获取包围盒的size */
    const size = boundingBox.getSize(new THREE.Vector3()); //设置size
    /**中心坐标*/
    const center = boundingBox.getCenter(new THREE.Vector3()); // 计算包围盒中心坐标,并将中心坐标保存在center向量中
    /**设置的缩放倍数，根据实际情况进行调整 */
    const scale = 10 / Math.max(size.x, size.y, size.z); // 分母是期望的模型大小
    // const scale = 1;
    /**中心点的三维向量 * 放大值 */
    const centerWithScale = center.clone().multiplyScalar(scale);
    /**盒子的三维向量 * 放大值 */
    const sizeWithScale = size.clone().multiplyScalar(scale);

    // console.log("boundingBox", boundingBox);
    // console.log("size", size);
    // console.log("center", center);
    // console.log("scale", scale);
    // console.log("centerWithScale", centerWithScale);
    // console.log("sizeWithScale", sizeWithScale);

    model.scale.set(scale, scale, scale); //设置模型缩放倍率 
    camera.position.copy(sizeWithScale); //设置摄像机的初始位置，乘上缩放倍数
    controls.target.copy(centerWithScale); //设置摄像机旋转和放大等操作的目标点
    scene.add(model); //把模型添加进去

    return {
        /**包围盒有关的信息 */
        box: {
            /**缩放倍率 */
            scale,
            /**放大后的中心点的三维向量 */
            centerWithScale,
            /**放大后的盒子的三维向量 */
            sizeWithScale,
        },
    };
};
/**获取模型上的全部动画，返回动画实例列表，后续操控实例列表即可 */
const getAnimations = (gltf: GLTF, mixer: THREE.AnimationMixer) => {
    const actionList: THREE.AnimationAction[] = [];
    // 遍历模型的动画数组，为个动画创建剪辑并添加到混合器中
    for (let i = 0; i < gltf.animations.length; i++) {
        const animation = gltf.animations[i];
        const action = mixer.clipAction(animation); //创建
        actionList.push(action);
        action.setLoop(THREE.LoopRepeat, Infinity); // 设置动画播放相关参数：循环模式、重复次数
        action.clampWhenFinished = true; // 动画在播放完成后会停留在最后一帧，不再继续播放  （但是上面设置了循环播放，所以不影响）
        // action.play(); // 播放动画
    }
    return actionList;
};
/**获取模型身上的原始材质，返回map */
const getOriginalMesh = (model: THREE.Group<THREE.Object3DEventMap>) => {
    const map = new Map<THREE.Mesh, THREE.Mesh["material"]>();
    //设置模型原始材质
    model.traverse((object) => {
        if (object instanceof THREE.Mesh) {
            map.set(object, object.material);
        }
    });
    return map;
};

其中 type.ts 本文件所需的部分内容如下：（完整内容在三-1-(3) 里）

// /components/ShowModel/type.ts

//...

/**展示3D模型的组件Props */
export interface showModelProps {
  /**要展示的模型的URL */
  url: string;
  /**组件最外层的style。在这里面指定宽高等。不指定宽高，将会适配父元素宽高 */
  style?: CSSProperties;
  /**工具栏的扩展render。参数是内部数据  */
  toolBarRender?: (instance: GLBModel) => ReactNode;
}

/**各个工具的开关和设置等，外部只读 */
export interface setting {
  /**是否开启了骨架模式 */
  wireframe: boolean,
  /**是否开启了法线模式 */
  normal: boolean,
  /**是否开启了动画 */
  animation: boolean
  /**是否开启了坐标系 */
  axesHelper: boolean
  /**是否开启了网格 */
  gridHelper: boolean
  /**是否开启了包围盒 */
  boundingBoxHelper: boolean
  /**背景色，十六进制字符串 */
  bgcolor: string
}

/**失败的回调函数 */
export type onErr = (e: any) => void

三、示例 - 在React中使用

本文以react示例，演示如何封装组件

1. 封装组件

基于antd组件库，所以请先下载依赖（不想使用antd的话，可以把下文有关的组件替换成自己的）

npm i antd @ant-design/icons  或  yarn add antd @ant-design/icons

（1）index.tsx

最主要的操作，其实就是下面这两步，做完就显示模型出来了，其它就是可视化的配置了。

const modelShow = new GLBModel(node) //创建实例

modelShow.loadGlb(url, ....... ); //加载模型

// /components/ShowModel/index.tsx

import cssStyle from "./index.module.css";
import { useState, useRef, useEffect } from "react";
import { Button, ColorPicker, Dropdown, Progress, Space, Switch } from "antd";
import { showTip } from "../../utils";
import GLBModel from "./GLBModel";
import { setting, showModelProps } from "./type";
import { DownOutlined } from "@ant-design/icons";

/**展示3D模型 */
export default function ShowModel({ url, style = {}, toolBarRender }: showModelProps) {
  /**用来承载three画布的容器 */
  const threeDivRef = useRef<HTMLDivElement>(null);
  const [progress, setProgress] = useState(0); //进度条，大于100时隐藏，小于0时代表加载失败
  const [instance, setInstance] = useState<GLBModel>(); //模型实例。
  const [setting, setSetting] = useState<setting>({
    wireframe: false,
    normal: false,
    animation: false,
    axesHelper: false,
    gridHelper: false,
    boundingBoxHelper: false,
    bgcolor: "#000000",
  }); //工具栏配置

  /**初始化模型并挂载 */
  const init = (node: HTMLDivElement) => {
    const modelShow = new GLBModel(node, (_setting) => setSetting({ ..._setting }));
    setInstance(modelShow);
    setProgress(0); //开始进度条
    modelShow.loadGlb(
      url,
      function (gltf) {
        setProgress(101); //隐藏进度条
      },
      function (e) {
        // 加载进度的处理逻辑，这里实际上是AJAX请求，如果是本地文件的话就不会有加载进度条
        if (e.lengthComputable) {
          const percentComplete = (e.loaded / e.total) * 100;
          if (percentComplete <= 100) {
            setProgress(parseInt(percentComplete.toFixed(2)));
          } else {
            //有时候会有超出100的情况
            setProgress(100);
          }
        }
      },
      function (e) {
        setProgress(-1); //错误进度条
        showTip("加载失败，请F12查看报错", "error", 5);
      }
    );
    return () => {
      modelShow.destory();
    };
  };
  /**自定义下拉框渲染 */
  const dropdownRender = () => {
    if (!instance) return <></>;
    const items = [
      <Switch
        onChange={(open) => instance.changeAxesHelper(open)}
        checkedChildren="坐标系"
        unCheckedChildren="坐标系"
        checked={setting.axesHelper}
      />,
      <Switch
        onChange={(open) => instance.changeGridHelper(open)}
        checkedChildren="网格面"
        unCheckedChildren="网格面"
        checked={setting.gridHelper}
      />,
      <Switch
        onChange={(open) => instance.changeBoundingBoxHelper(open)}
        checkedChildren="包围盒"
        unCheckedChildren="包围盒"
        checked={setting.boundingBoxHelper}
      />,
      <Button onClick={() => instance.cameraOriginalPosition()}>相机归位</Button>,
      <ColorPicker showText onChange={(_, hex) => instance.changeBgcolor(hex)} size="small" value={setting.bgcolor} />,
    ];
    return (
      <div style={{ ...bgStyle, padding: "10px", borderRadius: "10px" }}>
        {items.map((k, i) => {
          return (
            <div key={i} style={{ margin: "5px 0" }}>
              {k}
            </div>
          );
        })}
        {toolBarRender && toolBarRender(instance)}
      </div>
    );
  };

  useEffect(() => {
    if (!url) {
      showTip("请传递模型URL！", "error", 5);
      setProgress(-1);
      return;
    }
    //在react18的开发环境下，useEffect会执行两次，所以需要在return中消除副作用
    const dom = threeDivRef.current;
    if (dom) {
      setInstance(undefined);
      const destory = init(dom);
      return destory;
    }
  }, [url]);
  return (
    <div className={`${cssStyle.showModel}`} style={style}>
      {instance && progress > 100 && (
        <Space className="toolList" style={bgStyle}>
          <Switch onChange={(open) => instance.changeWireframe(open)} checkedChildren="骨架" unCheckedChildren="骨架" checked={setting.wireframe} />
          <Switch onChange={(open) => instance.changeNormal(open)} checkedChildren="法线" unCheckedChildren="法线" checked={setting.normal} />
          <Switch
            onChange={(open) => instance.changeAnimation(open, (e) => showTip(e, "error"))}
            checkedChildren="动画"
            unCheckedChildren="动画"
            checked={setting.animation}
          />
          <Dropdown dropdownRender={dropdownRender}>
            <DownOutlined className="cursor-pointer" />
          </Dropdown>
        </Space>
      )}
      <div className="canvasContain" ref={threeDivRef}></div>
      <div className="progress">
        <Progress
          type="dashboard"
          status={progress < 0 ? "exception" : "active"}
          percent={progress}
          style={{ opacity: progress > 100 ? "0" : "1" }}
          strokeColor={{ "0%": "#87d068", "50%": "#ffe58f", "100%": "#ffccc7" }}
        />
      </div>
      <div className="tip">
        鼠标左键可以旋转，右键可以进行平移，滚轮可以控制模型放大缩小
      </div>
    </div>
  );
}

const bgStyle = { backgroundImage: "linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%)" };

（2）index.module.css

less版：

 /* /components/ShowModel/index.module.less  */ 

.showModel {
     width: 100%;
     height: 100%;
     position: relative;
     background-color: #000;


     :global {

         //工具栏  
         .toolList {
             position: absolute;
             top: 0;
             right: 50%;
             transform: translate(50%);
             z-index: 99;
             display: flex;
             padding: 10px;
             border-bottom-right-radius: 10px;
             border-bottom-left-radius: 10px;
             opacity: 0.8;
             align-items: center;
         }

         //antd 圆环进度条中间文字的颜色
         .ant-progress-text {
             color: white !important;
         }

         //画布的容器
         .canvasContain {
             display: flex;
             align-items: center;
             justify-content: center;
             width: 100%;
             height: 100%;
             position: relative;
         }

         //进度条
         .progress {
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
             z-index: 9999;
             color: white;

             .ant-progress {
                 transition: all 1s;
             }
         }

         //提示
         .tip {
             position: absolute;
             bottom: 0;
             left: 50%;
             transform: translate(-50%);
             font-weight: 900;
             white-space: nowrap;
             color: white;
         }

     }

 }

css版

 /* /components/ShowModel/index.module.css */ 

.showModel {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #000;
}
.showModel :global .toolList {
  position: absolute;
  top: 0;
  right: 50%;
  transform: translate(50%);
  z-index: 99;
  display: flex;
  padding: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  opacity: 0.8;
  align-items: center;
}
.showModel :global .ant-progress-text {
  color: white !important;
}
.showModel :global .canvasContain {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
}
.showModel :global .progress {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  color: white;
}
.showModel :global .progress .ant-progress {
  transition: all 1s;
}
.showModel :global .tip {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  font-weight: 900;
  white-space: nowrap;
  color: white;
}

（3）type.ts

 /* /components/ShowModel/type.ts */ 

import { CSSProperties, ReactNode } from "react";
import GLBModel from "./GLBModel";



/**展示3D模型的组件Props */
export interface showModelProps {
  /**要展示的模型的URL */
  url: string;
  /**组件最外层的style。在这里面指定宽高等。不指定宽高，将会适配父元素宽高 */
  style?: CSSProperties;
  /**工具栏的扩展render。参数是内部数据  */
  toolBarRender?: (instance: GLBModel) => ReactNode;
}





/**各个工具的开关和设置等，外部只读 */
export interface setting {
  /**是否开启了骨架模式 */
  wireframe: boolean,
  /**是否开启了法线模式 */
  normal: boolean,
  /**是否开启了动画 */
  animation: boolean
  /**是否开启了坐标系 */
  axesHelper: boolean
  /**是否开启了网格 */
  gridHelper: boolean
  /**是否开启了包围盒 */
  boundingBoxHelper: boolean
  /**背景色，十六进制字符串 */
  bgcolor: string
}

/**失败的回调函数 */
export type onErr = (e: any) => void

（4）utils

在上面用到了一个弹窗提示函数

/* /utils/index.ts */


/**使用antd做弹窗，展示信息 
* @param content 要提示的文字，或者一个ReactNode
* @param type 类型，默认"success"。 
* @param duration 显示时间，单位s，默认2s ，0代表不关闭
* @param key 每个message唯一的key， 可以用于destroy。默认为当前时间戳
* @returns 返回弹窗实例，可以进行.then等
*/
export function showTip(content: ReactNode | string, type: NoticeType = 'success', duration: number = 2, key: any = new Date().getTime()) {
    return AntdMessage.open({
        type,
        content,
        duration,
        key,
        style: { zIndex: 99999 }
    })
}

2.测试示例

任意一个想使用的地方中


import ShowModel from "./components/ShowModel";

const App = () => {
  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <ShowModel url="https://threejs.org/examples/models/gltf/LittlestTokyo.glb"></ShowModel>
    </div>
  );
};
export default App;

四、结语

虽然说，理论上是可以支持不同框架使用，但是我还没测试过Vue，只测试了Next和react，如果是别的框架的可以尝试试试哦。基于class封装，就是为了能够和封装组件时解耦，所以理论上是可以支持不同框架使用的

最主要的操作，其实就是下面这两步，做完就显示模型出来了，其它就是可视化的配置了。

         const modelShow = new GLBModel(node)  //创建实例
         modelShow.loadGlb(url, ....... );  //加载模型