Hello, Friends we already completed two examples on a-frame basic today we will see how to use javascript in AframeJs.
In today’s example, we will see a very basic example and in the upcoming example, we will see an advanced example in which we will also cover threeJs 3D objects.
Table of Contents
- Aframe Example – 3: How to use javascript in A-frameJs
- Let’s Learn Something from Example
- Aframe Challange 3 – How to use javascript in A-frameJs
- Today Pro Tip
Aframe Example – 3: How to use javascript in A-frameJs
By using javascript and aframejs component system we will do almost anything we can think of. So today we will see some basics and learn through examples. let’s get started, just copy and paste the code given below in the Html file and run the file and check the output.
<html>
<head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
</head>
<body>
<a-scene inspector="" keyboard-shortcuts="" screenshot="" vr-mode-ui="" device-orientation-permission-ui="">
<a-box id="vat_box" position="1.13146 0.5 -3" rotation="0 45 0" material="color: #171717;" geometry=""></a-box>
<a-sphere position="-0.85371 1.25 -5" radius="1.25" color="#EF2D5E" material="color: #90479a" geometry=""></a-sphere>
<a-cylinder position="-2.75436 0.48975 -3" radius="0.5" height="1.5" color="#FFC65D" material="color: #ad99ff" geometry="height: 5"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" material="color: #ffffff" geometry=""></a-plane>
<a-sky color="#ECECEC" material="color: #000000" geometry=""></a-sky>
<div class="a-loader-title" style="display: none;"></div></a-scene>
<script type="text/javascript">
let boxEl = document.getElementById('vat_box');
boxEl.setAttribute('geometry', 'width', 2);
boxEl.setAttribute('material', 'color', "lightgreen");
</script>
</body>
</html>
In the above example, we see how to change the materials and geometry of aframe entity. similarly, you can change the position, rotation, and scale of aframe entity.
Let’s Learn Something from Example
How to transform a-frame entity?
First, let’s talk about 3-dimensional space. Right-handed coordinates are used in A-Frame. Positive Z-axis expands out from the screen toward us, the positive X-axis extends to the right, and the positive Y-axis extends to the up. To transform your a-frame entity refer to the below code.
boxEl.setAttribute('position', '3 1 -5');
boxEl.setAttribute('rotation', '0 30 0');
boxEl.setAttribute('scale', '1.3 1.3 1.3'); AframeJs entity position using setAttribute
below both methods are correct and you can also use both methods on rotation and scale.
boxEl.setAttribute('position', '-3 0.59 -3')
boxEl.setAttribute('position', {x:-3, y:0.59, z:-3})How to get a-frame entity rotation/position/scale etc
similar to set attribute we can also able to use getAttribute to get the property value of aframe entity. Just refer to the below code for a better understanding.
let box_x_pos = boxEl.getAttribute("position").x;
let box_y_pos = boxEl.getAttribute("position").y;
let box_z_pos = boxEl.getAttribute("position").z;
console.log(box_x_pos,box_y_pos,box_z_pos)Why use getAttribute and setAttribute?
As we know both setAttribute(prop, value) and getAttribute(prop) are used to set/get attributes of any other DOM elements.
setAttribute is also compatible with aframe component system as it calls the update() function of aframe component to notify, that a property of a component has changed. We will see aframe component system in our upcoming examples.
Syntax to setAttribute for primitive
setAttribute('material','color','#ffffff');
setAttribute('material',{'color': '#ffffff','opacity':'0.2'});Both above methods are correct and also tested by me so you can use either of the methods to set single property or multiple properties.
Aframe Challange 3 – How to use javascript in A-frameJs
- Make aframe text entity that will show the current Month, Date, and time. we will cover the text entity in future examples but you can refer to the official aframe documentation here : link
Today Pro Tip
Use the inspector tool to quickly position the entity and after that copy the component as HTML and paste the updated code into your HTML file. see the below-attached image to get a better understanding.
To learn more about Visual Inspector & Dev Tools: link
Thank you see you soon.