WebGL（ThreeJS）加载乐高Ldraw模型案例

在ThreeJS就有加载乐高Ldraw的例子，上面是加载MPD文件，相当于当所有的dat模型都集成到同一个文件里：

可以看到官方的例子里已经将加载模型的方法都共享出来了。

并且还有了模型的步骤展示功能：

于是我将上面的例子抽取出来，并且做了二次开发。

二次开发的内容主要有：

1.修改模型按步骤播放，增加播放单个零件的掉落动画。

2.优化模型的加载速度，相同类型的模型不用做重复的加载，通过克隆模型的方式，大大减少了重复加载，提升加载速度。

3.结合VUE开发，使用package打包出来再运行，速度会大大提升。

4.增加每个步骤的零件数量统计（在上方显示）。

5.可查看单个零件。

6.上一步、下一步功能，及播放步骤进度条。

整体效果如下：

单个零件查看

有需要的可下载工程学习使用，下载地址：

https://download.csdn.net/download/Highning0007/87337589

使用方法

1. 在工程要目录下运行npm install

2.然后npm run dev启动项目。

WebGL（ThreeJS）加载乐高Ldraw模型案例相关推荐

Three 之 three.js （webgl）基础第二个入门案例之汽车模型加载和简单模型展示
Three 之 three.js (webgl)基础第二个入门案例之汽车模型加载和简单模型展示目录 Three 之 three.js (webgl)基础第二个入门案例之汽车模型加载和简单模型展 ...
bim webgl 模型轻量化_WebGL轻量化BIM引擎如何加载大体量BIM模型
当前,国内的BIM应用如火如荼!在前几年住建部.交通部.铁总及各个省市住建厅推出各类鼓励BIM应用的政策后,湖南省强制推进的BIM审图更是为BIM应用添加了一把火! 不论BIM当前在国内推进的过程中是 ...
threejs加载C4D模型及材质渲染实例
最近在学习Threejs3D引擎使用,主要是为了实现web里面去实现3D模型的加载渲染,这样会比较直观的看到类似的效果,增加用户体验. 第一步:加载C4D模型.将模型和材质导出二.加载主要插件模块 ...
webgl中加载模型要求以及优化方案
因为是web端加载,所以模型要尽可能的小,三角面尽可能的少,不然的话请求效率以及gpu渲染效率会大打折扣以下是个人基于自己电脑配置(显存2G)做出的要求推荐,高性能大佬可以直接忽视一.模型大小常用 ...
three.js 加载obj+mtl模型
本文提供了three.js中实现将obj+mtl模型加载到场景中的方法. 我们欲实现将桥模型加载到场景中,并对桥设置透明度: 实现过程: 分别导入three.js中的OBJLoader,MTLLo ...
Three.js加载.stl格式模型
.stl格式模型加载本文是Three.js电子书的14.2节基本所有的三维软件都支持导出.stl格式的三维模型文件,.stl格式的三维模型不包含材质Material信息,只包含几何体顶点数据的信息 ...
threejs加载obj文件
threejs加载并展示obj文件: 研究了一段时间,总结下,废话少说,直接上代码:<!DOCTYPE html> <html lang="en">< ...
用《捕鱼达人3》讲解Cocos引擎3D技术（一）：加载鱼的模型和播放动画
大家好,相信许多朋友们都听过或玩过<捕鱼达人>这款游戏.今年7月中旬,<捕鱼达人3>正式发布,24小时就突破实现1千万下载,欢迎大家一起来下载试玩! 本次<捕鱼达人3&g ...
第一节：加载鱼的模型和播放动画
大家好,相信许多朋友们都听过或玩过<捕鱼达人>这款游戏.今年7月中旬,<捕鱼达人3>正式发布,24小时就突破实现1千万下载,欢迎大家一起来下载试玩! 本次<捕鱼达人3&g ...

WebGL（ThreeJS）加载乐高Ldraw模型案例

WebGL（ThreeJS）加载乐高Ldraw模型案例相关推荐

最新文章

热门文章