A-Frame – dynamic JavaScript, code part (.js)

The below example shows using A-Frame together with JavaScript.

The example shows, how to animate a sphere on a plane.

This is the JavaScript part.

//creates shortcut for selecting DOM element
$ = (queryString) => document.querySelector(queryString);
//Change color of the sphere programmatically
//without animation
//$('a-sphere').setAttribute('color', 'blue');
/*
//our callback function
let count = 0;
const animate = () => {
 //do something
   /console.log(count++);
    requestAnimationFrame(animate);
}

requestAnimationFrame(animate);
*/
//create a state variable for hue
let hue = 0;
/*
Hue is one of the main properties (called color appearance parameters) of a color,
defined technically (in the CIECAM02 model), as "the degree to which a stimulus can be
described as similar to or different from stimuli that are described as red, green, blue, and yellow",
(which in certain theories of color vision are called unique hues).
read more at: https://en.wikipedia.org/wiki/Hue
 */
//function for changing color 60times a second
const shiftHue = (hue) => (hue + 1) % 360; //modulus 360, så the value never goes over 360.

//Change color of the sphere programmatically
//with animation using javascript requestAnimationFrame() method which calls our animate() callback 60 times/sec
//our callback function

const animate = () => {
    //every frame we will create a new hue
    hue = shiftHue(hue);
    const color = `hsl(${hue}, 100%, 50%)`; //hue, saturation, light
    const variation = Math.sin(Date.now() / 1000);
    const position = `0 ${1.5 + variation} -4`;

    $('a-sphere').setAttribute('color', color);
    $('a-sphere').setAttribute('position', position);
    $('a-plane').setAttribute('rotation', `-90 ${120 * variation} 0`);
    $('a-plane').setAttribute('color', color);

    requestAnimationFrame(animate);
};

//programmatic animation.
//requestAnimationFrame() will fire the callback when the browser is ready
//will do it 60 times/second
requestAnimationFrame(animate);

//creates shortcut for selecting DOM element

$ = (queryString) => document.querySelector(queryString);

//Change color of the sphere programmatically

//without animation

//$('a-sphere').setAttribute('color', 'blue');

//our callback function

let count = 0;

const animate = () => {

//do something

/console.log(count++);

requestAnimationFrame(animate);

}

requestAnimationFrame(animate);

//create a state variable for hue

let hue = 0;

Hue is one of the main properties (called color appearance parameters) of a color,

defined technically (in the CIECAM02 model), as "the degree to which a stimulus can be

described as similar to or different from stimuli that are described as red, green, blue, and yellow",

(which in certain theories of color vision are called unique hues).

read more at: https://en.wikipedia.org/wiki/Hue

//function for changing color 60times a second

const shiftHue = (hue) => (hue + 1) % 360; //modulus 360, så the value never goes over 360.

//Change color of the sphere programmatically

//with animation using javascript requestAnimationFrame() method which calls our animate() callback 60 times/sec

//our callback function

const animate = () => {

//every frame we will create a new hue

hue = shiftHue(hue);

const color = `hsl(${hue}, 100%, 50%)`; //hue, saturation, light

const variation = Math.sin(Date.now() / 1000);

const position = `0 ${1.5 + variation} -4`;

$('a-sphere').setAttribute('color', color);

$('a-sphere').setAttribute('position', position);

$('a-plane').setAttribute('rotation', `-90 ${120 * variation} 0`);

$('a-plane').setAttribute('color', color);

requestAnimationFrame(animate);

};

//programmatic animation.

//requestAnimationFrame() will fire the callback when the browser is ready

//will do it 60 times/second

requestAnimationFrame(animate);