JSFiddle - React, Tailwind, and code Playground

by Suprhimp

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.145.0/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
  padding: 0;
  margin: 0;
}

canvas {
  display: block;
}

JavaScript

var camera, scene, renderer, mesh, bluematerial,redmaterial, smoothMesh,mixer,smoothMixer;

const clock = new THREE.Clock();

init();
animate();

function init() {
  // Renderer.
  renderer = new THREE.WebGLRenderer();
  //renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  // Add renderer to page
  document.body.appendChild(renderer.domElement);

  // Create camera.
  const width = renderer.domElement.clientWidth
  const height = renderer.domElement.clientHeight
  camera = new THREE.OrthographicCamera(width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
	camera.position.set(0,30,0)

  // Create scene.
  scene = new THREE.Scene();

  // Create material
  bluematerial = new THREE.MeshPhongMaterial({color:new THREE.Color(0x0000ff)});
  redmaterial = new THREE.MeshPhongMaterial({color:new THREE.Color(0xff0000)});

  // Create cube and add to scene.
  var geometry = new THREE.BoxGeometry(20, 20, 20);
  mesh = new THREE.Mesh(geometry, bluematerial);
 
 	smoothMesh = new THREE.Mesh(geometry, redmaterial)
  smoothMesh.position.set(0,0,50)
 
 	scene.add(smoothMesh);
  scene.add(mesh);

  // Create ambient light and add to scene.
  var light = new THREE.AmbientLight(0x404040); // soft white light
  scene.add(light);

  // Create directional light and add to scene.
  var directionalLight = new THREE.DirectionalLight(0xffffff);
  directionalLight.position.set(1, 1, 1);
  scene.add(directionalLight);

  // Add listener for window resize.
  window.addEventListener('resize', onWindowResize, false);

	const orbit = new THREE.OrbitControls(camera, renderer.domElement);
  orbit.update();

  
  const times = [0, 3];

  const posValues = [0,0,0,100,0,0];
  const positionKF = new THREE.VectorKeyframeTrack('.position', times, posValues);

  const smoothPosValues = [0,0,50,100,0,50];
  const smoothPositionKF = new THREE.VectorKeyframeTrack('.position', times, smoothPosValues, THREE.InterpolateSmooth);

	const tracks =...