Threejs - formula to animate fjdxsu

Question

What is the formula I need to use in my animate function

Answer 1

As an option, you can align your box's geometry along Y-axis and rotate the box arount that axis:

body{
  overflow: hidden;
  margin: 0;
}

<script type="module">
import * as THREE from "https://threejs.org/build/three.module.js";
import {OrbitControls} from "https://threejs.org/examples/jsm/controls/OrbitControls.js";

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(0, 10, 10);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new OrbitControls(camera, renderer.domElement);

scene.add(new THREE.GridHelper(10, 10));
scene.add(new THREE.AxesHelper(5));

var g = new THREE.BoxBufferGeometry(5, 5, 5);
g.rotateY(Math.PI * 0.25);
g.rotateX(THREE.Math.degToRad(54.736)); // angle between box's bottom side and box's main diagonal is 35.264, so you need 90-35.264 = 54.736

var m = new THREE.MeshBasicMaterial({color: "aqua", wireframe: true});
var o = new THREE.Mesh(g, m);
scene.add(o);

renderer.setAnimationLoop(()=>{
  o.rotation.y += 0.01;
  renderer.render(scene, camera);
});
</script>

Answer 2

I would put the cube in a group and then rotate the group.

const scene = new THREE.Scene();  
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); 

const renderer = new THREE.WebGLRenderer({antialias: true}); 
renderer.setSize( window.innerWidth, window.innerHeight ); 
document.body.appendChild( renderer.domElement );

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh( geometry, material );

camera.position.z = 2;

const group = new THREE.Group();
group.add( cube );
scene.add( group );

cube.rotation.x = THREE.Math.degToRad(90-35.264);
cube.rotation.y = Math.PI / 4;

const render = function () {
    requestAnimationFrame( render );
    group.rotation.y += 0.01;
    renderer.render(scene, camera);
};

render();

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>