threejs知识点:1.模型分析
来源:互联网 发布:蜜蜂软件 编辑:程序博客网 时间:2024/05/29 09:49
实例源码: http://download.csdn.net/download/zzjzmdx/10110882
1.前言
threejs 官网 https://threejs.org/ threejs 源码下载地址 https://github.com/mrdoob/three.js/
threejs支持多种格式, 这个从threejs源码例子里的loader文件夹(three.js-dev\examples\js\loaders )
就可以看出来 如:
现在主要分析其中的三种格式:obj格式,和stl格式,json格式。
2.三种格式的生成方式(基础格式为max格式)
obj格式
打开max文件 ctrl+a 全选 或 选择要到处的模型,之后点击max图标,选择
导出功能下的 导出选中物体功能
选择则生成类型为obj格式
配置相关信息
如果选择导出材质,会生成building.obj主文件,材质配置文件building.mtl和一些图片 如果不选择导出材质,
会只生成building.obj主文件。
完成
stl格式
下载并安装blender软件(blender 下载地址 https://www.blender.org/,3dmax也可以导出stl但是只能导出整体)
打开 blender软件,导入已生成的obj文件(也可在blender中自己创建模型然后导出)
导出stl文件
json格式
导入blender的threejs插件 将源码包three.js-dev\utils\exporters\blender\addons 下的 io_three 文件夹
拷贝到 C:\Program Files\Blender Foundation\Blender\2.78\scripts\addons 文件夹下 打开blender软件,
选择file下的User Preferences
选择Add-ons选项 搜索three 勾选 结果的复选框,之后保存。
导出json文件 选择file下的export选项下的threejs
配置导出页面
之后会生成json文件。
3.格式导入到threejs
obj格式(无材质)
var loader = new THREE.OBJLoader();
loader.load( "models/test.obj",
function ( object ) {
scene.add( object );
}
);
obj格式(有材质)
var Loader = new THREE.MTLLoader();
Loader.setPath( 'models/' );
Loader.load( 'test.mtl', function( materials ) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );
objLoader.setPath( 'models/' );
objLoader.load( 'test.obj', function ( object ) {
scene.add( meshchangematerial );
});
});
stl格式
var material = new THREE.MeshLambertMaterial( { color: 0x012028 ,transparent: true,opacity: 0.5 } );
var loader = new THREE.STLLoader(manager);
loader.load( "models/test.stl", function ( geometry) {
var mesh = new THREE.Mesh(geometry, material);
scene.add( mesh );
} );
json格式
var loader = new THREE.JSONLoader();
loader.load('models/test.json',
function(geometry) {
mesh = new THREE.Mesh(geometry);
scene.add(mesh);
});
4.各格式优缺点比较
同模型,各格式大小比较
obj格式 优点:此格式文件可导入材质,可以获得模型中的每一个元素,能对每个元素进行操作, 且应用广泛。 缺点:此格式文件导入后,不能获取整体的中心点位置,且同模型下,obj格式文件较大, 不利于网页端展示 总结:此格式适合简单小巧模型,既能完美展示和操作所有元素,最终模型也不会较大。
stl格式 优点:此格式文件为二进制文件,压缩比较大,且同模型下,stl格式文件较小, 能获取整体中心点。 缺点:不能直接导入材质,需要后期操作,模型以此格式导入,获取的为模型整体, 不能单独操作元素。 总结:此格式适合大型,单一材质模型导入,能快速导入。
json格式 优点:threejs 常用格式,可导入材质。 缺点:文件较大。
5.经验分享
threejs 模型导入时,模型继承3dmax内模型位置属性。 做多建筑模型导入时,可在3dmax文件的整体文件中分别单个导出建筑模型, 之后导入到threejs中,此时不用修改导入模型位置,模型会自己导入到相对位置上。 做单一设备模型导入时,可将模型放置在3dmax原点,当导入到threejs中时, 可将设备模型手动移动到想要的位置。
3dmax模型导入到threejs里时,如果整体未报错,但是模型不显示,有以下几种可能 1.模型比例太小,摄像头拍摄不到,请将模型到处是的比例加大。 2.模型比例太大,摄像头填充不下,请将模型到处是的比例加大。 3.模型导入后位置在摄像头视线外,请旋转摄像头查找导入模型位置。
obj文件导入后正常显示,stl文件导入后会旋转90度,可用mesh.rotation.x = -Math.PI/2;
- threejs知识点:1.模型分析
- ThreeJS学习-模型角度限制
- threejs
- threejs加载3D模型例子
- threejs 鼠标移动控制模型旋转
- threejs制作3d模型展示网页
- 使用threejs点云秀出酷炫的模型效果
- JavaScript语言学习以及部分ThreeJs分析
- threejs第五篇【一条龙测试之三 threejs加载 obj 格式模型】
- threejs第五篇【一条龙测试之四 threejs 给obj模型贴图】
- Threejs 加载 DAE 模型遇到关题汇总
- threejs 加载stl 或 obj 模型的代码模板
- 08.ThreeJs开发指南-第八章-加载外部模型
- WEBGl之THREEJS导入shp文件,生成三维模型
- 【threejs学习随记(三)】3D模型导入问题
- threejs学习心得(场景的搭建+运动模型导入)
- java基础-个人知识点杂记1.OSI模型
- threejs第五篇【一条龙测试之一 3DSMAX模型建立导出obj】
- 形参实参 (总结)
- 团队天梯赛L1-003. 个位数统计
- static的使用
- url,href,src的区别
- 折中查找
- threejs知识点:1.模型分析
- 卡尔曼滤波--学习笔记
- Oil Deposits
- java操作mongodb——查询数据
- anroid4.4textview莫名崩溃
- SpringBoot poi 导出Excel
- Java版腾讯云短信验证码获取
- Java线程(四):Delayed、ScheduledFuture、RunnableScheduledFuture
- Linux下的Notepad++编辑器——Notepadqq