JSFiddle - React, Tailwind, and code Playground

by tfoller

HTML

<link type="text/css" rel="stylesheet" href="https://alikim.com/_v1_jsm/css/controls.css">

JavaScript

import * as CONTROLS from 'https://alikim.com/_v1_jsm/controls.js'

import * as THREE from 'https://unpkg.com/three/build/three.module.js'

import * as MathUtils from 'https://unpkg.com/three/src/math/MathUtils.js'

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);


const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const hlp = new THREE.AxesHelper(3);

const sphere = new THREE.Mesh(
new THREE.SphereGeometry(0.2, 16, 16),
new THREE.MeshBasicMaterial({color:0x800080}),
);

const sphere1 = sphere.clone();
const sphere2 = sphere.clone();
const sphere3 = sphere.clone();

scene.background = new THREE.Color(0x002200);
scene.add(hlp).add(sphere).add(sphere1).add(sphere2).add(sphere3);

camera.position.set(5, 3, 5);
camera.lookAt(0, 0, 0);

const duration = 3000;
const idur = 1 / duration;

let t0 = performance.now();

const tick = (ease, now) => {
  const dif = now - t0;
  // quadratic filter
  const s = dif ? Math.min(1, dif * idur) : 0;
  const f = dif ? Math.min(1, -ease * s * s + (1 + ease) * s) : 0;
  return f;
};

const v1 = new THREE.Vector3(0, 0, 3);
const v2 = new THREE.Vector3(0, 1, 3);
const smoothstep = now => { 
	const dif = now - t0;
  const t = dif * idur;
	return new THREE.Vector3().lerpVectors(v1, v2, MathUtils.smoothstep(t, 0, 1));
};

const render = (f0, f1, f2, v) => {
  sphere.position.set(0, 2 * f0, 0);
  sphere1.position.set(0, 2 * f1, 1);
  sphere2.position.set(0, 2 * f2, 2);
  sphere3.position.set(v.x, 2 * v.y, v.z);
  renderer.render(scene, camera);
};

const state = {
  play: true
};

const maybeRender = () => {
  if (!state.play) render()
};

const framerate = 100;
const fpsint = 1000 / framerate;
let elapsed, now, then;

let tid = 0;
const animate = newtime => {

  if (!state.play) return;
  requestAnimationFrame(animate);

  if (!newtime) then = newtime =...