ThreeJS渲染一个.obj三维模型文件(Vue)

JavaScript021

ThreeJS渲染一个.obj三维模型文件(Vue),第1张

先来看一个效果: 最近有个项目需要实现三维模型的web端渲染,以前虽然也做过类似的项目,单是两个项目一个是java Application,一个是安卓结合,两个我都只参与到的建模环节,所以知道三维模型文件的大概结构,要想在web端实现渲染,首先要做的就是读取这些模型文件,对里面的点、面、法线、材质进行逐行解析。 各种对比后,发现了ThreeJS。它不仅可以解析obj模型文件,还可以解析大部分市场上有的模型格式文件。 npm 安装后,在node_modules/three/examples/jsm/loaders/目录下可以看到它支持的模型格式。 PS:demo中使用了最流行vue语法。 组件注销前,解绑全局事件、停止刷新。beforeDestroy() 效果如下: PS:鼠标移入时,先暂存材质的颜色,移除后再恢复。实现过程有bug,getHex()未得到有效的颜色,所以恢复不到原有的材质颜色,正在查找原因。如有有哪位大神发现问题,请赐教。 优化内容: 2.页面组件销毁时,解绑鼠标事件 3.组件销毁时,清除缓存数据

从Three.js的角度阐述,渲染结果的RGBA像素数据存储到了WebGL渲染目标对象WebGLRenderTarget中,通过目标对象的纹理属性.texture可以获得渲染结果的RGBA像素数据,也就是一个Three.js的纹理对象THREE.Texture,可以作为材质对象颜色贴图属性map的属性值;即将一个场景的渲染结果作为另一个场景中模型的纹理。

Three.js是大多数开发者首次接触的WebGL 3D库,Threejs库的出现解决了底层的渲染细节和复杂的数据结构,可以支持如一个房间级别,或一个楼层级别的渲染,或符合特殊要求的大量同类模型的渲染。

1~开发性能

对 WebGL进行了封装,提供了更高层的渲染接口,提供摄影机、视口的控制,提供场景组织方式,能够加载多种文件格式,通过创建材质、贴图并编写 shader来实现物体效果,创建立方体、球等基本元素,提供灯光、阴影、点云等等底层功能。

2~劣势

虽然Three.js底层引擎级别的三维图形库,有很多开源库对它进行扩展,但较为松散,适合做轻量级可视化应用,复杂应用则需要基于此库进行大量封装才行。尤其场景输出层面,需要3 3DSMax、Maya、CAD等专业美术人员,通过建模再做一定的导出工作才能得到需要的模型,团队协作成本高。

3~three.js和ThingJS 3D框架做对比

ThingJS是新兴的3D框架,2018年诞生,由北京优锘科技公司研发,旨在简化3D应用开发。轻量化的表现在:1、ThingJS封装了对模型交互事件的API、对模型的操作及层次关系,一个个具体的模型抽象把初学者从复杂的3D概念中解放出来,2、加载简单场景仅需1行代码,发布方式支持iframe, 微信和PC发布,在线化更方便,3、ThingJS是一个完成的物联网可视化应用开发生态,提供CampusBuilder, CityBuilder等场景搭建SAAS、场景存储云空间(无需付费)和10万个场景资源……

如果是你是初学者,three.js用起来更花费时间,就一个加载模型、调光、选择模型弹框的功能,就能写出Threejs上百行代码,ThingJS是更为上层的抽象,不用关心渲染、mesh、光线等复杂概念,更适合项目团队提高开发效率。