如何在框架运行时加载 3D 对象？

Question

我正在开发一个需要运行时加载 3D 对象的 aframe 项目。我看过A-Frame的文档，aframe好像根本不支持运行时加载资源

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

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

Answer 1

您可以创建一个自定义组件，它将使用 three.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 组件中使用的所有可用加载器： https://threejs.org/docs/#examples/loaders/OBJLoader

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

Answer 2

忽略 <a-assets> 因为那是为了 pre-runtime 网络预加载。

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

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

或

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

Answer 3

@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>

如何在框架运行时加载 3D 对象？

How to load 3D object at runtime in aframe?

three.js

webvr

aframe