Как загрузить 3D-объект во время выполнения в aframe?

Я работаю над проектом aframe, в котором требуется загрузка 3D-объекта во время выполнения. Я прочитал документацию A-Frame, и, похоже, aframe вообще не поддерживает загрузку ресурсов времени выполнения.

Я обнаружил этот компонент aframe-asset-on-demand с помощью protyze (https://github.com/protyze/aframe-asset-on-demand-component) и, похоже, позволяет загружать img, аудио и видео во время выполнения. Но его документация не указывает на возможность загрузки 3D-объектов, таких как файлы в .obj или .dae, во время выполнения.

Кто-нибудь пробовал использовать вышеупомянутый компонент для загрузки 3D-объектов во время выполнения? Или есть альтернативные способы достижения этой цели?


three.js aframe webvr
person Felix    schedule 14.03.2018    source источник
comment
Технически все модели загружаются во время выполнения в A-Frame ... разве вы не имеете в виду что-то другое? Как пользователь выбирает модели из раскрывающегося списка или перетаскивает файл в окно?   -  person Don McCurdy    schedule 14.03.2018

Ответы (3)


arrow_upward
6
arrow_downward

Игнорируйте <a-assets>, поскольку это для предварительной загрузки сети перед запуском.

Просто установите компонент модели с помощью setAttribute:

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

or

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

person ngokevin    schedule 14.03.2018
comment
Сработало у меня! Большое Вам спасибо. 'Src' - неправильный атрибут, вместо этого должен быть 'obj'. Еще раз спасибо за ответ. - person Felix; 14.03.2018
comment
Я использую Vue, и я визуализирую модель gltf на компоненте и всегда получаю эту ошибку components:gltf-model:warn Unexpected token < in JSON at position 0 , я действительно застрял из-за этого :(. Вы можете помочь мне, как отладить это - person Zum Dummi; 18.04.2019

arrow_upward
0
arrow_downward

Вы можете создать собственный компонент, который будет использовать один из загрузчиков 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.

person Noam Almosnino    schedule 14.03.2018
comment
Не уверен, что OP означает именно это, но было бы еще проще, если бы на лету добавить (существующий) компонент: el.setAttribute('gltf-model', {src: 'path/to/model.gltf'}) - person Don McCurdy; 14.03.2018
comment
Ах да намного проще :) - person Noam Almosnino; 14.03.2018
comment
Я думаю, что gltf-model, к сожалению, однопроцессорный компонент, поэтому el.setAttribute('gltf-model', 'path/to/model.gltf'). Отправлю как ответ - person ngokevin; 14.03.2018
comment
Ценю твой ответ! решение, предложенное ngokevin, сработало для меня и кажется намного проще. - person Felix; 14.03.2018

arrow_upward
0
arrow_downward

@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>
person Marian    schedule 27.12.2018
comment
Как сделать то же самое с моделью obj? - person Paolo Colombo; 21.03.2019