JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/three@0.134.0/build/three.min.js"></script>

CSS

body {
	  margin: 0;
}

JavaScript

let clock;
let scene, camera, renderer, mixer;

init();
animate();

function init() {

  scene = new THREE.Scene();

  //

  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(25, 25, 50);
  camera.lookAt(scene.position);

  //

  const axesHelper = new THREE.AxesHelper(10);
  scene.add(axesHelper);

  //

  const geometry = new THREE.BoxGeometry(5, 5, 5);
  const material = new THREE.MeshBasicMaterial();
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

 	const keyframes = new THREE.VectorKeyframeTrack( '.position', [ 0, 1, 2, 3, 4 ], [ 0, 0, 0, 10, 0, 0, 10, 10, 0, 0, 10, 0, 0, 0, 0 ] );
  const clip = new THREE.AnimationClip('clip', 4, [keyframes]);

  mixer = new THREE.AnimationMixer(mesh);

  const action = mixer.clipAction(clip);
  action.play();

  //

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

  //

  clock = new THREE.Clock();

  //

  window.addEventListener('resize', onWindowResize);

}

function onWindowResize() {

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);

}

function animate() {

  requestAnimationFrame(animate);

  render();

}

function render() {

  const delta = clock.getDelta();

  if (mixer) {

    mixer.update(delta);

  }

  renderer.render(scene, camera);

}