Загрузить модель в a-сущность - PullRequest
Новая
       7

Загрузить модель в a-сущность

0 голосов
/ 15 января 2019

Я пытаюсь выполнить условную загрузку модели в a-сущность. Причина этого заключается в том, что у меня есть сцена, которую я хотел бы дать пользователю возможность загрузить большую модель или нет. Пока что у меня есть сцена со следующей сущностью: 

  id="modelname-entity"
  scale="2 2 2"
  position="0 0 -5"
  drag-rotate="rotateY:false;"
  model-rotate-loadprogress="modelUrl:modelname.gltf;modelRef:modelname-model"
  ></a-entity>

с компонентом model-rotate-loadprogress, который загружает модель gltf с синтаксисом THREE.js: 

AFRAME.registerComponent('model-rotate-loadprogress',{
      schema : {
        modelUrl: {
          type: "string"
        },
        modelRef: {
          type: "string"
        }
      },

      init : function(){

        this.loadModel();

      },

      loadModel: function() {

        if (!this.data.modelUrl || !this.data.modelRef) {
          console.warn("Model details not given for model rotate loader");
          return;
        }
        if ( document.getElementById(this.data.modelRef) ) {
            console.warn("Assets already has an asset with the ID of " , this.data.modelRef );
        }

        // Using THREE.js file loader
        var dis = this;

        var loader = new THREE.GLTFLoader().setPath( '/assets/static/models/' );
        loader.load(
          this.data.modelUrl,

          gltf => {
            // Add the model to the scene for now.
            dis.el.sceneEl.object3D.add(gltf.scene);
          },

          xhr => {
            console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
          },

          error => {
            console.error( error );
          }
        );
      }
  }

Модель загружается и отображается на сцене, но как вместо этого прикрепить ее к объекту?

Ответы [ 2 ]

0 голосов
/ 16 января 2019

Я получил модель, заполняющую <a-entity> аналогично тому, как я ее прикрепил к сцене. Вот окончательный код: 

    loadGLTFModel: function() {

        var dis = this;
        var loader = new THREE.GLTFLoader().setPath( this.PATH_MODELS );

        loader.load(
          `${this.PATH_MODELS}${this.data.gltfModel}`,
          gltf => {
            dis.el.object3D.add(gltf.scene)
          },
          progress => {
            this.onProgress(progress);
          },
          error => {
            console.error( "ERROR : " , error );
          }
        );
      },
    onProgress: function(progress) {
        this.progressBar.setAttribute("geometry", {
          thetaLength: (progress.loaded / progress.total * 360)
        })
      },

Если я добавлю тяжелую модель к <a-assets>, который является рекомендуемым способом работы, это приведет к блокировке всего приложения до тех пор, пока все ресурсы не будут загружены и готовы. В моем сценарии у пользователя есть возможность пропустить загрузку. Если пользователь решает загрузить модель, он / она получает индикатор выполнения (фактически кольцо), который обновляется. Вот код для загрузки моделей obj и mtl: 

      loadOBJModel: function() {

        var dis = this;

        if (!this.data.mtlMaterial) {
          console.error("No material given for model");
          return;
        }

        var mtlLoader = new THREE.MTLLoader();

                mtlLoader.load(
            `${this.PATH_MODELS}${this.data.mtlMaterial}`,
            materials => {

              materials.preload();
              var objLoader = new THREE.OBJLoader();

                objLoader.setMaterials( materials );
                objLoader.setPath( this.PATH_MODELS );
                objLoader.load(
                   this.data.objModel,
                    object => {
                                dis.el.object3D.add(object)
                   },
                   progress => {
                      this.onProgress(progress);
                   },
                   error => {
                      console.error( "ERROR : " , error );
                   }
               );
             }
          );

      },
0 голосов
/ 15 января 2019

Нет необходимости вызывать GLTFLoader. Используйте компонент gltf-model : 

loadModel: function() {

   if (!this.data.modelUrl || !this.data.modelRef) {
     console.warn("Model details not given for model rotate loader");
     return;
    }
   if ( document.getElementById(this.data.modelRef) ) {
      console.warn("Assets already has an asset with the ID of " , this.data.modelRef );
   }

   this.el.setAttribute(‘gltf-model’, ‘url(‘ + this.data.modelUrl + ‘)’);
}

Я рекомендую предварительно загрузить модель в a-assets , чтобы пользователю не приходилось ждать сети. Предварительная загрузка как больших, так и маленьких моделей.

...