如何对从搅拌机导出的动画 js 模型进行纹理处理? [三.js]
Posted
技术标签:
【中文标题】如何对从搅拌机导出的动画 js 模型进行纹理处理? [三.js]【英文标题】:How to texture animated js model exported from blender ? [Three.js] 【发布时间】:2013-05-15 03:55:03 【问题描述】:我已经成功地使用骨骼动画技术在搅拌机中为模型制作了动画,并且我还在搅拌机中使用 uv 纹理对其进行了纹理化。然后在搅拌机中使用 three.js 导出插件,我导出了模型,确保签入了 uv 和动画。但是我不知道为动画模型加载纹理的技术。我查看了three.js中包含的变形法线示例,其中使用Lambert材质使用了简单的颜色纹理。我有来自外部文件的纹理。我如何加载纹理。在 js 动画模型文件中有纹理的位置,它在同一位置。但它不加载。我也使用了面材技术。
我用来修改的three.js示例的位置:
http://threejs.org/examples/webgl_morphnormals.html
这是我的代码:
var loader = new THREE.JSONLoader();
loader.load( "bird_final.js", function( geometry, materials )
morphColorsToFaceColors( geometry );
geometry.computeMorphNormals();
// the old code to set color to the model
//var material = new THREE.MeshLambertMaterial( color: 0xffffff, morphTargets: true, morphNormals: true, vertexColors: THREE.FaceColors, shading: THREE.SmoothShading );
// my code
var meshAnim = new THREE.MorphAnimMesh( geometry, new THREE.MeshFaceMaterial( materials ) );
meshAnim.duration = 500;
meshAnim.scale.set( 20, 20, 20 );
meshAnim.position.y = 150;
meshAnim.position.x = -100;
scene1.add( meshAnim );
morphs.push( meshAnim );
);
除了分散在网络上的文档和一些基本教程之外,还有什么地方可以让我从头开始学习three.js。就像我知道设置场景和创建基本几何材料一样,但还有一些细节信息,例如加载纹理模型加载场景等。
【问题讨论】:
【参考方案1】:我为 Three.js 创建了一系列带注释的示例,这些示例一次说明一个功能,从非常基本的功能开始,到更高级的功能(包括加载模型)。
http://stemkoski.github.io/Three.js
希望这会有所帮助!
【讨论】:
哇,你在那里做了非常棒的工作。谢谢,我一定会跟进的 很高兴为您提供帮助 :) 看起来很棒!谢谢,我也认为github可能已将链接更改为:stemkoski.github.io/Three.js【参考方案2】:使用复杂的几何体、材质、纹理和动画是在 THREE.js 中最难解决的一些问题 - 这就是我们从编辑器开始的原因。
我们让所有这些变得简单。从 Blender 导出 FBX 文件(或 OBJ/MTL 或 Collada)。将其引入 Verold Studio 中的项目,然后使用我们的加载器将其加载到您的 THREE.js 程序中。服务免费使用,如果您需要启用服务或有需要维护/支持协议的客户,您需要向我们付费。
看下面的例子,把你的场景带到 THREE.js 再简单不过了,
http://jsfiddle.net/rossmckegney/EeMCk/
// 1. Set and then start the animation :)
this.model.setAnimation("mixamo.com");
this.model.playAnimation(true);
//this.model.pauseAnimation();
// 2. Get the threedata for a model
console.log(this.model.threeData);
// 3. Move the model
this.tweenObjectTo(
this.model.threeData, // the model
new THREE.Vector3(1, 0, 0), // go to
new THREE.Quaternion(), // rotation
1, // time, in seconds
false, // smooth start
true); // smooth end
// 4. Clone the model
that = this;
this.model2 = this.model.clone(
success_hierarchy: function(clonedModel)
that.veroldEngine.getActiveScene().addChildObject(clonedModel);
);
【讨论】:
以上是关于如何对从搅拌机导出的动画 js 模型进行纹理处理? [三.js]的主要内容,如果未能解决你的问题,请参考以下文章
THREE.JS 从搅拌机中导出 JSON 模型(包括纹理)