Three.js 将模型加载到a实体中

我正在尝试将模型有条件地加载到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>

---

模型加载并显示到场景中，但如何将其附加到实体？

无需调用GLTFLoader。使用：

---

我建议预先加载模型，这样用户就不必等待网络。预加载大模型和小模型。

我将模型填充到

中，方法与将模型附加到场景中的方法类似。以下是最终代码：

    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)
        })
      },

如果我将重型模型添加到

中，这是推荐的操作方式，将导致整个应用程序被阻塞，直到所有资产都加载并准备就绪。在我的场景中，用户可以选择跳过下载。如果用户选择加载模型，则他/她将获得一个更新的progressbar（实际上是一个环）。 下面是如何加载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 );
                   }
               );
             }
          );

      },

    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)
        })
      },

      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 );
                   }
               );
             }
          );

      },