使用骨架和骨骼数组将FBX模型加载到THREEJS代码中,以便在JS代码中进行手动操作

时间:2019-06-27 14:55:16

标签: javascript animation three.js fbx

我正在一个项目上,该项目需要制作一个简单的视频游戏,您应该在其中与游戏的环境和角色进行互动。我们可以导入3D模型,纹理,物理引擎,但必须在JS代码中手动实现动画。我为此目的使用Threejs库,并建立了一个简单的场景以测试事物是否按预期运行。当我向场景中添加简单的几何体(例如立方体,球体,托勒斯,甚至是更复杂的纹理,如镜子的反射等)时,不会出现探针。我最终从网上加载了3d模型,其格式为.fbx,并遵循threejs库的文档,该模型作为对象添加到场景中,但是有两个问题:

  • 我不知道如何访问模型的骨架结构,例如头部,颈部,翅膀,尾巴等等。我需要解决这个问题,因为我无法导入动画,因此在JS代码中,我必须手动编写关键帧动画或类似的东西,例如显式修改结构节点(骨骼)的相对位置/旋转。因此,我需要知道如何构造此层次结构,以便手动访问它。

  • 纹理无法加载,或者很可能我也无法加载。

'''javascript

HtmlInputRadioButton

窗口可以很好地显示任何对象,灯光,纹理,甚至模型“ smaug.fbx”。纹理没有出现。

//TEXTURE
var loader = new THREE.TGALoader();
// load a resource
    var texture = loader.load(
// resource URL
   'loader/24-smaug/Smaug/textures/Skin-a.tga')

var material_smaug = new THREE.MeshPhongMaterial( {
    color: 0xffffff,
    map: texture
    } );
//MODEL 
var loader = new THREE.FBXLoader();
loader.load( 'loader/24-smaug/Smaug/smaug.fbx', function( object )  {

                                    object.position.z= 200.0;
                object.position.y= 100.0;
                object.position.x= 100.0;
                object.scale.set(10.0,10.0,10.0);
            object.traverse( function ( child ) {
                    if ( child.isMesh ) child.material.map = texture;
                } );
                scene.add(object);
                }); 

我接受任何解决此问题的建议,即使有更简单的方法可以提出。主要问题在于,由于无法访问其物理结构领域,因此无法为模型设置动画。我陷入了尝试从加载的对象定义几何的过程中(请参见代码),目的是将其作为在Threejs中定义的SkinnedMesh函数的参数传递,我不理解该方法。

0 个答案:

没有答案