Question

我尝试在单页应用中交换实体，以使用我生成的一些测试按钮来模拟场景切换。它适用于＆＃39; scene3DModel＆＃39;但当切换到＆＃39; scene360＆＃39;时，360图像设置为赢得的src渲染???当其他场景＆＃39;被注释掉了。

标记场景＆＃39;实体：

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

A帧切换实体可见组件不会渲染360图像

1 个答案: