JSFiddle - React, Tailwind, and code Playground

by Paul West

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

import * as THREE from "https://cdn.skypack.dev/[email protected]";
import {
  OrbitControls
} from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js";
import 
  TWEEN
 from "https://cdn.skypack.dev/@tweenjs/tween.js";

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

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

let light = new THREE.DirectionalLight(0xffffff, 1);
light.position.setScalar(1);
scene.add(light, new THREE.AmbientLight(0xffffff, 0.5));

scene.add(new THREE.GridHelper());

let box = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshLambertMaterial({
  color: "aqua"
}));
scene.add(box);
console.log(box);

let finalVals = {
  position: new THREE.Vector3(),
  rotation: new THREE.Euler(),
  scale: new THREE.Vector3()
}

function setFinalVals(){
	finalVals.position.random().subScalar(0.5).multiplyScalar(10);
  finalVals.rotation.setFromVector3(new THREE.Vector3().random().subScalar(0.5).multiplyScalar(Math.PI * 4), "XYZ");
  finalVals.scale.random().multiplyScalar(0.5).addScalar(0.5).multiplyScalar(2);
}
setFinalVals();

function tweening() {
	let duration = finalVals.position.distanceTo(box.position) / 3; // 2 units a second
  let tween = new TWEEN.Tween(box).to(finalVals, duration * 1000)
  	.onUpdate( val => {
    	val.rotation.order = "XYZ"
    })
    .onComplete(() => {
     	//console.log("finished");
      setFinalVals();
      
      tweening();
      
    })
    .start();
}
tweening();


window.addEventListener("resize", onResize);

renderer.setAnimationLoop(_ => {
  TWEEN.update();
  renderer.render(scene, camera);
})

function onResize(event) {
  camera.aspect = innerWidth / innerHeight;
 ...