reroad-test/2020-ryusei/aframe-master/examples/test/fog/index.html at f15046a16bd49e11c3cfc9205c2321558810466c

Fork: 0

SKIP / reroad-test

Find file

Newer

Older

reroad-test / 2020-ryusei / aframe-master / examples / test / fog / index.html

ryusei on 22 Oct 2020 1 KB パノラマ表示

Raw Blame History

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Fog</title>
    <meta name="description" content="Fog - A-Frame">
    <script src="../../../dist/aframe-master.js"></script>
  </head>
  <body>
    <a-scene fog="type: linear; color: #AAB; far: 150; near: 0">
      <a-assets>
        <a-mixin id="box" geometry="primitive: torusKnot; p: 3; q: 11; radiusTubular: .5; radius: 10" material="color: #2F3C4F"></a-mixin>
        <a-mixin id="move" animation="property: position; dir: alternate; dur: 4096; easing: linear; loop: true"></a-mixin>
        <img id="louvre" src="louvre.jpg">
      </a-assets>

      <!-- Camera. -->
      <a-entity position="0 0 0">
        <a-camera></a-camera>
      </a-entity>

      <!-- Skysphere. -->
      <a-entity geometry="primitive: sphere; radius: 120"
                material="shader: flat; src: #louvre; side: back"
                position="0 1.8 0" scale="1 1 -1" rotation="0 90 0"></a-entity>

      <a-entity animation__spin="property: rotation; dur: 4096; to: -360 0 0; easing: linear; loop: true">
        <a-entity mixin="box move" position="-30 0 0" animation="to: -100 0 0"></a-entity>
        <a-entity mixin="box move" position="30 0 0" animation="to: 100 0 0"></a-entity>
        <a-entity mixin="box move" position="0 0 -30" animation="to: 0 0 -100"></a-entity>
        <a-entity mixin="box move" position="0 0 30" animation="to: 0 0 100"></a-entity>
      </a-entity>
    </a-scene>
  </body>
</html>