说实在的不知道为啥threejs的内容出到了第3期。写出来防止大家踩坑。
threejs可以添加我们所需要的3d动画，因为单纯的靠threejs本身的对象并不能真正满足我们的动画需求。所以threejs提供了许多的加载器来加载到threejs图层上。方法都大同小异，只要掌握好一种差不多就都能掌握了。废话不多说我们来看如何加载各种类型的文件：
1、FBX
fbx最大的用途是用在诸如在max、maya、softimage等软件间进行模型、材质、动作和摄影机信息的互导，这样就可以发挥max和maya等软件的优势。可以说，fbx方案是最好的互导方案。所以先来看下FBX导入的办法。
<!--FBX加载器-->
<script src="js/FBXLoader.js"></script>
<script src="js/inflate.min.js"></script>
这里我们需要添加2个fbx所需要的js文件其中。这些在threejs源码里面都有。
之后我们添加THREE的FBX加载器。
var loader3 = new THREE.FBXLoader();//新建THREE的FBX加载器
//加载对象模型，是异步加载的，参数是模型的地址，回调函数，家在进度以错误处理，前两个是必须的
loader3.load("fbx/Samba Dancing.fbx",function(object){//产生回调函数返回模型对象
object.mixer = new THREE.AnimationMixer(object);//添加该对象的动画混合器
mixers3.push(object.mixer);//把动画添加到数组中
object.rotation.copy(new THREE.Euler(1.5707964,0,0, "ZXY"));//选装模型，因为mapbox坐标系与threejs坐标系不同
var action = object.mixer.clipAction(object.animations[0]);//获取对象的第一个动画
action.play();//启动动画
AddThreejs.addAtCoordinate(id,"9",object,"Samba",origin3);//把对象加到我们的mapbox地图上
});
上述代码中AnimationMixer是场景中特定对象的动画播放器，当场景中有多个对象独立播放动画，那么每个对象对应一个动画播放器。其中参数是该对象。
并且由于之前文章提到过mapbox的坐标是地理坐标系，而threejs的是xzy坐标系（左手坐标系），所以我们添加到地图上时需要将模型进行旋转，参数是一个欧拉角度（Euler）其参数是（x,y,z,order）分别是x，y，z轴角度（单位为弧度），然后是一个用来表示旋转顺序的字符串，默认为“XYZ”（必须是大写）。最后mixer.clipAction返回一个可以控制动画的AnimationAction对象，参数需要一个AnimationClip对象，最后启动我们的动画。
在threejs动画帧渲染中加入我们的动画
if ( mixers3.length > 0 ) {
for ( var i = 0; i < mixers3.length; i ++ ) {
mixers3[ i ].update( AddThreejs.clock.getDelta());
}
}
2、MMD
我们来试着添加V家的3d模型，添加所需的js文件
<!--MMD加载器-->
<script src="js/mmdparser.min.js"></script>
<script src="js/ammo.js"></script>
<script src="js/MMDLoader.js"></script>
<script src="js/MMDAnimationHelper.js"></script>
<script src="js/CCDIKSolver.js"></script>
<script src="js/MMDPhysics.js"></script>
添加好头文件后，我们来添加加载的代码
/////////////////////MMD
var MMDAnimationHelper = new THREE.MMDAnimationHelper({afterglow: 2.0});//添加MMD动画管理器
var ikHelper,physicsHelper;//骨骼辅助以及物理辅助
var modelFile = 'mmd/miku/miku_v2.pmd';//添加mmd模型
var vmdFiles = [ 'mmd/vmds/wavefile_v2.vmd' ];//模型动作文件
var loader4 = new THREE.MMDLoader();//添加mmd加载器
loader4.loadWithAnimation(modelFile, vmdFiles, function ( mmd ){//加载模型和动作
var meshmiku = mmd.mesh;//获取mmd的Mesh对象
meshmiku.rotation.copy(new THREE.Euler(1.5707964,0,0, "ZXY"));
meshmiku.scale.set(10,10,10);//设置尺寸
AddThreejs.addAtCoordinate(id,"10",meshmiku,"miku",origin3);//把他添加到mapbox地图上0
MMDAnimationHelper.add(meshmiku,{//把对象以及动作传到动画管理器中
animation:mmd.animation,//添加mmd动画
physics:true,//打开物理
});
//骨骼辅助显示
ikHelper = MMDAnimationHelper.objects.get( meshmiku ).ikSolver.createHelper();
ikHelper.visible = false;//不显示
AddThreejs.addAtCoordinate(id,"11",ikHelper,null,origin3);//添加到地图
//物理刚体辅助显示
physicsHelper = MMDAnimationHelper.objects.get( meshmiku ).physics.createHelper();
physicsHelper.visible = false;//不显示
AddThreejs.addAtCoordinate(id,"12",physicsHelper,null,origin3);//添加到地图
});
之后添加我们的动画
MMDAnimationHelper.update(AddThreejs.clock.getDelta());
3、GLTF
GLTF是图形语言交换格式。它是一种3D内容的格式标准。
首先先加载我们的js文件。
<!--GLTF加载器-->
<script src="js/GLTFLoader.js"></script>
接着添加模型以及动画
var loader = new THREE.GLTFLoader();//GLTF加载器
loader.load("gltf/Horse.glb",function (gltf){//添加模型，并暴露接口
var meshHorse = gltf.scene.children[0];//获取其中对象，对象放在scene下面
//meshHorse.position.set(100, 0, 100);
meshHorse.scale.set(0.5,0.5,0.5);//设定尺寸
meshHorse.rotation.copy(new THREE.Euler(1.5707964,0,0, "ZXY"));//模型旋转
// AddThreejs.scene.add(meshHorse);
AddThreejs.addAtCoordinate(id,"6",meshHorse,"Horse",origin1);//添加对象到地图中
mixer = new THREE.AnimationMixer(meshHorse);//添加动画管理器
mixer.clipAction( gltf.animations[ 0 ] ).setDuration( 1 ).play();//设置对象动作
});
if ( mixer ) {
var time = Date.now();
mixer.update( ( time - prevTime ) * 0.001 );
prevTime = time;
}
4、Collada
COLLADA™ 是面向交互式 3D 应用程序的基于 XML 的数字资产交换方案，使 3D 创作应用程序可以自由地交换数字资产而不损失信息 - 使多种DCC和3D处理可以组合成强大的工具链管道。
<!--Collada加载器-->
<script src="js/ColladaLoader.js"></script>
添加模型
var loader5 = new THREE.ColladaLoader();//添加Collada加载器
loader5.load("collada/stormtrooper/stormtrooper.dae", function ( collada ){//添加文件并获取回调函数逇返回值
var meshavatar = collada.scene;//collada对象放在scene中
meshavatar.rotation.copy(new THREE.Euler(0.2,0,0, "XZY"));//旋转对象
meshavatar.scale.set(30,30,30);//设置尺寸
meshavatar.traverse(function (node) {//获取其中对象
if(node.isSkinnedMesh){
node.frustumCulled = false;
}
});
mixer4 = new THREE.AnimationMixer(meshavatar);//动作管理器
var action = mixer4.clipAction(collada.animations[0]);//设置动作
action.play();
AddThreejs.addAtCoordinate(id,"13",meshavatar,"stormtrooper",origin1);//添加对象
});
最后设定动作时间
if ( mixer4 !== undefined ) {
mixer4.update(clock1.getDelta() );
}
最后的效果图：
效果图
我们仔细品味代码可以发现，加载模型以及动画的代码都大同小异。
1、添加js头文件
2、添加模型以及动作
2.1添加XX加载器
2.2设定URL，从回调函数中回去模型
2.3设置动作管理器
2.4配置动作以及执行动作
2.5把模型加载到场景中
3、设定动作变化
写的不好之处，请多见谅
网友评论