0

a-frameを使ってハウスツアーを作りたかった。家には、探索できる6つの部屋があります。シーン内でキャンバスを使用できることを読みました。canvas="canvas: scene1", scene2 のように複数のキャンバスを持つことは可能でしょうか。

これが最初のシーンのコード例です

<a-scene canvas="canvas: scene1">
      <a-assets>
        <img id="abtus" src="images/about.jpg">
        <img id="led" src="images/2.jpg">
        <img id="crt" src="images/3.jpg">
        <img id="scm" src="images/4.jpg">
        <img id="dev" src="images/5.jpg">
        <a-mixin id="cube" geometry="primitive: box"></a-mixin>
        <a-mixin id="black" material="color: black"></a-mixin>
        <a-mixin id="yellow" material="color: #EB9C27"></a-mixin>
        <a-mixin id="link" geometry="primitive: plane; width: 0.8; height: 0.8">
        <a-mixin id="link-selected" geometry="primitive: plane; width: 1.4; height: 1.4">
        </a-mixin>
      </a-assets>

      <!-- camera -->
      <a-entity camera no-click look-controls>
        <a-entity id="cursor" position="0 0 -3"
                geometry="primitive: ring; radiusOuter: 0.1;
                          radiusInner: 0.05;"
                material="color: green; shader: flat"
                cursor="maxDistance: 900; fuse: true; timeout=1500">
        <a-animation begin="click" easing="ease-in" attribute="scale"
             fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation>
        <a-animation begin="fusing" easing="ease-in" attribute="scale"
             fill="forwards" from="1 1 1" to="0.1 0.1 0.1" dur="1500"></a-animation>
      </a-entity>
    </a-entity>
           <a-entity 
        geometry="primitive:sphere;radius:5000;segmentsWidth:64;segmentsHeight:64"
        material="shader:flat;color:#ffffff;fog:false;src:abtus"
        scale="-1 1 1"
        id="photosphere">
    </a-entity>
</a-scene>

4

1 に答える 1

0

複数のシーンをセットアップしようとするよりも、さまざまな部屋をa-entitys として定義し、javascript で一度に 1 つずつ表示する方が簡単です。次に、すべてのシーンを 1 つだけ用意し、アニメーションで簡単に移行する方法を用意します (たとえば、切り替え時にさまざまな部屋エンティティの不透明度をアニメーション化することによって)。

于 2016-04-29T14:41:12.507 に答える