简介

上一节，深入了解了一下SkinnedMesh模型对象的创建。这一节，我们导入外部骨骼绑定的模型，来实现动画显示。由于Three.js支持的三维格式非常多，由于导入模式大同小异，我们就选择两种格式作为案例作为参考。其余的按照相同的套路相信大家也能够导入进来。
带骨骼模型和普通模型导入模式是一样的，不同的是Three.js返回的带骨骼模型的对象里面多了几项与动画相关的配置。

案例实现

案例查看地址：http://www.wjceo.com/blog/threejs/2018-04-24/151.html

案例的模型使用的官网上的模型，大家也可以去官网上去获取模型。
- 首先，我们需要引入相应的loader插件，FBX格式需要引入一个解析二进制格式的插件，和fbxLoader：

<script src="/lib/js/libs/inflate.min.js"></script> //解析二进制文件
<script src="/lib/js/loaders/FBXLoader.js"></script> //loader

然后导入文件，在回调里面获取文件对象，并把对象添加到场景中：

loader.load("/lib/models/fbx/Samba Dancing.fbx", function (mesh) {scene.add(mesh);
});

现在，已经实现了模型显示，我们还需要实现当前动画的执行，按照前几节的SkinnedMesh模型的动画实现方式：


//AnimationMixer是场景中特定对象的动画播放器。当场景中的多个对象独立动画时，可以为每个对象使用一个AnimationMixer
mixer = mesh.mixer = new THREE.AnimationMixer(mesh);//mixer.clipAction 返回一个可以控制动画的AnimationAction对象  参数需要一个AnimationClip 对象
//AnimationAction.setDuration 设置一个循环所需要的时间，当前设置了一秒
//告诉AnimationAction启动该动作
action = mixer.clipAction(mesh.animations[0]);
action.play();

最后，还要在每一帧里面调用帧对象：

var time = clock.getDelta();
if (mixer) {mixer.update(time);
}

案例代码


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">html, body {margin: 0;height: 100%;}canvas {display: block;}</style>
</head><body onload="draw();">
</body>
<script src="https://cdn.bootcss.com/three.js/91/three.min.js"></script>
<script src="/lib/js/libs/inflate.min.js"></script>
<script src="/lib/js/loaders/FBXLoader.js"></script>
<script src="/lib/js/controls/OrbitControls.js"></script>
<script src="https://cdn.bootcss.com/stats.js/r17/Stats.min.js"></script>
<script src="https://cdn.bootcss.com/dat-gui/0.7.1/dat.gui.min.js"></script>
<script src="/lib/js/Detector.js"></script><script>var renderer, camera, scene, gui, light, stats, controls, meshHelper, mixer, action;var clock = new THREE.Clock();function initRender() {renderer = new THREE.WebGLRenderer({antialias: true});renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);renderer.setClearColor(0xeeeeee);renderer.shadowMap.enabled = true;//告诉渲染器需要阴影效果document.body.appendChild(renderer.domElement);}function initCamera() {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000);camera.position.set(100, 200, 300 );}function initScene() {scene = new THREE.Scene();scene.background = new THREE.Color( 0xa0a0a0 );scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );}//初始化dat.GUI简化试验流程function initGui() {//声明一个保存需求修改的相关数据的对象gui = {animation: true,helper:true //模型辅助线};var datGui = new dat.GUI();//将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）datGui.add(gui, "animation").onChange(function (e) {if (e) {action.play();}else {action.stop();}});datGui.add(gui, "helper").onChange(function (e) {meshHelper.visible = e;})}function initLight() {scene.add(new THREE.AmbientLight(0x444444));light = new THREE.DirectionalLight(0xffffff);light.position.set(0, 200, 100 );light.castShadow = true;light.shadow.camera.top = 180;light.shadow.camera.bottom = -100;light.shadow.camera.left = -120;light.shadow.camera.right = 120;//告诉平行光需要开启阴影投射light.castShadow = true;scene.add(light);}function initModel() {//辅助工具var helper = new THREE.AxesHelper(50);scene.add(helper);// 地板var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0xffffff, depthWrite: false } ) );mesh.rotation.x = - Math.PI / 2;mesh.receiveShadow = true;scene.add( mesh );//添加地板割线var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );grid.material.opacity = 0.2;grid.material.transparent = true;scene.add( grid );//加载模型var loader = new THREE.FBXLoader();loader.load("/lib/models/fbx/Samba Dancing.fbx", function (mesh) {console.log(mesh);//添加骨骼辅助meshHelper = new THREE.SkeletonHelper(mesh);scene.add(meshHelper);//设置模型的每个部位都可以投影mesh.traverse( function ( child ) {if ( child.isMesh ) {child.castShadow = true;child.receiveShadow = true;}} );//AnimationMixer是场景中特定对象的动画播放器。当场景中的多个对象独立动画时，可以为每个对象使用一个AnimationMixermixer = mesh.mixer = new THREE.AnimationMixer(mesh);//mixer.clipAction 返回一个可以控制动画的AnimationAction对象  参数需要一个AnimationClip 对象//AnimationAction.setDuration 设置一个循环所需要的时间，当前设置了一秒//告诉AnimationAction启动该动作action = mixer.clipAction(mesh.animations[0]);action.play();scene.add(mesh);});}//初始化性能插件function initStats() {stats = new Stats();document.body.appendChild(stats.dom);}function initControls() {controls = new THREE.OrbitControls(camera, renderer.domElement);//设置控制器的中心点controls.target.set( 0, 100, 0 );// 如果使用animate方法时，将此函数删除//controls.addEventListener( 'change', render );// 使动画循环使用时阻尼或自转 意思是否有惯性controls.enableDamping = true;//动态阻尼系数 就是鼠标拖拽旋转灵敏度//controls.dampingFactor = 0.25;//是否可以缩放controls.enableZoom = true;//是否自动旋转controls.autoRotate = false;controls.autoRotateSpeed = 0.5;//设置相机距离原点的最远距离controls.minDistance = 1;//设置相机距离原点的最远距离controls.maxDistance = 2000;//是否开启右键拖拽controls.enablePan = true;}function render() {var time = clock.getDelta();if (mixer) {mixer.update(time);}controls.update();}//窗口变动触发的函数function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);}function animate() {//更新控制器render();//更新性能插件stats.update();renderer.render(scene, camera);requestAnimationFrame(animate);}function draw() {//兼容性判断if (!Detector.webgl) Detector.addGetWebGLMessage();initGui();initRender();initScene();initCamera();initLight();initModel();initControls();initStats();animate();window.onresize = onWindowResize;}</script>
</html>

