threejs精灵模型_将不同格式的3d模型导入three.js

three.js除了可以自己绘画3d模型以外，当然也是可以自己导入3d模型。官方提供了许多例子，多且难寻。

于是体贴的米肥为大家筛选了几个官方的例子，用以分析如何将3d模型导入three.js

这次我尝试研究了4种3d模型格式 用于导入three.js

分别是 3ds、vtk、obj、json

将3ds文件导入three.js

three.js支持大多数的3d模型格式，并且提供工具进行转换为three.js可用的格式

但是，three.js提供的example中 并不支持3ds文件的直接转换。

所以，3ds文件需要转换为其他three.js可支持的文件

将obj文件导入three.js

obj格式的3d模型是可以直接导入three.js。

首先要引用obj文件要用到的OBJLoader.js

在init函数中 创建loader变量，用于导入模型

var loader = new THREE.OBJLoader();

loader导入模型之后 接收两个参数，一个表示模型路径，另一个表示导入完成后的回调函数。

loader.load( "images/obj/ninja/ninjaHead_Low.obj", function ( group ) {

geometry = group.children[ 0 ].geometry;

geometry.attributes.uv2 = geometry.attributes.uv;

geometry.center();

mesh = new THREE.Mesh( geometry, materialNormal );

mesh.scale.multiplyScalar( 25 );

scene.add( mesh );

} );

若除了obj文件之外，还有jpg文件需要引入

同样在init函数导入即可

// textures

var textureLoader = new THREE.TextureLoader();

var normalMap = textureLoader.load( "images/obj/ninja/normal.jpg" );

var aoMap = textureLoader.load( "images/obj/ninja/ao.jpg" );

var displacementMap = textureLoader.load( "images/obj/ninja/displacement.jpg" );

示例图

将vtk文件导入three.js

和引用obj一样 一开始都要引用相应的loader

在init函数里面 创建一个loader

var loader = new THREE.VTKLoader();

同样的loader函数，可以接收两个值。

在接收到vtk文件之后，官方的例子在回调函数设置了位置，材质等元素。

var loader = new THREE.VTKLoader();

loader.load( "images/vtk/bunny.vtk", function ( geometry ) {

geometry.center();

geometry.computeVertexNormals();

var mesh = new THREE.Mesh( geometry, material );

mesh.position.set( - 0.075, 0.005, 0 );

mesh.scale.multiplyScalar( 0.2 );

scene.add( mesh );

} );

示例图

将json文件导入three.js

three.js对blender最为友好

官方提供了插件可以在blender中导出three.js可以用的json格式

各位客官可以自行搜索 在此不啰嗦~

生成的json文件可以直接导入three.js

首先创建一个loader

var objectLoader = new THREE.ObjectLoader();

然后用创建后的loader引入json文件 即可

objectLoader.load("javascript/js/teapot-claraio.json", function ( obj ) {

scene.add( obj );

} );

示例图

3d模型有许多的格式，而大部分 ，在官网都有示例。

这次只研究了3种loader

发现其实大同小异，用手机测试过，无论是安卓还是ios相对来说 都比较流畅。可见three.js是可以经得起折腾的。

这次就这样先~下次有机会 会继续深入了解three.js滴~

886~