Three.js 如何在运行时在帧中加载3D对象？

我正在从事一个aframe项目，其中需要运行时加载3D对象。我读过A-Frame文档，而A-Frame似乎根本不支持运行时资产加载

我通过protyze（）发现了这个aframeasset-on-demand组件，它似乎允许在运行时加载img、音频和视频。但它的文档并没有指出在运行时加载3D对象（如.obj或.dae中的文件）的可能性

---

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

您可以创建一个自定义组件，该组件将使用三个.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' );

  }
);

指向three.js文档的链接：搜索加载程序以查看可在a-frame组件中使用的所有加载程序：

使用threejs加载程序的A-frame组件：

忽略

，因为这是用于运行前网络预加载

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

el.setAttribute（'gltf-model'，'path/to/model.gltf'）

或

---

el.setAttribute（'obj-model'，{obj:'path/to/model.obj'}）

@ngokein，回答得很好！我已经为此制作了plunker演示

从技术上讲，所有模型都是在运行时加载到A-Frame中的。。。除非你的意思不同？就像用户从下拉列表中选择模型或将文件拖放到窗口中一样？不确定这是否是OP的意思，但如果动态添加一个（现有）组件可能会更容易：
el.setAttribute（'gltf-model'，{src:'path/to/model.gltf'}）
Ah是的，简单得多：）我认为
gltf model
不幸是一个单独的道具组件，因此
el.setAttribute（'gltf-model'，'path/to/model.gltf'）
。将作为回答者发帖感谢您的回答！Kevin建议的解决方案对我有效，而且看起来更简单。对我有效！非常感谢你。虽然'src'不是正确的属性，但它应该是'obj'。再次感谢您的回答。我正在使用Vue，我在组件上渲染gltf模型，并且alays得到此错误
组件：gltf模型：warn Unexpected token<在JSON中的位置0
，我真的被卡住了：（.您能帮助我如何调试它吗？如何使用obj模型进行同样的操作？
<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>