Core Setup

Before implementing ainmations, initialize the essential Three.js components: a scene, perspective camera, WebGL renderer, a yellow cube mesh, and an axis helper for spatial reference.

import * as THREE from 'three';

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.set(10, 10, 10);
camera.lookAt(scene.position);
scene.add(camera);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const box = new THREE.Mesh(geometry, material);
scene.add(box);

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

const axes = new THREE.AxesHelper(5);
scene.add(axes);

This renders a static yellow cube with visible coordinate axes.

Animation Strategy

Instead of setInterval, use requestAnimationFrame for smooth, browser-optimized frame updates. It synchronizes with the display refresh rate and avoids timing jitter.

All animations below follow this patern:

• Modify object properties (position, rotation, scale) per frame.
• Call renderer.render(scene, camera).
• Recursively invoke the render loop via requestAnimationFrame.

Linear Translation Along X-Axis

Move the cube back and forth between x = 0 and x = 4 using directional toggling:

let dx = 0.08;

function animateTranslation() {
  if (box.position.x >= 4 || box.position.x <= 0) {
    dx = -dx;
  }
  box.position.x += dx;

  renderer.render(scene, camera);
  requestAnimationFrame(animateTranslation);
}

animateTranslation();

For smoother oscillation, replace linear logic with cosine-based positioning:

let phase = 0;

function animateSmoothX() {
  phase += 0.05;
  box.position.x = 2 + 1.5 * Math.cos(phase);

  renderer.render(scene, camera);
  requestAnimationFrame(animateSmoothX);
}

animateSmoothX();

Continuous Rotation Around All Axes

Apply incremental rotation on all three axes at consistent rates:

function animateRotation() {
  box.rotation.x += 0.008;
  box.rotation.y += 0.012;
  box.rotation.z += 0.006;

  renderer.render(scene, camera);
  requestAnimationFrame(animateRotation);
}

animateRotation();

Oscillating Uniform Scaling

Scale the cube up and down between 1× and 2× its original size:

let scaleDelta = 0.03;

function animateScaling() {
  box.scale.multiplyScalar(1 + scaleDelta);

  if (box.scale.x >= 2 || box.scale.x <= 1) {
    scaleDelta = -scaleDelta;
  }

  renderer.render(scene, camera);
  requestAnimationFrame(animateScaling);
}

animateScaling();

Parabolic Bounce Motion

Simulate a bouncing effect by combining horizontal cosine motion with vertical absolute sine motion:

let time = 0;

function animateBounce() {
  time += 0.1;

  box.position.x = 4 * Math.cos(time);
  box.position.y = 2.5 * Math.abs(Math.sin(time));

  renderer.render(scene, camera);
  requestAnimationFrame(animateBounce);
}

animateBounce();