How to rotate 3D Cube using JavaScript?

const Scene = require(‘Scene’);
const Time = require(‘Time’);

export const Diagnostics = require(‘Diagnostics’);

var s = 0;
(async function () { // Enables async/await in JS [part 1]
const [cube] = await Promise.all([
Scene.root.findFirst(‘myCube’)
]);

function convertoRAD(degrees){
return degrees*(3.14/180);
}

for(let i=0; i<360; i = i+0.01){
cube.transform.rotationX = convertoRAD(i);
}

})();

Hello Everyone, I am trying to use transformation using JavaScript in spark AR, but somehow I am facing an issue with rotation, The rotation value increases inside the properties panel but the actual cube doesn’t rotate in the viewport, Can someone help me to understand what is a solution for this?

The issue is that you are applying all of those rotation values at the same time. You need to apply them over time. You could use Time.setInterval to increment the rotation values over time, but that’s not the reactive way of doing it.

The proper reactive way would be to use the Time.ms signal with some multiplication, sine, or modulo operators.

Another reactive approach is to use animation drivers and samplers. It’s a little more complex but it gives you more options.

//============================================================================
// The following example demonstrates how to create an animation using 
// a Time Driver.
// 
// The 3D object will scale and animate based on the time duration passed in.
//
// Project setup:
// - Add a Plane object sample with the name 'plane0' to the scene
//============================================================================

// Load in the required modules
const Scene = require('Scene');
const Animation = require('Animation');

(async function () {  // Enables async/await in JS [part 1]

  // Locate the Plane scene element
  const plane = await Scene.root.findFirst('plane0');

  // Time Driver allows you to specify a duration in milliseconds for the
  // animation along with optional parameters for looping and mirroring.
  const timeDriverParameters = {
      durationMilliseconds: 2000,
      loopCount: Infinity,
      mirror: true
  };

  // Create a TimeDriver using the above parameters
  const timeDriver = Animation.timeDriver(timeDriverParameters);

  // The linear sampler allows you to specify the beginning and end values of the animation
  let linearSampler = Animation.samplers.linear(0.5, 1);

  // TimeDriver and Sampler come together to create an animation
  const animation = Animation.animate(timeDriver, linearSampler);

  // The scaleX/Y/Z() methods of the TransformSignal allows us to bind the animation
  // ScalarSignal being output to the scale of the plane object.
  plane.transform.scaleX = animation;
  plane.transform.scaleY = animation;
  plane.transform.scaleZ = animation;

  // Start the TimeDriver
  timeDriver.start();

})(); // Enable async/await in JS [part 2]

Hey Josh,

I am not that use to JavaScript in Spark AR, If possible can you share the working code for rotating a 3D cube in Spark AR. I just started learning it would be really helpful.

Sure, here’s a bare-bones example just using some reactive math operations.

const Scene = require('Scene')
const Time = require('Time')

const init = (async function () {

  const octa = await Scene.root.findFirst('Octahedron')
  octa.transform.rotationY = Time.ms.mul(.001).mod(Math.PI*2)

})()