threejs知识点：1.模型分析

合作qq：(550891796)              

===================================

实例源码: http://download.youkuaiyun.com/download/zzjzmdx/10110882

以下是已开发的视频展示连接 

https://www.bilibili.com/video/BV18V41187p9/

https://www.bilibili.com/video/BV1Xy4y1277M/

https://www.bilibili.com/video/BV1ka4y1n7fh/

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;