88 Three.js 导入FBX格式骨骼绑定模型相关推荐

【UE4】导入FBX格式文件后呈现人物躺着情况的解决方法
问题描述在Maya中,将fbx文件添加根节点之后导入UE4中,发现动画蓝图呈现躺着情况. 原因是因为Maya中的数轴设置和UE4中有区别,所以会出现下图情况本篇文章将会介绍如何不通过Maya直接在 ...
89 Three.js 导入dae格式的骨骼绑定动画模型
简介上一节,我们导入了一个官方的FBX格式的骨骼模型,实现了动画效果.这一节,更换了dae格式的模型导入,主要是这个模型返回的数据和FBX的返回格式有一些区别,下面我们将在案例中解析中间的区别. 实 ...
Html监听Fbx文件加载,Three.js 导入fbx
其实可以先看看官方案例你想要的东西官方里面都有,就看你找不找得到了.... 话不多说我们先看看这个例子吧 three.js webgl - FBX loader body { font-fami ...
PostGIS FME导入fbx格式模型
使用FME导入模型数据到PostGIS FME支持模型格式:fbx.obj.dae.stl.3ds(目前仅打通fbx) 环境: Win10 FME2020 Fbx格式数据操作说明: 1.打开FME ...
【UE4】导入FBX格式的模型至UE4
转载自 https://blog.csdn.net/qq_33483344/article/details/80938161 在三维软件制作模型后,为了方便在引擎中能有效的编辑,我们需要注意以下几点: ...
导入FBX格式的模型至UE4
在三维软件制作模型后,为了方便在引擎中能有效的编辑,我们需要注意以下几点: 1.单位统一在UE4中,默认单位是CM,所以在使用max等三维软件开始制作之前,请先确保软件的单位与UE4的单位相匹配,并 ...
76 Three.js 导入VRML格式的模型
简介 VRML是Virtual Reality Modeling Language的缩写.这是一种基于文本的格式,允许定义三维对象和世界.它已被X3D文件格式取代.Three.js不支持加载X3D模型 ...
【Unity3D】使用 FBX 格式的外部模型 ( 向 Unity 中添加 FBX 模型 | 向 Scene 场景中添加 FBX 模型 | 3D 物体渲染 | 3D 物体材质设置 )
文章目录一.向 Unity 中添加 FBX 模型二.向 Scene 场景中添加 FBX 模型三.3D 物体渲染四.3D 物体材质设置一.向 Unity 中添加 FBX 模型 Unity 中使 ...
在Unity中导入fbx格式文件
unity中是以米为单位,要想让3dmax中建的模型导入到unity中与unity自带的3d object尺寸一致,最直接的办法是将3dmax中的系统单位也设成米.在三维软件里设置在菜单->自 ...

88 Three.js 导入FBX格式骨骼绑定模型

简介

案例实现

案例代码

88 Three.js 导入FBX格式骨骼绑定模型相关推荐

最新文章

热门文章