『アクアリウム的な感じ』のコード - 日々是好日～every day is a good day～

昨日の投稿した『WebARでアクアリウム的な感じ』のコードを残しておきます
今のところ　これだけが私のA-Frameの経験値なので

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width"
    />
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
  </head>

  <body style="margin: 0; overflow: hidden">
    <a-scene
      embedded
      vr-mode-ui="enabled: false"
      renderer="logarithmicDepthBuffer: true"
    >
      <a-asset-item
        id="angelfish"
        src="エンゼルフィッシュglbのURL"
      ></a-asset-item>
      <a-asset-item
        id="whale"
        src="くじらglbのURL"
      ></a-asset-item>
      <a-entity
        gltf-model="#angelfish"
        animation-mixer
        position="0 0 -2"
        scale="0.1 0.1 0.1"
        rotation="0 0 0"
      ></a-entity>
      <a-entity
        gltf-model="#angelfish"
        animation-mixer
        position="0.25 0.25 -2"
        scale="0.1 0.1 0.1"
        rotation="0 0 0"
      ></a-entity>
      <a-entity
        gltf-model="#angelfish"
        animation-mixer
        position="-0.25 0.25 -2"
        scale="0.1 0.1 0.1"
        rotation="0 0 0"
      ></a-entity>
      <a-entity
        gltf-model="#angelfish"
        animation-mixer
        position="-0.5 0 -2"
        scale="0.1 0.1 0.1"
        rotation="0 0 0"
      ></a-entity>
      <a-entity
        id="kujira"
        gltf-model="#whale"
        animation-mixer
        position="0 0 -3"
        scale="1 1 1"
        rotation="0 -90 0"
      >
      </a-entity>

      <script>
        const el = document.querySelector("#kujira");
        let position = el.getAttribute("position");
        const center = 0;
        const radius = 5;
        let angle=0;
        var move = function () {
          angle+=2;
          let radian = angle*Math.PI/180;
          let x = center + Math.cos(radian) * radius;
          let z = center + Math.sin(radian) * radius;
          el.setAttribute("position", { x: -x, y: 0, z: z });
          el.setAttribute("rotation", { x: 0, y: Math.sin(radian)*90, z: 0 });
        };
        setInterval(move, 100);
      </script>

      <a-camera position="0 0 0">
        <a-plane
          position="0 0 -0.1"
          scale="2 2 2"
          color="#658CFF"
          material="transparent: false; opacity: 0.4"
        ></a-plane>
      </a-camera>
    </a-scene>
  </body>
</html>