<html>

<head>
  <title> Lights</title>

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

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

</head>

<body>

  <a-scene> <!-- Creating scene -->


    

    <!--  --------- SKY  --------- -->

    <a-sky id="background-img" color="#EBEBEB"></a-sky>
    
    <!--  --------- LIGHTS  --------- -->
      
 <a-entity id="lightSphere" geometry="primitive:sphere; radius: 0.25" position="0 1.5 -2" rotation="0 45 0" material="color:#FFE65F; shader:flat" light="type:point"></a-entity>
 <!-- This is a yellow light behind the shapes
It's a point light -->   
    
  <!-- <a-light type="ambient" position="0 -0.5 5" color="purple" intensity="0.6"></a-light>
<!-- This directional light has a low intensity, the max intensity is 1 
In order to visualize better the effects of the lights, just use one at a time --> 
    
  <!-- <a-light position="0 0 1" color="pink" target="#sphere" ></a-light> 
    <!--If you don't define a light type, the default is directional. The intensity is also 1 by default
By assigning a target, you rotate the light towards the chosen target-->  
 
 
    
   <!--  --------- GROUND  --------- -->

    <a-plane id="ground" color="#000000" position="0 0 0" rotation="-90 0 0" width="10" lenght="10"></a-plane>
    
    <!--  --------- SHAPES  --------- -->
    
     <a-cylinder position="0 0.75 -0.25" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  
     
      <a-box position="-1 0.5 0.5" depth="0.5" height="0.5" width="0.5" color="#FFF65D"></a-box>
    
    <a-cone  position="1 0.5 0" color="tomato" radius-bottom="0.5" radius-top="0"></a-cone> 
    
    <a-dodecahedron position="2 0.25 0"  color="#FF9FFF" radius="0.5"></a-dodecahedron>
    
    <a-octahedron position="-2.5 0.25 0" color="#FF926B" radius="0.45"></a-octahedron>
    
    <a-ring  position="-3.7 0.7 0"  radius-inner="0.25" radius-outer="0.7"></a-ring>
    
  <a-sphere id="sphere" position="3.7 0.5 0"color="blue" radius="0.5"></a-sphere>
    
 <!--  --------- CAMERA AND CURSOR  --------- -->  
     
      
<a-camera  look-controls-enabled wasd-controls-enabled position="0 0 3"> 
  
  
    <a-cursor position="0 0 -3"
              geometry="primitive: ring; radiusOuter: 0.030; radiusInner: 0.020;" 
              material="color: #11d8c4; shader: flat"
              fuse="true" timeout="10">   
    </a-cursor>  

</a-camera> 
    
      

  </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.