threejs中FBX格式模型的加载与克隆

最近根据项目需求需要加载和克隆带动画的FBX模型，但是发现直接用Object.clone方法无法对fbx模型进行克隆，于是查资料解决克隆问题。

废话不多说，直接正题：

所需脚本：

threer97表示R97版本的threejs。

下边是官网给出加载fbx模型的例子：

var loader = new THREE.FBXLoader();//Samba Dancing idle_2loader.load( '../model/fbx/Samba Dancing.fbx', function ( object ) {mixers=object.mixer = new THREE.AnimationMixer( object );var action = object.mixer.clipAction( object.animations[0]);action.play();object.traverse( function ( child ) {if ( child.isMesh ) {child.castShadow = true;child.receiveShadow = true;}} );object.scale.set(0.5,0.5,0.5);object.position.set(0,0,0);scene.add( object );} );

现在想克隆这个模型，我先把第一次加载的模型及模型的顶点信息和贴图材质保存在全局变量(scope.personpre,scope.referenceModel)中，留着克隆用，代码变化如下：

var loader = new THREE.FBXLoader();loader.load( "../model/fbx/greenmushroom_idle.fbx", function ( object ) {object.traverse( function ( child ) {scope.mixers=object.mixer = new THREE.AnimationMixer( object );var action = object.mixer.clipAction( object.animations[0]);action.play();if ( child.isMesh ) {child.castShadow = true;child.receiveShadow = true;}});object.scale.set(0.5,0.5,0.5);object.position.set(100,120,30);scope.scene.add(object);scope.personPre=object;scope.referenceModel = object.children[1];});

scope是我的一个类索引，大家不用理会，看成window即可，注意最后一行，我们加载的fbx模型它会有一个子元素数组，其中有一个元素存储的是mesh信息，我的模型的mesh在第二个，所以我把它取出来保存，如不明白，可以参考下图：

其中的红线标出的才是模型显示的关键。

接下来就是克隆,需要用上一步保存的顶点和贴图信息 new一个新的mesh，赋值给用预制体克隆的person，person才会绘制到屏幕上：

var scope=this;
var refObject = this.referenceModel;
var mesh=new THREE.Mesh( refObject.geometry, refObject.material );
mesh.position.set(0,0,10);
mesh.scale.set(0.2,0.2,0.2);
mesh.rotation.x=-0.25*Math.PI;
var person=this.personPre.clone();
person.animations=this.clip;
person.children[1]=mesh;
person.traverse( function ( child ) {if ( child.isMesh ) {child.castShadow = true;child.receiveShadow = true;}
});
this.scene.add( person );

大功告成，此方法的缺点是所有的克隆模型共用一个动画，无法单独控制动画，后续改进正在研究，小弟不才，如有疏漏，多多指导。

threejs中FBX格式模型的加载与克隆相关推荐

pmd格式模型 html加载,Three.js 模型载入
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? obj格式 THREE.OBJLoader(manager)manager 加载器使用的loadingManager,默 ...
tensorflow中保存模型、加载模型做预测（不需要再定义网络结构）
下面用一个线下回归模型来记载保存模型.加载模型做预测参考文章: http://blog.csdn.net/thriving_fcl/article/details/71423039 训练一个线下回归 ...
Three.js（十四）—— 模型文件加载
文章目录 14.Three.js 加载外部模型文件 14.1 Three.js 数据结构.导入导出 Threejs导出模型信息自定义模型加载器文件加载Three.js导出的模型数据 14.2 加载 ...
3D模型的加载与使用
http://www.hewebgl.com/article/getarticle/126 1.感谢词亲爱的朋友: 您们好.感谢您阅读WebGL中文网的初级课程,学习到本课,我们假设您已经学习 ...
5.2 TensorFlow:模型的加载,存储,实例
背景之前已经写过TensorFlow图与模型的加载与存储了,写的很详细,但是或闻有人没看懂,所以在附上一个关于模型加载与存储的例子,CODE是我偶然看到了,就记下来了.其中模型很巧妙,比之前nump ...
5.1 Tensorflow:图与模型的加载与存储
这里写目录标题前言快速应用存储与加载,简单示例存储的文件 tf.train.Saver与存储文件的讲解核心定义存储文件的讲解保存图与模型进阶按迭代次数保存按时间保存更详细的解释前 ...
Matlab编程技巧：打开模型时加载数据字典
本文研究通过回调函数,在打开模型时加载数据字典到工作空间中. 文章目录 1 问题引入 2 简单例程 2.1 模型配置 2.2 数据字典表格 2.3 创建脚本 3 效果演示 4 总结 1 问题引入在& ...
【Unity学习】fbx格式模型分离和坐标轴调整
fbx格式模型分离在AssetStore下载的低模有的时候需要修改,将某一部分模型单独拎出来做动画或者别的使用.这里提供一下我个人的思路,将fbx格式模型导入3Dmax,然后根据如何利用3Dmax分 ...
深入浅出经典面试题：从浏览器中输入URL到页面加载发生了什么 - Part 3
备注: 因为文章太长,所以将它分为三部分,本文是第三部分. 第一部分:深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么 - Part 1 第二部分:深入浅出经典面试题:从浏览器中输入URL ...