A帧切换实体可见组件不会呈现360幅图像。

Question

我正在尝试在我的单一页面应用程序中交换实体，以便使用我生成的一些测试按钮来模拟场景切换。它对'scene3DModel‘正常工作，但当切换到'scene360’时，设置为src的360图像不会在其他“场景”被注释掉时正确呈现?？360图像。

“场景”实体的标记：

  <a-entity id="sceneHome" visible="true">
      <a-sky color="#6EBAA7"></a-sky>
  </a-entity>  

  <a-entity id="scene360" visible="false">
      <a-sky src='url(/assets/360-photo.jpg)'></a-sky>
  </a-entity> 

  <a-entity id="scene3DModel" visible="false" gltfpostprocessing gltf-opaque update-sun fog="density:1.3; near:4.0;">
    <!-- procedural environment-->
    <a-entity environment="preset: yavapai; seed: 5; skyColor: #cbdff7; horizonColor: #d8e0ae; shadow: true; shadowSize: 25.0; lightPosition: 10 40 30; fog: 0.91; playArea: 1; ground:hills; groundYScale: 4; groundColor: #c69c7b; groundColor2: #c1a582; dressingAmount: 0; dressingUniformScale: false; grid: crosses; gridColor: #bb9977"></a-entity>
    <!-- scene lights--> 
    <a-entity light="type: ambient; color: #fffcf2; intensity: 0.6; "></a-entity>
    <!--3D Models-->
    <a-entity id="loaded-model" gltf-model="#temple-gltf" ></a-entity>
  </a-entity>

生成的按钮标记-事件被正确地发出。

<a-entity view-toggle-test="" id="view-toggle" position="0 1 2" rotation="0 180 0" scale="0.2 0.2 0.2" visible="">
    <a-triangle position="0 0" text="value:image;color:red;width:4;align:center" rotation="" scale="" visible="" material="" geometry="height:0.1846484165324745;width:4;primitive:triangle"></a-triangle>
    <a-triangle position="0 1.5" text="value:home;color:red;width:4;align:center" rotation="" scale="" visible="" material="" geometry="height:0.1846484165324745;width:4;primitive:triangle"></a-triangle>
    <a-plane position="0 3" text="value:model;color:red;width:4;align:center" rotation="" scale="" visible="" material="" geometry=""></a-plane>
</a-entity>

场景管理器组件

AFRAME.registerComponent('scene-manager', {
    schema: {
    },
    init: function (){
        var self = this
        var el = this.el;
        window.addEventListener('activeSceneChanged',(e)=> {
            nextScene = e.detail.activeScene;
            self.setScene(nextScene)
        });
    }, 
    setScene: function(nextScene){
        var sceneHome = document.getElementById('sceneHome');
        var scene360 = document.getElementById('scene360');
        var scene3DModel = document.getElementById('scene3DModel'); 

        //stupid version of swapping logic
        if(nextScene == 'sceneHome'){
            scene360.setAttribute('visible', 'false');
            scene3DModel.setAttribute('visible', 'false');
            sceneHome.setAttribute('visible', 'true');
        }if(nextScene == 'scene360'){
            sceneHome.setAttribute('visible', 'false');
            scene3DModel.setAttribute('visible', 'false');
            scene360.setAttribute('visible', 'true');
        }if(nextScene == 'scene3DModel'){
            sceneHome.setAttribute('visible', 'false');
            scene360.setAttribute('visible', 'false');
            scene3DModel.setAttribute('visible', 'true');
        }
    }
});

Answer 1

我使用的环境组件中的环境设置覆盖了a-sky 360。我切换到了用于场景管理的k帧模板，并切换了属性-环境，{active:false}