<html>

<head>
  <title> Ocean</title>

  <!--  --------- IMPORTED LIBRARIES  ------>


  <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>

    <script src="https://unpkg.com/aframe-extras.ocean@%5E3.5.x/dist/aframe-extras.ocean.min.js"></script>
  
   <!--To use a component you need to load it's code from the server -->
  
</head>

<body>
  
    <a-scene>
    <!--  --------- SKY  --------- -->

    <a-sky id="background-img" color="#ABABAB"></a-sky>






    <a-entity id="ocean" position="0 -2 0" ocean="density: 50; width: 50; depth: 50; speed: 7" material="color: #9CE3F9; opacity: 0.75; metalness: 0; roughness: 1" rotation="-90 0 0"></a-entity>
  <!--
   The ocean only has the following properties so far: density, width, depth and speed.
-->

  </a-scene>


</body>

</html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.