Le composant visible de l'entité de basculement d'une image ne restitue pas 360 images

Question

J'essaie de permuter des entités dans mon application de page unique pour émuler la commutation de scène en utilisant des boutons de test que j'ai générés. Cela fonctionne correctement pour le 'scene3DModel' mais quand vous basculez sur 'scene360', l'image 360 ​​définie sur le src ne sera pas rendue ??? L'image 360 ​​s'affiche correctement lorsque d'autres 'scènes' sont commentées.

Markup pour les entités 'scène':

<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> 

Généré Markup pour les boutons - Des événements sont émis correctement

<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> 

composant gestionnaire de scène

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

Les paramètres d'environnement du composant d'environnement que j'utilise remplaçaient l'a-sky 360. J'ai basculé vers les modèles de cadre de k pour la gestion de scène et de basculer attribute-environment, {active: false}