A-frame - textures on objects

Tuesday, 11 April 2017 | Written by  |

In A-frame framework we can easily use textures to objects or models. Look how to use it.

 First example

Complete code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
  </head>
  <body>
    
<a-scene>
  <a-assets>
     <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg"> 
  </a-assets>
     <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>
     <a-sky color="#333"></a-sky>
</a-scene>
  <body>
</html>

Texture you can add to object with tag <a-assets> - you can use prepared texture or any image you want.

Second example 

Complete code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
  </head>
  <body>
    
<a-scene>
  <a-assets>
     <img id="boxTexture" src="/68.jpg"> 
     <img id="box2Texture" src="/7131.jpg"> 
     <img id="box3Texture" src="/4245.jpg">
  </a-assets>
     <a-box src="#boxTexture" position="3 -2 -5" rotation="0 45 45" scale="2 2 2"></a-box>
     <a-box src="#box2Texture" position="0 2 -5" rotation="30 0 45" scale="2 1 2"></a-box>
     <a-box src="#box3Texture" position="-2 5 -10" rotation="90 0 0" scale="1 2 3"></a-box>
     <a-sky color="#333"></a-sky>
</a-scene>
  <body>
</html>

Thanks to Textures Freepik

 

© 2017 WebooVR by Weboo.eu. All rights reserved