Question

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

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

是否有人尝试使用上述组件来实现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

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

Left()

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

使用threejs加载器的A帧组件： https://threejs.org/docs/#examples/loaders/OBJLoader https://github.com/aframevr/aframe/blob/master/src/components/obj-model.js

Answer 3

@ngokevin，好答案！为此，我已经创建了插件演示。

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>

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

3 个答案: