basic water and light animations

index.html

@@ -82,13 +82,18 @@ function geolocalized( pos ){
       <a-entity id="rightHand" hand-tracking-controls="hand: right;"></a-entity>
       <!-- for cardboard consider instead https://aframe.io/docs/1.3.0/components/cursor.html  -->
 
+      <!-- Default lighting injected by A-Frame. -->
+      <a-entity light="type: ambient; color: #BBB"></a-entity>
+      <a-entity animation="property: position; to: 5 1 1; dur: 20000; easing: linear; loop: true" 
+	      light="type: directional; color: #FFF; intensity: 0.6" position="-5 1 1"></a-entity>
+      <!-- to animate but also consider the background color -->
+      <a-sky color="#ECECEC"></a-sky>
+
       <a-sound src="src: url(birds.mp3)" autoplay="true" position="0 2 5"></a-sound>
       <a-sound src="src: url(river.mp3)" autoplay="true" position="0 2 5"></a-sound>
-      <a-box position="-0.1 1.2 -0.3" scale="0.5 0.5 0.5" rotation="0 45 0" color="#4CC3D9"></a-box>
-      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
-      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
-      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
-      <a-sky color="#ECECEC"></a-sky>
+      
+      <a-plane animation="property: position; to: 0 0.4 0; dur: 20000; easing: linear; loop: true"  
+	      position="0 -0.5 0" rotation="-90 0 0" width="100" height="100" color="lightblue"></a-plane>
     </a-scene>
   </body>
 </html>