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

    一、引言

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

    二、主要代码 

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

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

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

    1. // /components/ShowModel/GLBModel.ts
    2.  
    3. import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
    4. import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
    5. import * as THREE from "three";
    6. import Stats from "three/examples/jsm/libs/stats.module.js";
    7. import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.js";
    8. import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
    9. import { onErr, setting } from "./type";
    10.  
    11. /**GLB模型展示 */
    12. class GLBModel {
    13.     /**当前canvas挂载的node节点 */
    14.     node: HTMLElement
    15.     /**判断模型是否加载完成（代表那些原本undefined的变量已经可以使用了）*/
    16.     load = false
    17.     /**一些模式的开关和设置，外部只读，修改无效。会把配置保存在本地存储，记录数据  */
    18.     setting!: setting
    19.     /**渲染器 */
    20.     private renderer!: THREE.WebGLRenderer
    21.     /**摄像机 */
    22.     private camera!: THREE.PerspectiveCamera
    23.     /**场景 */
    24.     private scene!: THREE.Scene;
    25.     /**操控摄像机的控制器 */
    26.     private controls!: OrbitControls;
    27.     /**性能统计信息的工具 */
    28.     private stats!: Stats
    29.     /**clock对象，用于跟踪时间的流逝，并在动画循环中提供统一的时间更新 */
    30.     private clock!: THREE.Clock
    31.     /**辅助观察的帮助器，包括 三维坐标、网格平面、包围盒框框 */
    32.     private helpers?: ReturnType<typeof initHelper>['helper']
    33.     /**包围盒有关的数据，包括放大倍数、放大后的中心坐标、放大后的模型大小 */
    34.     private box?: ReturnType<typeof getBoxAndScale>['box']
    35.     /**动画混合器 */
    36.     private mixer?: THREE.AnimationMixer
    37.     /**当前模型实例 */
    38.     private gltf?: GLTF
    39.     /**模型的动画列表 */
    40.     private actionList: THREE.AnimationAction[] = []
    41.     /**模型的原始材质Map，可以用于还原 */
    42.     private originalMesh = new Map<THREE.Mesh, THREE.Mesh["material"]>()
    43.     /**当内部的setting变量发生改变时，会触发这个函数，可以用于框架的响应式 */
    44.     private settingChangeCallback?: (setting: setting) => void
    45.  
    46.  
    47.     /**GLB模型展示 - 构造函数
    48.      * @param node 要挂载canvas画布的节点。注意需要设置好node的宽高
    49.      * @param settingChangeCallback 当内部的setting变量发生改变时，会触发这个函数，可以用于框架的响应式
    50.      */
    51.     constructor(node: HTMLElement, settingChangeCallback?: (setting: setting) => void) {
    52.         this.node = node
    53.         this.settingChangeCallback = settingChangeCallback
    54.         Object.assign(this, initBaseDevice(node), initOtherDevice(node))//这个操作是，把函数的返回值赋值到this上， 省的我一个个去 this.xxx = xxx
    55.         this.resizeListen()
    56.         this.settingFn.getSettingFromLocal()//给setting属性赋值
    57.     }
    58.     /**加载glb模型，同时进行基础设置
    59.      * @param url 要加载的url
    60.      * @param onload 加载成功的回调函数
    61.      * @param onProgress 进度更新时触发的函数，可以用来配置进度条
    62.      * @param onErr 加载失败的回调
    63.      */
    64.     loadGlb(url: string, onload: (data: GLTF) => void, onProgress: (e: ProgressEvent) => void, onErr?: onErr) {
    65.         /**dracoLoader模型压缩器 */
    66.         const dracoLoader = new DRACOLoader();
    67.         dracoLoader.setDecoderPath('https://threejs.org/examples/jsm/libs/draco/gltf/');//这段代码在部署时会不会报错？
    68.         /**glb模型加载器 */
    69.         const loader = new GLTFLoader();
    70.         loader.setDRACOLoader(dracoLoader); //设置压缩器
    71.         loader.load(
    72.             url,
    73.             (gltf) => {
    74.                 this.gltf = gltf
    75.                 const model = gltf.scene;
    76.                 this.box = getBoxAndScale(model, this.camera, this.controls, this.scene).box
    77.                 this.helpers = initHelper(150, this.box.centerWithScale, model).helper;
    78.                 this.mixer = new THREE.AnimationMixer(model); //设置新的动画混合器 
    79.                 this.actionList = getAnimations(gltf, this.mixer); //获取动画列表
    80.                 this.animate()
    81.                 this.originalMesh = getOriginalMesh(model)//保存原始材质
    82.                 onload(gltf)
    83.                 this.load = true
    84.                 this.settingFn.setFromLocal()
    85.             },
    86.             onProgress,
    87.             (e) => {
    88.                 onErr && onErr(e);
    89.                 console.error("加载glb模型出错啦", e);
    90.             });
    91.     };
    92.     /**卸载时需要做的事。 */
    93.     destory() {
    94.         try {
    95.             this.resizeDestory();//清除DOM监听
    96.             window.cancelAnimationFrame(this.animateKey || 0);//清除canvas动画
    97.             while (this.node.firstChild) this.node.firstChild.remove(); //删除DOM下所有子元素
    98.         } catch (error) {
    99.             console.error('执行清除函数失败，请检查问题。可能是由于this指向的问题，请保证此函数的调用者是实例本身。', error);
    100.             //注意调用时，必须保证调用者是实例本身，否则此处请改为箭头函数
    101.         }
    102.     }
    103.     /**开启/关闭骨架模式
    104.      * @param open 开启还是关闭
    105.      * @param onErr 失败的回调
    106.      */
    107.     changeWireframe(open: boolean, onErr?: onErr) {
    108.         try {
    109.             this.judgeLoad()
    110.             this.gltf!.scene.traverse(function (child) {
    111.                 if (child instanceof THREE.Mesh) {
    112.                     child.material.wireframe = open; //查看骨架模式 
    113.                 }
    114.             });
    115.             this.settingFn.setSetting('wireframe', open)
    116.         } catch (error) {
    117.             console.error('开启/关闭骨架模式失败', error)
    118.             onErr && onErr(error)
    119.         }
    120.     }
    121.     /**开启/关闭法线模式 */
    122.     changeNormal(open: boolean, onErr?: onErr) {
    123.         try {
    124.             this.judgeLoad()
    125.             this.gltf!.scene.traverse((object) => {
    126.                 if (object instanceof THREE.Mesh) {
    127.                     if (open) {
    128.                         object.material = new THREE.MeshNormalMaterial({
    129.                             transparent: true, // 是否开启使用透明度
    130.                             wireframe: this.setting.wireframe, //骨架模式
    131.                             opacity: 0.8, // 透明度
    132.                             depthWrite: false, // 关闭深度写入 透视效果
    133.                         });
    134.                     } else {
    135.                         const origin = this.originalMesh.get(object); //原始材质
    136.                         object.material = origin;
    137.                         this.changeWireframe(this.setting.wireframe);
    138.                     }
    139.                 }
    140.             });
    141.             this.settingFn.setSetting('normal', open)
    142.         } catch (error) {
    143.             console.error('开启/关闭法线模式失败', error)
    144.             onErr && onErr(error)
    145.         }
    146.     }
    147.     /**开启/关闭动画
    148.      * @param open 是否开启
    149.      * @param onErr 失败回调，参数是失败提示 
    150.      */
    151.     changeAnimation(open: boolean, onErr?: onErr) {
    152.         try {
    153.             if (open && !this.actionList.length) {
    154.                 console.log("该模型暂无动画哦");
    155.                 onErr && onErr("该模型暂无动画哦")
    156.                 return;
    157.             }
    158.             this.actionList.forEach((k) => {
    159.                 open ? k.play() : k.stop();
    160.             });
    161.             this.settingFn.setSetting('animation', open)
    162.         } catch (error) {
    163.             console.error('开启/关闭动画失败', error)
    164.             onErr && onErr(error)
    165.         }
    166.     };
    167.     /**开启/关闭坐标系 */
    168.     changeAxesHelper(open: boolean, onErr?: onErr) {
    169.         try {
    170.             this.judgeLoad()
    171.             open ? this.scene.add(this.helpers!.axesHelper) : this.scene.remove(this.helpers!.axesHelper)
    172.             this.settingFn.setSetting('axesHelper', open)
    173.         } catch (error) {
    174.             console.error('开启/关闭坐标系失败', error);
    175.             onErr && onErr(error)
    176.         }
    177.     }
    178.     /**开启/关闭网格 */
    179.     changeGridHelper(open: boolean, onErr?: onErr) {
    180.         try {
    181.             this.judgeLoad()
    182.             open ? this.scene.add(this.helpers!.gridHelper) : this.scene.remove(this.helpers!.gridHelper)
    183.             this.settingFn.setSetting('gridHelper', open)
    184.         } catch (error) {
    185.             console.error('开启/关闭网格失败', error);
    186.             onErr && onErr(error)
    187.         }
    188.     }
    189.     /**开启/关闭包围盒 */
    190.     changeBoundingBoxHelper(open: boolean, onErr?: onErr) {
    191.         try {
    192.             this.judgeLoad()
    193.             open ? this.scene.add(this.helpers!.boundingBoxHelper) : this.scene.remove(this.helpers!.boundingBoxHelper)
    194.             this.settingFn.setSetting('boundingBoxHelper', open)
    195.         } catch (error) {
    196.             console.error('开启/关闭包围盒 失败', error);
    197.             onErr && onErr(error)
    198.         }
    199.     }
    200.     /**切换背景颜色，参数是十六进制颜色字符串 */
    201.     changeBgcolor(hex: string, onErr?: onErr) {
    202.         try {
    203.             this.judgeLoad()
    204.             this.scene.background = new THREE.Color(hex); //场景背景色 
    205.             this.settingFn.setSetting('bgcolor', hex)
    206.         } catch (error) {
    207.             console.error('开启/关闭包围盒 失败', error);
    208.             onErr && onErr(error)
    209.         }
    210.     }
    211.     /**相机归回原位 */
    212.     cameraOriginalPosition(onErr?: onErr) {
    213.         try {
    214.             this.judgeLoad()
    215.             const { camera, controls, box } = this
    216.             camera.position.copy(box!.sizeWithScale); //设置摄像机的初始位置，乘上缩放倍数
    217.             controls.target.copy(box!.centerWithScale); //设置摄像机旋转和放大等操作的目标点
    218.         } catch (error) {
    219.             console.error('相机归回原位 失败', error);
    220.             onErr && onErr(error)
    221.         }
    222.     };
    223.  
    224.     /**有关于setting的一些函数 */
    225.     private settingFn = {
    226.         /**设置模块配置 */
    227.         setSetting: extends keyof setting>(key: T, value: setting[T]) => {
    228.             this.setting[key] = value
    229.             localStorage.setItem('glbModelSetting', JSON.stringify(this.setting))//存到本地存储 
    230.             this.settingChangeCallback && this.settingChangeCallback(this.setting)
    231.         },
    232.         /**从本地存储读出设置，保存在实例中 */
    233.         getSettingFromLocal: () => {
    234.             const setting = JSON.parse(localStorage.getItem('glbModelSetting') || 'null') as setting | null
    235.             if (setting) {
    236.                 this.setting = setting
    237.             } else {
    238.                 this.setting = {
    239.                     wireframe: false,
    240.                     normal: false,
    241.                     animation: false,
    242.                     axesHelper: false,
    243.                     gridHelper: false,
    244.                     boundingBoxHelper: false,
    245.                     bgcolor: "#000000"
    246.                 }
    247.             }
    248.         },
    249.         /**根据setting，配置对应的模式 - 在加载模型后使用 */
    250.         setFromLocal: () => {
    251.             const setting = this.setting
    252.             //设置这些设置的函数，都是 change + Xxxxx 形式的命名，所以下面直接遍历调用
    253.             for (const key in setting) {
    254.                 if (Object.prototype.hasOwnProperty.call(setting, key)) {
    255.                     const fnName = 'change' + key.slice(0, 1).toUpperCase() + key.slice(1)
    256.                     try {
    257.                         (this as any)[fnName]((setting as any)[key])
    258.                     } catch (error) {
    259.                         console.log('调用', fnName, '失败', error);
    260.                     }
    261.                 }
    262.             }
    263.         }
    264.     }
    265.     /**判断是否加载完成，没完成的话会抛出错误，可以被catch捕获 */
    266.     private judgeLoad = () => {
    267.         if (!this.load) {
    268.             throw '模型还未加载完成'
    269.         }
    270.     }
    271.     /**窗口监听事件的卸载函数，在卸载时需要清除 */
    272.     private resizeDestory!: () => void
    273.     /**绑定窗口大小监听事件 */
    274.     private resizeListen() {
    275.         const { node, camera, renderer, scene } = this
    276.         //下面这个监听，可能有性能问题吧，看左上角自带的性能指标，拖动时起伏很大，如果加节流的话，又会因为没有及时更新而大小不同
    277.         /**创建 ResizeObserver 实例 */
    278.         let observer: ResizeObserver | null = new ResizeObserver(entries => {
    279.             for (let entry of entries) {
    280.                 const width = entry.contentRect.width;
    281.                 const height = entry.contentRect.height;
    282.                 camera.aspect = width / height; //设置新比例
    283.                 camera.updateProjectionMatrix(); //更新相机的投影矩阵
    284.                 renderer.setSize(width, height);
    285.                 renderer.render(scene, camera) //渲染
    286.             }
    287.         });
    288.         observer.observe(node); // 开始观察目标元素
    289.         this.resizeDestory = () => {
    290.             observer!.unobserve(node);  // 停止观察目标元素
    291.             observer!.disconnect();// 停止观察所有元素
    292.             observer = null //垃圾回收
    293.         }
    294.     }
    295.     /**当前canvas的动画key，在卸载时需要清除 */
    296.     private animateKey: number = 0
    297.     /**canvas动画，在这里更新数据并实时render渲染 */
    298.     private animate = () => {
    299.         this.animateKey = window.requestAnimationFrame(this.animate);
    300.         const delta = this.clock.getDelta(); // 获取每帧的时间间隔，从而可以根据时间进行动画更新，使动画在不同的设备和性能下保持一致
    301.         this.mixer!.update(delta); //更新动画
    302.         this.controls.update(); //操作器更新
    303.         this.stats.update(); //更新性能计算器 
    304.         this.renderer.render(this.scene, this.camera) //渲染
    305.     }
    306. }
    307. export default GLBModel
    308. /**初始化基础设备 */
    309. const initBaseDevice = (node: HTMLElement) => {
    310.     /**节点宽度 */
    311.     const width = node.clientWidth;
    312.     /**节点高度 */
    313.     const height = node.clientHeight;
    314.  
    315.     /**渲染器 */
    316.     const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); //antialias启用抗锯齿功能
    317.     renderer.setPixelRatio(window.devicePixelRatio); //设置渲染器的设备像素比例的方法，在不同设备展示一样的东西
    318.     renderer.setSize(width, height); //设置宽高
    319.     node.appendChild(renderer.domElement); //挂载渲染器DOM
    320.  
    321.     /**摄像机 */
    322.     const camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 10000);
    323.  
    324.     /**创建场景 */
    325.     const scene = new THREE.Scene();
    326.     scene.background = new THREE.Color(0x000000); //场景背景色
    327.     scene.environment = new THREE.PMREMGenerator(renderer).fromScene(new RoomEnvironment(renderer), 0.04).texture; //将场景的当前光照信息计算为环境贴图。第二个参数 0.04 指定了纹理的精度，数值越小表示精度越高，但计算时间也越长。
    328.  
    329.     /**操控摄像机的控制器 */
    330.     const controls = new OrbitControls(camera, renderer.domElement);
    331.     controls.update(); //更新控制器的状态。在动画函数中也需要执行
    332.     controls.enablePan = true; //是否启用控制器的右键平移功能。
    333.     controls.enableDamping = true; //是否启用惯性功能
    334.  
    335.     return {
    336.         /**渲染器 */
    337.         renderer,
    338.         /**摄像机 */
    339.         camera,
    340.         /**场景 */
    341.         scene,
    342.         /**操控摄像机的控制器 */
    343.         controls,
    344.     };
    345. };
    346. /**初始化其它设备，如性能展示器、clock时钟 */
    347. const initOtherDevice = (node: HTMLElement) => {
    348.     /**用于在 WebGL 渲染中显示性能统计信息的工具 */
    349.     const stats = new Stats();
    350.     stats.dom.style.position = "absolute";
    351.     node.appendChild(stats.dom); //挂载性能展示DOM
    352.  
    353.     /**clock对象，用于跟踪时间的流逝，并在动画循环中提供统一的时间更新 */
    354.     const clock = new THREE.Clock();
    355.  
    356.     return {
    357.         /**用于在 WebGL 渲染中显示性能统计信息的工具 */
    358.         stats,
    359.         /**clock对象，用于跟踪时间的流逝，并在动画循环中提供统一的时间更新 */
    360.         clock,
    361.     };
    362. };
    363. /**初始化三维坐标系、网格帮助器、包围盒帮助器 */
    364. const initHelper = (size: number, center: THREE.Vector3, model: THREE.Group) => {
    365.     /**AxesHelper：辅助观察的坐标系 */
    366.     const axesHelper = new THREE.AxesHelper(size);
    367.     axesHelper.position.copy(center); //三维坐标系的位置
    368.  
    369.     /**网格帮助器 */
    370.     const gridHelper = new THREE.GridHelper(size, size);
    371.     gridHelper.position.copy(center); //网格的位置
    372.  
    373.     /**新包围盒辅助展示 */
    374.     const boundingBoxHelper = new THREE.BoxHelper(model); //创建一个BoxHelper对象，传入模型的网格对象作为参数
    375.     boundingBoxHelper.material.color.set(0xff0000); //将包围盒的材质设置为红色
    376.  
    377.     return {
    378.         /**辅助观察的帮助器 */
    379.         helper: {
    380.             /**辅助观察的坐标系 */
    381.             axesHelper,
    382.             /**网格帮助器 */
    383.             gridHelper,
    384.             /**包围盒轮廓，可以添加到场景中 */
    385.             boundingBoxHelper,
    386.         },
    387.     };
    388. };
    389. /**获得模型包围盒的数据，并计算模型位置、缩放倍数，设置相机位置等，最后把模型添加到场景。 */
    390. const getBoxAndScale = (model: THREE.Group, camera: THREE.PerspectiveCamera, controls: OrbitControls, scene: THREE.Scene) => {
    391.     /**获取模型包围盒 */
    392.     const boundingBox = new THREE.Box3().expandByObject(model);
    393.     /**获取包围盒的size */
    394.     const size = boundingBox.getSize(new THREE.Vector3()); //设置size
    395.     /**中心坐标*/
    396.     const center = boundingBox.getCenter(new THREE.Vector3()); // 计算包围盒中心坐标,并将中心坐标保存在center向量中
    397.     /**设置的缩放倍数，根据实际情况进行调整 */
    398.     const scale = 10 / Math.max(size.x, size.y, size.z); // 分母是期望的模型大小
    399.     // const scale = 1;
    400.     /**中心点的三维向量 * 放大值 */
    401.     const centerWithScale = center.clone().multiplyScalar(scale);
    402.     /**盒子的三维向量 * 放大值 */
    403.     const sizeWithScale = size.clone().multiplyScalar(scale);
    404.  
    405.     // console.log("boundingBox", boundingBox);
    406.     // console.log("size", size);
    407.     // console.log("center", center);
    408.     // console.log("scale", scale);
    409.     // console.log("centerWithScale", centerWithScale);
    410.     // console.log("sizeWithScale", sizeWithScale);
    411.  
    412.     model.scale.set(scale, scale, scale); //设置模型缩放倍率 
    413.     camera.position.copy(sizeWithScale); //设置摄像机的初始位置，乘上缩放倍数
    414.     controls.target.copy(centerWithScale); //设置摄像机旋转和放大等操作的目标点
    415.     scene.add(model); //把模型添加进去
    416.  
    417.     return {
    418.         /**包围盒有关的信息 */
    419.         box: {
    420.             /**缩放倍率 */
    421.             scale,
    422.             /**放大后的中心点的三维向量 */
    423.             centerWithScale,
    424.             /**放大后的盒子的三维向量 */
    425.             sizeWithScale,
    426.         },
    427.     };
    428. };
    429. /**获取模型上的全部动画，返回动画实例列表，后续操控实例列表即可 */
    430. const getAnimations = (gltf: GLTF, mixer: THREE.AnimationMixer) => {
    431.     const actionList: THREE.AnimationAction[] = [];
    432.     // 遍历模型的动画数组，为个动画创建剪辑并添加到混合器中
    433.     for (let i = 0; i < gltf.animations.length; i++) {
    434.         const animation = gltf.animations[i];
    435.         const action = mixer.clipAction(animation); //创建
    436.         actionList.push(action);
    437.         action.setLoop(THREE.LoopRepeat, Infinity); // 设置动画播放相关参数：循环模式、重复次数
    438.         action.clampWhenFinished = true; // 动画在播放完成后会停留在最后一帧，不再继续播放  （但是上面设置了循环播放，所以不影响）
    439.         // action.play(); // 播放动画
    440.     }
    441.     return actionList;
    442. };
    443. /**获取模型身上的原始材质，返回map */
    444. const getOriginalMesh = (model: THREE.Group) => {
    445.     const map = new Map<THREE.Mesh, THREE.Mesh["material"]>();
    446.     //设置模型原始材质
    447.     model.traverse((object) => {
    448.         if (object instanceof THREE.Mesh) {
    449.             map.set(object, object.material);
    450.         }
    451.     });
    452.     return map;
    453. };
    454.

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

    1. // /components/ShowModel/type.ts
    2.  
    3. //...
    4.  
    5. /**展示3D模型的组件Props */
    6. export interface showModelProps {
    7.   /**要展示的模型的URL */
    8.   url: string;
    9.   /**组件最外层的style。在这里面指定宽高等。不指定宽高，将会适配父元素宽高 */
    10.   style?: CSSProperties;
    11.   /**工具栏的扩展render。参数是内部数据  */
    12.   toolBarRender?: (instance: GLBModel) => ReactNode;
    13. }
    14.  
    15. /**各个工具的开关和设置等，外部只读 */
    16. export interface setting {
    17.   /**是否开启了骨架模式 */
    18.   wireframe: boolean,
    19.   /**是否开启了法线模式 */
    20.   normal: boolean,
    21.   /**是否开启了动画 */
    22.   animation: boolean
    23.   /**是否开启了坐标系 */
    24.   axesHelper: boolean
    25.   /**是否开启了网格 */
    26.   gridHelper: boolean
    27.   /**是否开启了包围盒 */
    28.   boundingBoxHelper: boolean
    29.   /**背景色，十六进制字符串 */
    30.   bgcolor: string
    31. }
    32.  
    33. /**失败的回调函数 */
    34. 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, ....... );  //加载模型

    1. // /components/ShowModel/index.tsx
    2.  
    3. import cssStyle from "./index.module.css";
    4. import { useState, useRef, useEffect } from "react";
    5. import { Button, ColorPicker, Dropdown, Progress, Space, Switch } from "antd";
    6. import { showTip } from "../../utils";
    7. import GLBModel from "./GLBModel";
    8. import { setting, showModelProps } from "./type";
    9. import { DownOutlined } from "@ant-design/icons";
    10.  
    11. /**展示3D模型 */
    12. export default function ShowModel({ url, style = {}, toolBarRender }: showModelProps) {
    13.   /**用来承载three画布的容器 */
    14.   const threeDivRef = useRef<HTMLDivElement>(null);
    15.   const [progress, setProgress] = useState(0); //进度条，大于100时隐藏，小于0时代表加载失败
    16.   const [instance, setInstance] = useState<GLBModel>(); //模型实例。
    17.   const [setting, setSetting] = useState({
    18.     wireframe: false,
    19.     normal: false,
    20.     animation: false,
    21.     axesHelper: false,
    22.     gridHelper: false,
    23.     boundingBoxHelper: false,
    24.     bgcolor: "#000000",
    25.   }); //工具栏配置
    26.  
    27.   /**初始化模型并挂载 */
    28.   const init = (node: HTMLDivElement) => {
    29.     const modelShow = new GLBModel(node, (_setting) => setSetting({ ..._setting }));
    30.     setInstance(modelShow);
    31.     setProgress(0); //开始进度条
    32.     modelShow.loadGlb(
    33.       url,
    34.       function (gltf) {
    35.         setProgress(101); //隐藏进度条
    36.       },
    37.       function (e) {
    38.         // 加载进度的处理逻辑，这里实际上是AJAX请求，如果是本地文件的话就不会有加载进度条
    39.         if (e.lengthComputable) {
    40.           const percentComplete = (e.loaded / e.total) * 100;
    41.           if (percentComplete <= 100) {
    42.             setProgress(parseInt(percentComplete.toFixed(2)));
    43.           } else {
    44.             //有时候会有超出100的情况
    45.             setProgress(100);
    46.           }
    47.         }
    48.       },
    49.       function (e) {
    50.         setProgress(-1); //错误进度条
    51.         showTip("加载失败，请F12查看报错", "error", 5);
    52.       }
    53.     );
    54.     return () => {
    55.       modelShow.destory();
    56.     };
    57.   };
    58.   /**自定义下拉框渲染 */
    59.   const dropdownRender = () => {
    60.     if (!instance) return <>;
    61.     const items = [
    62.       <Switch
    63.         onChange={(open) => instance.changeAxesHelper(open)}
    64.         checkedChildren="坐标系"
    65.         unCheckedChildren="坐标系"
    66.         checked={setting.axesHelper}
    67.       />,
    68.       <Switch
    69.         onChange={(open) => instance.changeGridHelper(open)}
    70.         checkedChildren="网格面"
    71.         unCheckedChildren="网格面"
    72.         checked={setting.gridHelper}
    73.       />,
    74.       <Switch
    75.         onChange={(open) => instance.changeBoundingBoxHelper(open)}
    76.         checkedChildren="包围盒"
    77.         unCheckedChildren="包围盒"
    78.         checked={setting.boundingBoxHelper}
    79.       />,
    80.       <Button onClick={() => instance.cameraOriginalPosition()}>相机归位Button>,
    81.       <ColorPicker showText onChange={(_, hex) => instance.changeBgcolor(hex)} size="small" value={setting.bgcolor} />,
    82.     ];
    83.     return (
    84.       <div style={{ ...bgStyle, padding: "10px", borderRadius: "10px" }}>
    85.         {items.map((k, i) => {
    86.           return (
    87.             <div key={i} style={{ margin: "5px 0" }}>
    88.               {k}
    89.             div>
    90.           );
    91.         })}
    92.         {toolBarRender && toolBarRender(instance)}
    93.       div>
    94.     );
    95.   };
    96.  
    97.   useEffect(() => {
    98.     if (!url) {
    99.       showTip("请传递模型URL！", "error", 5);
    100.       setProgress(-1);
    101.       return;
    102.     }
    103.     //在react18的开发环境下，useEffect会执行两次，所以需要在return中消除副作用
    104.     const dom = threeDivRef.current;
    105.     if (dom) {
    106.       setInstance(undefined);
    107.       const destory = init(dom);
    108.       return destory;
    109.     }
    110.   }, [url]);
    111.   return (
    112.     <div className={`${cssStyle.showModel}`} style={style}>
    113.       {instance && progress > 100 && (
    114.         <Space className="toolList" style={bgStyle}>
    115.           <Switch onChange={(open) => instance.changeWireframe(open)} checkedChildren="骨架" unCheckedChildren="骨架" checked={setting.wireframe} />
    116.           <Switch onChange={(open) => instance.changeNormal(open)} checkedChildren="法线" unCheckedChildren="法线" checked={setting.normal} />
    117.           <Switch
    118.             onChange={(open) => instance.changeAnimation(open, (e) => showTip(e, "error"))}
    119.             checkedChildren="动画"
    120.             unCheckedChildren="动画"
    121.             checked={setting.animation}
    122.           />
    123.           <Dropdown dropdownRender={dropdownRender}>
    124.             <DownOutlined className="cursor-pointer" />
    125.           Dropdown>
    126.         Space>
    127.       )}
    128.       <div className="canvasContain" ref={threeDivRef}>div>
    129.       <div className="progress">
    130.         <Progress
    131.           type="dashboard"
    132.           status={progress < 0 ? "exception" : "active"}
    133.           percent={progress}
    134.           style={{ opacity: progress > 100 ? "0" : "1" }}
    135.           strokeColor={{ "0%": "#87d068", "50%": "#ffe58f", "100%": "#ffccc7" }}
    136.         />
    137.       div>
    138.       <div className="tip">
    139.         鼠标左键可以旋转，右键可以进行平移，滚轮可以控制模型放大缩小
    140.       div>
    141.     div>
    142.   );
    143. }
    144.  
    145. const bgStyle = { backgroundImage: "linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%)" };

    （2）index.module.css

    less版： 

    1.  /* /components/ShowModel/index.module.less  */ 
    2.  
    3. .showModel {
    4.      width: 100%;
    5.      height: 100%;
    6.      position: relative;
    7.      background-color: #000;
    8.  
    9.  
    10.      :global {
    11.  
    12.          //工具栏  
    13.          .toolList {
    14.              position: absolute;
    15.              top: 0;
    16.              right: 50%;
    17.              transform: translate(50%);
    18.              z-index: 99;
    19.              display: flex;
    20.              padding: 10px;
    21.              border-bottom-right-radius: 10px;
    22.              border-bottom-left-radius: 10px;
    23.              opacity: 0.8;
    24.              align-items: center;
    25.          }
    26.  
    27.          //antd 圆环进度条中间文字的颜色
    28.          .ant-progress-text {
    29.              color: white !important;
    30.          }
    31.  
    32.          //画布的容器
    33.          .canvasContain {
    34.              display: flex;
    35.              align-items: center;
    36.              justify-content: center;
    37.              width: 100%;
    38.              height: 100%;
    39.              position: relative;
    40.          }
    41.  
    42.          //进度条
    43.          .progress {
    44.              position: absolute;
    45.              top: 50%;
    46.              left: 50%;
    47.              transform: translate(-50%, -50%);
    48.              z-index: 9999;
    49.              color: white;
    50.  
    51.              .ant-progress {
    52.                  transition: all 1s;
    53.              }
    54.          }
    55.  
    56.          //提示
    57.          .tip {
    58.              position: absolute;
    59.              bottom: 0;
    60.              left: 50%;
    61.              transform: translate(-50%);
    62.              font-weight: 900;
    63.              white-space: nowrap;
    64.              color: white;
    65.          }
    66.  
    67.      }
    68.  
    69.  }

    css版

    1.  /* /components/ShowModel/index.module.css */ 
    2.  
    3. .showModel {
    4.   width: 100%;
    5.   height: 100%;
    6.   position: relative;
    7.   background-color: #000;
    8. }
    9. .showModel :global .toolList {
    10.   position: absolute;
    11.   top: 0;
    12.   right: 50%;
    13.   transform: translate(50%);
    14.   z-index: 99;
    15.   display: flex;
    16.   padding: 10px;
    17.   border-bottom-right-radius: 10px;
    18.   border-bottom-left-radius: 10px;
    19.   opacity: 0.8;
    20.   align-items: center;
    21. }
    22. .showModel :global .ant-progress-text {
    23.   color: white !important;
    24. }
    25. .showModel :global .canvasContain {
    26.   display: flex;
    27.   align-items: center;
    28.   justify-content: center;
    29.   width: 100%;
    30.   height: 100%;
    31.   position: relative;
    32. }
    33. .showModel :global .progress {
    34.   position: absolute;
    35.   top: 50%;
    36.   left: 50%;
    37.   transform: translate(-50%, -50%);
    38.   z-index: 9999;
    39.   color: white;
    40. }
    41. .showModel :global .progress .ant-progress {
    42.   transition: all 1s;
    43. }
    44. .showModel :global .tip {
    45.   position: absolute;
    46.   bottom: 0;
    47.   left: 50%;
    48.   transform: translate(-50%);
    49.   font-weight: 900;
    50.   white-space: nowrap;
    51.   color: white;
    52. }

    （3）type.ts

    1.  /* /components/ShowModel/type.ts */ 
    2.  
    3. import { CSSProperties, ReactNode } from "react";
    4. import GLBModel from "./GLBModel";
    5.  
    6.  
    7.  
    8. /**展示3D模型的组件Props */
    9. export interface showModelProps {
    10.   /**要展示的模型的URL */
    11.   url: string;
    12.   /**组件最外层的style。在这里面指定宽高等。不指定宽高，将会适配父元素宽高 */
    13.   style?: CSSProperties;
    14.   /**工具栏的扩展render。参数是内部数据  */
    15.   toolBarRender?: (instance: GLBModel) => ReactNode;
    16. }
    17.  
    18.  
    19.  
    20.  
    21.  
    22. /**各个工具的开关和设置等，外部只读 */
    23. export interface setting {
    24.   /**是否开启了骨架模式 */
    25.   wireframe: boolean,
    26.   /**是否开启了法线模式 */
    27.   normal: boolean,
    28.   /**是否开启了动画 */
    29.   animation: boolean
    30.   /**是否开启了坐标系 */
    31.   axesHelper: boolean
    32.   /**是否开启了网格 */
    33.   gridHelper: boolean
    34.   /**是否开启了包围盒 */
    35.   boundingBoxHelper: boolean
    36.   /**背景色，十六进制字符串 */
    37.   bgcolor: string
    38. }
    39.  
    40. /**失败的回调函数 */
    41. export type onErr = (e: any) => void

    （4）utils

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

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

    2.测试示例

    任意一个想使用的地方中

    1.  
    2. import ShowModel from "./components/ShowModel";
    3.  
    4. const App = () => {
    5.   return (
    6.     <div style={{ width: "100vw", height: "100vh" }}>
    7.       <ShowModel url="https://threejs.org/examples/models/gltf/LittlestTokyo.glb">ShowModel>
    8.     div>
    9.   );
    10. };
    11. export default App;

    四、结语

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

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

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

           

  • 相关阅读:
    view-design组件使用Vue+Input+Table实现动态搜索值并单选
    动态规划——背包问题
    Keycloak服务开发-认证服务SPI
    分支与循环（2）
    Kubernetes二进制部署——理论部分
    python每日一题【剑指 Offer 26. 树的子结构】
    C++常成员函数 - const 关键字
    剑指offer64 求1+2+3+...+n
    React.createRef
    C#开发的OpenRA游戏之属性RenderSprites（8）
  • 原文地址：https://blog.csdn.net/m0_64130892/article/details/133501096