WEB端三维可视化（threejs）03

原创

已于 2022-02-07 14:53:10 修改 · 4.3k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #three.js

于 2021-12-28 17:58:50 首次发布

本文详细介绍了在three.js中使用gltf和obj+mtl格式加载模型的过程，对比了它们的优缺点，包括加载速度、资源占用及性能表现，并提供了压缩gltf模型的方法。

前言

上一篇主要写了如何创建一个场景，本篇写一下模型加载方面的细节。
目前threejs支持的模型格式有很多，gltf/glb、obj+mtl、fbx、dea等等…
主要推荐的模型格式：obj+mtl 或者 gltf/glb。

原因：
obj+mtl这种格式将模型信息、材质信息、贴图拆分开，相比较于其他来说，文件分散，分散后文件体积小，唯一的缺点是，文件套多了，注意命名，小心弄乱。
gltf呢，被称为模型界的JPEG，它可以在原有的基础上有损压缩（这部分放在后边），压缩后体积更小。

个人做了一下比较：同一个模型，不同的格式，由于模型体积较小，直接模拟了300个。
fbx：加载把GPU和CPU全部跑满，模型刚渲染几个就卡住了。
obj：因为模型文件比较分散，渲染了大概一半左右，后续也是卡住了。
gltf：虽然时间长了一点，但是加载完了，还能操作，就是操作的时候掉帧稍微严重。

测试模型效果：模型是拿官网的模型
在这里插入图片描述

接下来直接开始正文

一、加载进度：

官方抄的，修修改改就成这样了。把 onProgress 和 onError 两个参数给到 .load模型的函数结尾。
稍微简单了点。
或者感觉这种不太靠谱的直接去threejs官网找个示例。
引入：

import * as THREE from 'three'

var onProgress = function(xhr) {
   
   
  if (xhr.lengthComputable) {
   
   
    var percentComplete = xhr.loaded / xhr.total * 100
    // progressLoad.value = percentComplete;
    console.