如何在Aframejs中加载3D模型?它目前在threejs中工作正常

Omk*_*zen 7 javascript augmented-reality three.js aframe

我创建了一个3D动画模型,我设法在threejs中运行.

var loader = new THREE.FBXLoader();
loader.load( 'model.fbx', function ( object ) {              
     object.mixer = new THREE.AnimationMixer( object );
     mixers.push( object.mixer );
     console.log(object.animations.length);
     var action = object.mixer.clipAction( object.animations[ 0 ] );
     action.play();
     object.traverse( function ( child ) { 
       if ( child.isMesh ) { 
          child.castShadow = true;
          child.receiveShadow = true; 
       } 
     });
     scene.add( object );
});
Run Code Online (Sandbox Code Playgroud)

它在threejs上运行得非常好,但是如何在aframe中使用它,我正在尝试创建AR应用程序.我没有得到足够的文档,在AFrame中我可以在标记上显示obj模型但是aframe-extras似乎不起作用,但Threejs FBX加载程序工作正常.我需要帮助才能在标记扫描上显示三个场景.

Pio*_*ski 1

关于主题:a 框架中的 3D 模型

尝试使用 Three.jsJSONglTF格式。a-frame 团队在文档中推荐了这两种格式。

我记得 Don McCurdy 指出模型fbx很复杂且难以解释,这就是 JSON 格式出现在 webGL 中的原因。

在使用 ar.js 时,我记得使用具有多个动画的 Three.js JSON 模型以及 glTF 静态/单动画模型没有任何问题。

您可以轻松地将模型导出到gltf使用khronoskupomans导出器,以及JSON使用this 的Three.js 。

此外,这些glTF模型可与核心 a-frame 库配合使用,无需任何添加!


关于 fbx,我从来没有让它们正常工作,所以既然其他的是为 webGL 设计的,我会尝试一下。