Threejs中导入GLTF模型克隆后合并

简介: 这篇文章详细说明了在Three.js中如何导入GLTF模型,对其进行克隆,并将多个克隆模型合并成一个整体模型的过程。

很多场景中会需要同一个模型很多次,但是如果多次加载同一个模型会占用很高的带宽,导致加载很慢,因此就需要使用clone,也就是加载一个模型后,其他需要使用的地方使用clone的方式复制出多个同样的模型,再改变复制出来的模型位置,达到一次加载,多次使用。但另一个情况是克隆的模型是新的模型,在threejs的场景中是一个完整独立的,具有一个正常模型所有的属性,很大,加载和渲染需要花费很多的时间,那么就又需要对克隆出的模型进行合并,成为一个整体的模型放到threejs的场景中。

首先我们需要搭建一个threejs的场景,包括相机,灯光,渲染器等,这里为了方便看合并后的效果,再添加上State性能监视器。其他的场景搭建之前章节中都已存在这里就不贴代码了。性能监视器的代码如下

import Stats from 'three/addons/libs/stats.module.js';

this.stats = new Stats();
document.body.appendChild(this.stats.domElement);

然后加载一个模型,我这里使用一个料箱模型作为演示的模型。

    initModel(){
      const loader = new GLTFLoader()
      loader.load("/static/models/box.glb", (gltf) => {
        this.scene.add(gltf.scene)
      })
    },

然后开始clone料箱。先clone1000个,并修改每个料箱的位置,此时发现threejs渲染已经非常吃力,FPS已经掉帧到12了。

initModel(){
      const loader = new GLTFLoader()
      loader.load("/static/models/box.glb", (gltf) => {
        let originaMesh = gltf.scene.children[0];
        for (let i = 0; i < 100; i++) {
          for (let j = 0; j < 10; j++) {
            for (let k = 0; k < 10; k++) {
              let mesh = originaMesh.clone()
              mesh.position.set(i*6,j*6,k*10);
              this.scene.add(mesh)
            }
          }
        }
      })
    },

然后我们开始模型合并,模型合并其实就是将每个模型的geometry克隆出来,放到一个集合中,最终把这个集合渲染为一个整体的大模型。

initModel(){
      const loader = new GLTFLoader()
      loader.load("/static/models/box.glb", (gltf) => {
        this.scene.add(gltf.scene)
        let meshArr = []
        let originaMesh = gltf.scene.children[0];
        for (let i = 0; i < 100; i++) {
          for (let j = 0; j < 10; j++) {
            for (let k = 0; k < 10; k++) {
              let mesh = originaMesh.clone()
              mesh.position.set(i*6,j*6,k*10);
              mesh.updateMatrixWorld(true);
              const geometry = mesh.geometry.clone();
              geometry.applyMatrix4(mesh.matrixWorld);
              meshArr.push(geometry)
            }
          }
        }
        const bayGeometry = mergeGeometries(meshArr,true);
        const material = new THREE.MeshStandardMaterial({ color: '#0000FF' });
        const totalMesh = new THREE.Mesh(bayGeometry, material);
        totalMesh.name="大模型"
        this.scene.add(totalMesh);
      })
    },

最终通过模型合并,1000个料箱同时展示,FPS又回到了60,因为对于threejs来讲,只有一个模型了,渲染也是一次成型。

如果有疑问或者需要源码可以给我留言。

相关文章
|
存储 人工智能 图形学
GLB/GLTF在线纹理编辑
GLB文件中的纹理数据采用了嵌入式存储的方式,具有较小的文件体积和高效的数据传输,能够提高3D模型的加载速度和渲染质量。
293 1
|
编解码 图形学 C++
如何在Blender中压缩/减小GLTF模型的大小
Blender是一款功能强大的开源软件,旨在创建3D图形,动画和视觉效果。它支持多种文件格式的导入和导出,包括GLB,GLTF,DAE,OBJ,ABC,USD,BVH,PLY,STL,FBX和X3D。这种适应性使其成为各种3D项目和工作流程的宝贵工具。(https://www.blender.org/download/)。
500 0
|
2月前
|
图形学
ThreeJs创建管道效果
这篇文章介绍了在Three.js中创建管道(Tube)效果的方法和技术细节。
66 3
ThreeJs创建管道效果
|
2月前
|
应用服务中间件 nginx
ThreeJs导入外部3D模型
这篇文章详细介绍了如何在Three.js中导入并显示外部的3D模型,包括所需的准备工作和具体实现步骤。
201 0
|
4月前
|
Web App开发 JSON JavaScript
WebGL简易教程(十五):加载gltf模型
WebGL简易教程(十五):加载gltf模型
141 1
|
4月前
|
API Python
Blender导出带透明贴图的gltf模型
Blender导出带透明贴图的gltf模型
171 0
Blender导出带透明贴图的gltf模型
|
4月前
|
存储 前端开发 定位技术
osgEarth使用笔记4——加载矢量数据
osgEarth使用笔记4——加载矢量数据
165 0
|
存储 缓存 定位技术
ArcGIS Pro栅格数据批量预处理工具
ArcGIS Pro栅格数据批量预处理工具
437 0
|
算法 UED
GLTF编辑器的另一个作用
GLTF编辑器的另一个作用就是可以将fbx、dae、gltf等格式的模式转换成glb模型
165 0
|
存储 vr&ar 图形学
如何导出带有材质的GLB模型?
GLB格式作为一种优秀的3D文件格式,具备小巧高效、支持材质纹理、跨平台兼容等优点,在从设计到展示的整个工作流程中起到重要作用,促进了3D内容的创建、分享和交互。
364 0