JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(5, 8, 13);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x404040);
document.body.appendChild(renderer.domElement);

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

scene.add(new THREE.GridHelper(20, 20, 0x808080, 0x808080));

var boxGeom = new THREE.BoxGeometry(5, 5, 5, 10, 10, 10);
boxGeom.translate(-7.5, 2.5, 0);
boxGeom.colors = boxGeom.vertices.map(v => {return new THREE.Color("aqua")});
console.log(boxGeom.vertices.length);
var sphereGeom = new THREE.SphereGeometry(2.5, 20, 31);
sphereGeom.translate(7.5, 2.5, 0);
console.log(sphereGeom.vertices.length);
var coneGeom = new THREE.ConeGeometry(2.5, 5, 20, 30, false);
coneGeom.translate(0, 2.5, 0);
console.log(coneGeom.vertices.length);

var morphs = [];
var morphIndex = 0;

var geom = boxGeom;

function createMorph(geomStart, geomEnd, speed, colorStart, colorEnd){

	let duration = 0;
  let tempDist = new THREE.Vector3(); 
  let vertices = [];
  let longestDist = 0;
  
  vertices = geomStart.vertices.map(
  	(v, i) => {
    	
      let nv = v.clone();
      
      tempDist.copy(geomEnd.vertices[i]).sub(nv);
      let dist = tempDist.length();
      longestDist = Math.max(dist, longestDist);
      let dir = new THREE.Vector3().copy(tempDist).normalize();
      
      nv.dir = dir;
      nv.dist = dist;
      return nv;
      
    }
  );
  
  duration = longestDist / speed;
  
	morphs.push(
  	{
    	speed: speed,
      duration: duration,
      vertices: vertices,
      colorStart: colorStart,
      colorEnd: colorEnd
    }
  );
}

createMorph(boxGeom, coneGeom, 8, new THREE.Color(0x00ffff), new THREE.Color(0xffff00));
createMorph(coneGeom, sphereGeom, 5, new THREE.Color(0xffff00), new THREE.Color(0xff00ff));
createMorph(sphereGeom, boxGeom, 10, new...