<html>

<head>
  <title> Textures</title>

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

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

</head>

<body>

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

<a-assets>
  
   <img id="sand" crossorigin="anonymous" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT8yk8DfEK3_p00rFA6v0HmoRRBUnofgIJkIe5ABarDJqJF3V3_">
 <img id="glass" crossorigin="anonymous" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXhbpfWPwlvkCP7xAgq00gumbFRQ6q-eUNH4a9LUrIXs--J7ac"> 
  <img id="rust" crossorigin="anonymous" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSeeEo19vWWDeLx2o9a0ypIUv4qvpDAWcRa_AAo3UI2-nF_2Nus"> 
  <img id="leaves" crossorigin="anonymous" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTFECvldc9ayjqk6jZUFhHyLyhNJFXlp9Y7Fb6EuqTjw5BJE5J8KQ"> 
  <img id="mix" crossorigin="anonymous" src="https://us.v-cdn.net/5021068/uploads/editor/f0/6kymf4lg6ium.jpg"> 
  
</a-assets>
    

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

    <a-sky id="background-img" color="#EBEBEB"></a-sky>
      
 
   <!--  --------- GROUND  --------- -->

    <a-plane id="ground" color="#000000" position="0 0 0" rotation="-90 0 0" width="10" lenght="10"></a-plane>
    
    <!--  --------- SHAPES  --------- -->
    
     <!-- By adding an image as src, the image becomes the shape's texture --> 
    
     <a-cylinder position="0 0.75 -0.25" radius="0.5" height="1.5" color="#FFC65D" src="#sand" material=" repeat:5 3"></a-cylinder>
    <!-- By using the repeat instance of the material property you are able to repeat the texture as many times you want in the x and the y axis 

For further info on materials, check: https://aframe.io/docs/master/components/material.html --> 
    
      <a-box position="-1 0.5 0.5" depth="0.5" height="0.5" width="0.5" color="#FFF65D" src="#glass"></a-box>
     <!--If the shape has color and texture, the color will be like a filter to the image, the color will multiply --> 
    
    <a-cone  position="1 0.5 0"  radius-bottom="0.5" radius-top="0" src="#rust"></a-cone>
  
    <a-ring  position="-3.7 0.7 0" color="teal" radius-inner="0.25" radius-outer="0.7" src="#rust"></a-ring>
    
    <a-dodecahedron position="2 0.25 0"  color="#FF9FFF" radius="0.5" src="#leaves"></a-dodecahedron>
     
      <a-octahedron position="-2.5 0.25 0" src="#mix" radius="0.45"></a-octahedron>
    
  <a-sphere  position="3.7 0.5 0"color="blue" radius="0.5" src="#mix"></a-sphere>
    
 <!--  --------- CAMERA AND CURSOR  --------- -->  
     
      
<a-camera  look-controls-enabled wasd-controls-enabled position="0 0 3"> 
   <!--The camera is a bit far from position 0 0 0 so you can view the full picture  -->  
  
    <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>
  <!-- Closing 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.