JSFiddle - React, Tailwind, and code Playground

by tfoller

HTML

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

CSS

body {
  background-color: #112233;
}

JavaScript

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

import * as THREE from 'https://alikim.com/_v1_jsm/three.module.js'

import { dot, cross, norm } from 'https://alikim.com/_v1_jsm/geometry.js'

const cont = document.documentElement;
const [w, h] = [cont.clientWidth - 20, cont.clientHeight - 20];
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, w / h, 1, 1000);
camera.position.set(5, 5, 5);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(w, h);
document.body.appendChild(renderer.domElement);

const geo = new THREE.ConeGeometry(0.5, 1, 8);
const mat = new THREE.MeshLambertMaterial();
const mesh = new THREE.Mesh(geo, mat);

const dl = new THREE.DirectionalLight();
dl.position.set(10,10,0);

scene.add(new THREE.AxesHelper(10)).add(mesh).add(dl);

let a = 0, amx = Math.PI, dir = 1;

const vec = new THREE.Vector3(-0.2, 0.3, 1);

const render = () => {
  
  mesh.quaternion.setFromAxisAngle(vec, a);
  
  renderer.render(scene, camera);
  
  if(a >=0 && a <= amx) {
  	a += dir * 0.02;
  }
  else {
  	a = Math.max(0, Math.min(a, amx));
    dir *= -1;
  }
};
const state = {
  play: true
};

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

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

const animate = newtime => {

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

  if (!newtime) then = newtime = window.performance.now();

  now = newtime;
  elapsed = now - then;

  if (!fpsint || elapsed > fpsint) {

    then = now - (elapsed % fpsint);

    render();
  }
};

CONTROLS.create({
  cont: renderer.domElement,
  cam: camera,
  type: 'Orbital',
  overlay: true,
  lookAt: [0, 0, 0],
  callback: maybeRender
});

animate();