THREEJS导入外部OBJ+MTL后内存优化

原创 已于 2022-01-20 14:57:17 修改 · 2.8k 阅读 · 14 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#three.js #内存优化 #obj #mtl #内存过大

于 2022-01-20 14:32:29 首次发布
本文针对石油化工3D数字孪生项目中出现的渲染速度慢及GPU内存占用过高的问题，通过对THREEJS的MTLLoader进行代码优化，显著提升了模型加载效率并降低了内存消耗。

背景

        近期做一个关于石油化工的3D数字孪生项目，模型均为客户那边提供，模型文件是obj+mtl+jpg组合。因为有较多局部控制动画，所以建模被要求拆分成多个obj模型，然后在场景中自动组合使用。

现象

用THREEJS加载模型添加到场景中后发现两个问题：

1.渲染速度很慢；

2.如果浏览器同时开两个或窗口，那么会出现黑屏闪一下，然后页面就全白了，场景也都没了（如下图所示）。

 

调查

经过调查发现，打开一个窗口时，GPU内存被占用3.6G，打开两个的时候直接飙到5.2G，我这里GPU专用内存是6G，所以打开三个的时候直接就蹦了，所以就出现了黑屏的现象。

分析

        我查看了客户提供的资源文件总大小，大概40M左右（obj+mtl+jpg），所以感觉应该不是导入文件过大问题。

        无意间修改了一个mtlLoader的代码，错把objLoader.setMaterials(materi

最低0.47元/天 解锁文章
three.js 加载obj+mtl模型
dmyc1027的博客
05-22 5096
本文提供了three.js中 实现将obj+mtl模型加载到场景中 的方法。 我们欲实现将桥模型加载到场景中，并对桥设置透明度： 实现过程： 分别导入three.js中的OBJLoader，MTLLoader，将mtl材质加载到obj模型上。 加载时在函数体内编写代码，对材质的透明度属性进行设置。本mtl材质由多个子模型material.wire组成，故在设置时需要对多个子模型进行设置。transparent为是否使用透明度，opacity为透明度数值。当然，也可以仅对一个子模型进行设置，从
three.js加载.obj文件和贴图.mtl
qq_38974376的博客
01-29 9737
使用three.js加载obj文件和贴图.mtl three.js webgl - OBJLoader2 basic usage body { font-family: Monospace; background-color: #000; color: #fff; margin: 0 0 0 0; padding: 0 0
Three.js加载obj+mtl文件，（机房演示效果图）
12-26
压缩文件包含了一个使用Three.js框架加载obj+mtl模型文件的3d机房实例效果，可用于参考如何使用Three.js加载3dMax之类的软件做出来的obj模型文件以及mtl材质文件。可本地运行（使用火狐浏览器），或者开启本地服务运行也可以。
obj + mtl 格式说明
热门推荐
互动人生
07-24 4万+
 OBJ(或 .OBJ)是一种开放的几何定义文件格式，最初由Wavefront Technologies公司开发，用以描述其Advanced Visualizer动画包。该格式已被其他3D图形应用供应商采纳，是一种被绝大多数普遍公认的格式。 OBJ文件格式为简单数据格式，它仅表现3D几何体，即顶点的位置、以顶点列表方式定义每个多边形的顶点、法向量和面的UV坐标，以及纹理顶点。顶点默认以逆时
使用ThreeJs搭建BIM模型浏览器，第九步-内存优化(1)
疯狂的蒲公英
10-11 3547
添加到场景的mesh，是通过geometry+materail生成的。如果场景内大量重复的构件，或者大量的构件的材质都是相同的，threejs提供这种方案节省内存：共享geometry 和materail。举例说明： 创建300个一样的圆，一般情况可能会写成下面这样 for (let i = 0; i < 300; i++) { let geometry = new THREE.Bo......
vue使用three.js引入外部obj，mtl模型.zip
05-31
在Vue.js应用中集成Three.js库来加载外部的3D模型，如.obj和.mtl文件，是一种常见的增强网页3D视觉效果的方法。Three.js是一个强大的JavaScript库，它为WebGL提供了一个简单易用的接口，使得在浏览器中创建复杂的3D...
vue使用threeJs导入obj和mtl
MrJovia的博客
02-08 1496
参考文章：https://blog.csdn.net/weixin_44601948/article/details/108502580 参考网站：http://www.webgl3d.cn/Three.js/ 1. 安装three npm i three npm i three-obj-mtl-loader npm i orbitcontrols 2. 引用 import * as THREE from "three"; import { OBJLoader, MTLLoader } from "t.
three.js加载obj+mtl文件 下载
06-28
在使用three.js加载.obj和.mtl文件之前，您需要先确保您已经正确地导入了three.js库，并且已经创建了一个WebGL渲染器和一个场景。 加载.obj和.mtl文件的过程分为两个步骤： 第一步是加载.obj文件。您可以使用THREE...
three.js导入外部模型—obj
赵佳佳的博客
03-09 4396
一、导入obj格式的模型 只加载obj文件：即只加载obj文件中的几何信息，不加载材质文件，系统自动设置phong网格材质 1、引入obj模型加载库OBJLoader.js <script src="./OBJLoader.js"></script> 2、定义obj模型加载器 var loader=new THREE.OBJLoader(); 3、进行加载 loader.load("./几何体.obj",function(obj){ console.log(obj); //可
ThreeJs之 加载OBJ和MTL文件
Rock的专栏
05-16 2574
import { DDSLoader } from '/three.js/three.js-master/examples/jsm/loaders/DDSLoader.js'; import { MTLLoader } from '/three.js/three.js-master/examples/jsm/loaders/MTLLoader.js'; import { OBJLoader } from '/three.js/three.js-master/examples/jsm/loaders/OBJ.
three.js加载obj+mtl文件源码
03-21
three.js加载obj+mtl文件 给obj模型添加纹理
threejs加载obj文件
09-25
threejs加载obj文件，附件主要实现了threejs对obj文件的加载，及使用相机及光的一些调节，希望能给大家带来帮助，下载后直接运行即可看到效果。
obj格式三维模型+mtl贴图，实测可用
05-03
obj格式三维模型+mtl贴图，实测可用,我的博客下面有一篇名为 《用python加载obj格式三维模型(加mtl贴图) 》的文章可以看到效果图
Three.js加载obj+mtl(OBJLoader2)
weixin_43974540的博客
03-27 7121
官方案例：添加链接描述 方法实现： function addObjNew(objDef){//新版本写法 var objLoader = new THREE.OBJLoader2(); var callbackOnLoad = function ( event ) { model=event.detail.loaderRootNode;//获取模型 model.children.for...
【Threejs进阶教程-优化篇】2. 卡顿与内存管理(一)
qq_42760477的博客
03-14 6047
Threejs进阶教程，优化篇，卡顿与内存管理，本文从demo的角度，讲解如何加载10万个盒子，并逐步分析为什么模型要按照标准来处理
three.js 性能优化
Never_St0p_miss的博客
12-15 760
three.js性能优化
HTML版的使用three.js加载obj和mtl文件并上贴图
小人物的点点滴滴
09-09 3536
目录效果图全部代码另： [Vue版的](https://blog.csdn.net/weixin_44601948/article/details/108502580) 效果图 全部代码 <!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - loaders - OBJ MTL loader</title> <meta charset="utf-8">
【Threejs进阶教程-优化篇】3. 卡顿与内存管理(二)
最新发布
qq_42760477的博客
06-08 2362
Threejs进阶教程，优化篇，卡顿与内存管理，本文从demo的角度，逐步分析贴图，光源，阴影对性能的影响
使用three.js加载obj+mtl文件
红鹤的博客
01-05 3万+
因在项目中运用到WEBGL的技术。所以研究了一下下。three.js库看来十分强大,此处为加载带材质的obj文件 1.下载相关js    https://threejs.org/     thee.js可去官网下载最新版本 2.搭建基本的wenGL场景 body{ margin: 0; overflow: hidden; }
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值