three.js使用InstancedMesh大场景渲染大量相同物体的实例化网格

最新推荐文章于 2025-09-09 19:01:51 发布
原创 最新推荐文章于 2025-09-09 19:01:51 发布 · 1.7k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #开发语言

在three.js中，通过一般方法渲染大量相同网格会导致性能问题。例如创建1000个立方体会造成卡顿。文章提出使用InstancedMesh代替，如`newTHREE.InstancedMesh(geometry,material,1000)`，可以显著提高性能，将帧率从372提升至22，展示了一种有效的优化策略。

1. three.js使用InstancedMesh大场景渲染大量相同物体的实例化网格

在three.js中有时候我们需要渲染大量的相同几何体，材质的网格，但是如果用一般的方法来实现的花，通常性能不佳，卡顿。
例如我们创建1000个立方体，添加到场景中

for (let i = 0; i < 1000; i++) {
   
   
			const geometry = new THREE.BoxGeometry(
最低0.47元/天 解锁文章
小秧@
关注
ThreeJS入门（117）：THREE.InstancedMesh 知识详解，示例代码
大剑师兰特的GIS世界
10-15 1823
`THREE.InstancedMesh` 是 Three.js 中用于实例化大量相似几何体的一种高效方法。它通过使用硬件加速的实例化技术来渲染多个共享同一几何体和材质的对象，从而减少了内存消耗和提高了渲染性能。
Threejs入门之二十：使用InstancedMesh(实例化网格)批量创建物体
九仞山的专栏
04-08 2626
详细介绍了InstancedMesh实例化网格的构造函数，属性和方法，并通过实现一个由小球组成的10*10*10的立方体的案例来深入了解InstancedMesh的用法
three.js中的instancedMesh类优化渲染多个同网格材质的模型
VcB之殇的博客
04-21 1454
three.js的官网是这样介绍的：InstancedMesh实例化网格是特殊版本的Mesh(具有mesh的相关属性和方法)，可以用来渲染大量的具有相同几何体和材质、但具有不同世界变换的物体。InstancedMesh可以减少draw call的数量，从而提升程序整体的渲染性能。听起来就和我们想要的效果很搭。InstancedMesh类可以很好地优化那些具有大量的共享材质和网格，但是有不同平移旋转缩放的模型，就类似于blender中使用了Alt+D复制了很多份，然后每一个模型的位姿又有不同。
threejs 实例化网格（InstancedMesh）
weixin_43974540的博客
07-26 3114
实例化网格（InstancedMesh） 一种具有实例化渲染支持的特殊版本的Mesh。你可以使用 InstancedMesh 来渲染大量具有相同几何体与材质、但具有不同世界变换的物体。 使用 InstancedMesh 将帮助你减少 draw call 的数量，从而提升你应用程序的整体渲染性能。 当前的实现需要InstancedMesh和其它3D物体间不共享材质。 其构造函数，如图 实现方式： function testInstanceMesh(count){ //100万 卡顿 if(!coun
3D建模优化【Three.js】LOD与实例化渲染实战
最新发布
afkmim409的博客
09-09 257
LOD技术通过根据物体与相机的距离切换不同精度的模型，减少渲染负担。
Three.js使用InstancedMesh实现性能优化
2301_78834737的博客
07-30 1584
有这么一种场景：需要渲染一座桥，桥有很多桥柱，桥柱除了位置与倾斜角度不完全相同外，其他均相同，由于桥柱数量很大，使用three.js绘制较为卡顿，如何优化？在three.js中，由于绘制一个几何体需要调用一次draw call，绘制很多几何体就很消耗性能，所以合并多个几何体为一个几何体能减少draw call，从而实现绘制性能优化。在图形渲染中，绘制调用的数量对性能有很大影响，较少的绘制调用通常意味着更高的性能，因为GPU在处理绘制调用时需要切换上下文和状态，这会导致一定的开销。
Threejs,InstancedMesh变换操作
樱花会昔处的专栏
06-08 1496
现在我们有了第一次选择的四元数，现在只需要找到第二次旋转的四元数，相乘即可，这里是按照转轴方向是（-1,0,0），角度是 90 度,重复3次，或者旋转轴（1,0,0）旋转90度，执行一次即可。本想用InstancedMesh的getMatrixAt 方法获取的，结果代码报错，因为模型的矩阵存储在缓存数组中，此方法不通，但是既然有矩阵的缓存数组，我们按每个矩阵16个去处理，就能获取到。旋转实际上就是四元数计算，两个四元数相乘就可以把两次旋转合并为一次旋转，得到一个相对于初始位置的四元数。
three.js 性能优化 实例化网格模型InstancedMesh
sinat_35823840的博客
01-20 5540
使用场景 当我们有大量的相同的几何体形状和相同的材质时，比如我有一千个立方几何体要渲染，他们的材质时相同的，但是坐标、大小矩阵变换这些不相同。 如果按照常规的一个个Mesh的渲染，要生成一千个geometry，一千个material，一千个Mesh，占用太多内存和性能。 我们可以使用合并几何体的方式，但这样合并后变为一个个体 ，失去了对单个小模型的控制。three.js还提供了InstanceMesh实例化模型可以实现。 关于两种方法的对比： InstanceMesh 合并几何体 Mate
threejs学习04-InstancedMesh和Raycaster用户交互（获取鼠标位置、设置射线、射线与mesh的交互）
m0_37755995的博客
10-24 663
threejs学习04-InstancedMesh和Raycaster用户交互（获取鼠标位置、设置射线、射线与mesh的交互）
three-instanced-mesh:围绕THREE.InstancedBufferGeometry的包装器
05-08
三步网格 THREE.InstancedBufferGeometry的更高级别抽象。 有关webgl级别的概述，请查看 。 要更深入地了解其工作原理，。 笔记 THREE.InstancedBufferAttribute的签名THREE.InstancedBufferAttribute随版本R96更改。 此软件包的0.96.0应该与> = R96一起使用，而先前的则与旧版本一起使用。 0.96.1应该适用于所有三个版本。 原料药 方法： .setPositionAt（index：Int，position：THREE.Vector3） 更新给定索引处的position属性。 .setQuaternionAt（index：Int，四元数：THREE.Quaternion） 在给定索引处更新四元数属性。 .setScaleAt（index：Int，scale：THREE.Vector3
Threejs多个相同格式模型同一页面加载切换
qq_53479183的博客
03-21 1602
Threejs多个相同格式模型单页面切换加载
three.js 多实例渲染 InstancedMesh提升性能
stonerao
04-26 6031
简介 官网简介： A special version of Mesh with instanced rendering support. Use InstancedMesh if you have to render a large number of objects with the same geometry and material but with different world tran...
Threejs 动态修改InstanceMesh实例化几何体中单个实例的颜色
dabaooooq的博客
05-11 1274
instanceMesh是使用InstancedMesh类来创建实例化的几何体。它适用于当需要大量重复的几何体时，但是每个实例之间有不同的变换属性（如位置、旋转、缩放等）。场景：在InstanceMesh多实例创建后，动态修改某个实例的颜色。思路：InstanceMesh外层材质颜色置为白色，创建时调用setColorAt对每个实例设置color要创建后修改，需要为InstanceMesh添加一个数组，按序存放每个小实例的id，根据id检索数组，获取当前实例在多实例中
使用ThreeJs搭建BIM模型浏览器，超大模型的分时渲染
疯狂的蒲公英
11-09 9275
使用Threej搭建大场景，超大模型渲染的时候特别卡，渲染构件数量过多，顶点多，数据量大，一次性渲染耗时超长，FPS小，甚至掉到5以下。这种情况直接的体验是，无法操作！ 那如何让它变成优先响应鼠标操作呢，至少让人体验起来不卡。首先我们看一下Revit，如果模型特别大，转换起来是什么样的。 http://www.qmodel.cn/file/20191205/rvt/1.mp4 是不是发现Revit也闪得十分厉害？在拖的时候，几十栋的园区，也只剩下1栋房子还在，其他的都等拖完了再慢慢渲染出来。这种特性.
ThreeJs 关于InstancedMesh中的的单个门模型旋转动画（其他动画同理）
m0_73348873的博客
05-22 1239
/ console.log('门宽', doorWidth, '是否顺时针', isClockwise, '方位角', angle, '门对象', doorsObj, '门id' ,doorId)const mjjName = doorsObj.name.substring(0, doorsObj.name.indexOf('-档案柜')) // 获取密集架名称。
threejs——多重场景渲染
weixin_41770018的博客
02-03 1470
前言 摸鱼时发现了这threejs实现的效果，从效果图中可以看出来，在滚动页面的时候，模型在进入不同的场景，或者说进入不同的页面，渲染模式改变了，下面我们一步一步拆解出这种效果是怎么实现的，首先第一步，先找到一个合适的模型，我是直接下载的这个原地址的飞机模型，我们加入一些自己的思考和实践来实现出这个效果。希望大家能够跟着一起做，效果实现起来很简单，但是过程中遇到的小细节，还是需要好好把握一下...
【亲测免费】 三个实例化网格（Three.js InstancedMesh）实战指南
gitblog_00697的博客
09-01 1238
三个实例化网格（Three.js InstancedMesh）实战指南 项目介绍 三个实例化网格（Three.js InstancedMesh）是一个针对Three.js库的扩展，优化了大规模对象渲染性能。它提供了一个更高效的方式来处理大量相同或相似物体的渲染，通过实例化技术减少Draw Call的数量，从而显著提高渲染效率。此项目由lume维护，基于Three.js的InstancedBuff...
THREE.JS InstancedMesh 消失,无法点击
09-14 545
THREE.JS InstancedMesh 实例化后，部分模型区域消失,无法点击
three.js+WebGL踩坑经验合集(10.3):镜像问题又一坑——THREE.InstancedMesh/THREE.Mesh的双面问题
iloveas2014的专栏
09-02 1038
本文深入探讨了three.js中THREE.InstancedMesh的正反面光照问题及其解决方案。作者发现负定矩阵会导致面片显隐和光照方向错误，提出将正负矩阵分离到不同实例中的优化方案。同时分析了双面渲染(DoubleSide)的适用场景和潜在问题：虽然能解决部分可见性问题，但会引发光照计算错误和性能损耗。文章指出，双面渲染在图形编辑器等特定场景下有用，但在实体渲染中应谨慎使用。最后强调了3D场景中应尽量避免使用双面渲染，以减少bug和性能问题。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值