如何在运行时在帧中加载 3D 对象

Question

我正在处理一个需要运行时加载 3D 对象的 aframe 项目。我已经阅读了 A-Frame 文档，并且 aframe 似乎根本不支持运行时资产加载。

我通过 protyze (https://github.com/protyze/aframe-asset-on-demand-component( 发现了这个帧资产按需组件，它似乎允许运行时加载 img、音频和视频。但是它的文档并没有表明在运行时加载 3D 对象(如 .obj 或 .dae 中的文件(的可能性。

有没有人尝试过使用上述组件来实现 3D 对象的运行时加载？或者有没有其他方法来实现这个目的？

Answer 1

忽略<a-assets>，因为这用于预运行时网络预加载。

只需使用 setAttribute 设置模型组件：

el.setAttribute('gltf-model', 'path/to/model.gltf')

或

el.setAttribute('obj-model', {obj: 'path/to/model.obj'})

Answer 2

@ngokevin，很棒的答案！我为此创建了 plunker 演示。

https://plnkr.co/edit/yOmsxOSSfkVuX7c739Q1?p=info

<a-scene embedded arjs="sourceType: webcam;">
        <a-gltf-model id="lantern" src="#lantern" position="" 0 0 0"></a-gltf-model>
        <a-marker-camera preset="hiro"></a-marker-camera>
</a-scene>
<script>
        var lantern = document.getElementById('lantern');
        setTimeout(() => {
            alert('duck');
            lantern.setAttribute('gltf-model', 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Duck/glTF/Duck.gltf');
        }, 3000);
        setTimeout(() => {
            alert('cesium');
            lantern.setAttribute('gltf-model', 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/CesiumMan/glTF/CesiumMan.gltf');
        }, 9000);
    </script>

Answer 3

您可以创建一个自定义组件，该组件将使用三个.js加载器之一，以便在需要时加载模型：

// instantiate a loader
var loader = new THREE.OBJLoader();
// load a resource
loader.load(
  // resource URL
  'models/monster.obj',
  // called when resource is loaded
  function ( object ) {
    scene.add( object );
  },
  // called when loading is in progresses
  function ( xhr ) {
    console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
  },
  // called when loading has errors
  function ( error ) {
    console.log( 'An error happened' );
  }
);

指向三个.js文档的链接： 搜索加载程序以查看可在 a 帧组件中使用的所有可用加载器：https://threejs.org/docs/#examples/loaders/OBJLoader

使用 threejs 加载器的 A 帧组件：https://github.com/aframevr/aframe/blob/master/src/components/obj-model.jshttps://github.com/aframevr/aframe/blob/master/src/components/collada-model.js