前言

上一篇主要写了如何创建一个场景，本篇写一下模型加载方面的细节。
目前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.log(Math.round(percentComplete, 2) + '% downloaded')}
}
var onError = function() { }

二、加载模型（gltf & obj）

02篇里定义了初始化加载函数 init() ,这部分直接加进去执行即可。

1、gltf

用到 Draco 解压缩的时候，注意把three资源包路径下的【 three\examples\js\libs\draco 】整个draco文件夹拷出来放到项目目录下，目录自定吧，个人测试，不管是vscode 或者Builder 这种编辑器还是vue 项目或者常规 HTML写法里，只要不是在three资源包里，放在外边静态资源文件夹下都可以。

引入

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'

function initModel() {const gltf_loader = new GLTFLoader()const dracoLoader = new DRACOLoader()dracoLoader.setDecoderPath('./draco/')gltf_loader.setDRACOLoader(dracoLoader)gltf_loader.load('./static/models/male02.gltf', (gltf) => {mastermodel = gltf.scenescene.add(planemodel)}, onProgress, onError)
}

2、obj+mtl

引入

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'

function initModel(){var mtlLoader = new MTLLoader();mtlLoader.setPath('./static/models/test/');mtlLoader.load('male02.mtl',(materials) => {materials.preload()var objLoader = new OBJLoader()objLoader.setMaterials(materials)objLoader.setPath('./static/models/test/');objLoader.load('male02.obj',(object) => {scene.add(object)}, onProgress, onError)});
}

三、gltf模型压缩

gltf一般情况下可以压缩，可以通过 Blender 工具或者gltf-pipeline 插件压缩，注意——【有损】——两个字，请按照自身需要的效果进行压缩。

1、Blender分级别压缩

选择左上角【文件—>导出—>gltf2.0】，值得注意的是导出面板右侧【导出格式】和【压缩】这两个选项。

2、gltf-pipeline插件进行Draco压缩

通过【npm install gltf-pipeline】安装插件

cd 到gltf根目录执行【gltf-pipeline -i male02.gltf -o male02Draco.gltf -d】，l命令字符：-i是当前导入文件路径input，-o是当前导出文件路径output，-d是使用Draco压缩。

下边这个是我自己的模型，相比较内存占用少了一半。

WEB端三维可视化（threejs）03相关推荐

WEB端三维可视化（threejs）01
WEB端三维可视化(初识)threejs01 前言一.初识二.nodejs 三.引入threejs库前言记录一下学习笔记一.初识一年前从网上爬了个web端的三维demo,从此接触到了一个新 ...
WEB端三维可视化（threejs）02
前言(大部分解释都在代码注释上边) 上一个主要说自己选择的web引擎和前置安装步骤,接着直接开荤,进入正文. 本人的代码大部分都很简单,方便自己看,也方便各位同学们学习,所以不要吐槽. 个人认为:th ...
Web端3D可视化引擎HOOPS Communicator读取10G超大模型测试 | 数字孪生技术
前言: HOOPS Communicator是专为在云端和Web上构建工程应用程序的3D开发工具包.它针对Web工作流.浏览器和工程图形进行了优化.研发小组花了20多年的时间来研发HOOPS Visu ...
阿里云物联网平台web端，可视化开发，简单实例
Web可视化阿里云物联网平台提供了一种可快速开发的web服务,只需要拖入一些控件,做一些配置就可以完成一个简单的物联网web应用,对单一场景,需求简单的项目非常实用. 首先进入物联网平台,打开开发者 ...
web端的shader Threejs飞线
目标之前想用粒子来实现一下飞线的效果,看到很多大佬的代码发现使用粒子会是一个不错的选择,因为粒子的渲染比较省性能,之前看到有人使用圆形的粒子后来发现其实普通的正方形的粒子就行,因为在线的粗度比较小 ...
Web 端的下一代三维图形
原文地址:Next-generation 3D Graphics on the Web 原文作者:Dean Jackson 译文出自:掘金翻译计划本文永久链接:github.com/xitu/gol ...
WEB端显示三维地形模型
注:正常在WEB上显示三维地形首选Cesium,本文内容仅作为研究,展示文章用DEM制作通用三维地形模型中制作的局部三维地形模型 Cesium是可以很容易的实现在WEB端三维地形的,下面的图是分别是使 ...
Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端（web端）、数据可视化组件库（数据大屏）、动画组件库、3D组件库】
Vue常用的组件库大全[前端工程师必备] (一)移动端常用组件库 1)Vant ui 2)Cube UI 3)VUX 4) NuTUI 5)Mint ui 6)Varlet UI 7)OnsenUI ...
Axure高保真智慧消防远程监管系统数据可视化大屏看板+web端高保真大数据分析平台看板+大数据交换配置管理平台大屏动态可视化看板
作品介绍:Axure高保真智慧消防远程监管系统数据可视化大屏看板+web端高保真大数据分析平台看板+大数据交换配置管理平台大屏动态可视化看板原型交互及下载链接:https://www.pmdaniu ...

WEB端三维可视化（threejs）03

前言