JSFiddle - React, Tailwind, and code Playground

by YinCognito

HTML

<!DOCTYPE html>
<html>
	<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="importmap">
      {
        "imports":
        {
          "three": "https://unpkg.com/three@0.143/build/three.module.js",
          "BufferGeometryUtils": "https://unpkg.com/three@0.143/examples/jsm/utils/BufferGeometryUtils.js",
          "ArcballControls": "https://unpkg.com/three@0.143/examples/jsm/controls/ArcballControls.js"
        }
      }
    </script>
	</head>
	<body>
    <div id="container">
    </div>
	</body>
</html>

CSS

body
{
  margin: 0;
}
canvas
{
  width: 100%;
  height: 100%
}

JavaScript

import * as THREE from "three";
import * as BufferGeometryUtils from "BufferGeometryUtils";
import {ArcballControls} from "ArcballControls";

var container = document.getElementById("container");
var renderer, scene, camera, light, amesh, controls, raycaster = new THREE.Raycaster(), clone;
var speedx = 0.01, speedy = 0.01, speedz = 0.01, paused = true, reqid, camup, mincam, maxcam, radius = 6371, scale = 99;

function render()
{
  if (controls) {controls.update();};
  renderer.render(scene, camera);
  console.log(THREE.MathUtils.radToDeg(Math.atan(2 / camera.position.distanceTo(amesh.position)) * 2), camera.fov, camera.getEffectiveFOV());
};

function create()
{
  renderer = new THREE.WebGLRenderer({antialias: true, alpha: true, logarithmicDepthBuffer: true});
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  
  camera = new THREE.PerspectiveCamera(20, window.innerWidth / window.innerHeight, 0.00001, 720000);
  camera.position.set(0, 0, 7);
  camup = new THREE.Vector3(0, 1, 0);
  
  light = new THREE.DirectionalLight("rgb(255, 255, 255)");
  light.position.copy(camera.position);
    
  var geometry = new THREE.BoxGeometry(2, 2, 2);
  var material = new THREE.MeshPhongMaterial();
  material.map = new THREE.TextureLoader().load("https://threejs.org/examples/textures/uv_grid_opengl.jpg",
                                                function(t) {render();});
  amesh = new THREE.Mesh(geometry, material);
  // amesh.position.set(0, 0, - 1);
  
  scene = new THREE.Scene();
  scene.add(camera);
  scene.add(light);
  scene.add(amesh);
  
  controls = new ArcballControls(camera, renderer.domElement, scene);
  controls._up0.copy(camup); controls._upState.copy(camup);
  controls.addEventListener("change", function(e) {render();});
  
  document.addEventListener("keyup", function(e)
  {
    switch (e.code)
    {
      case "KeyP":
        paused = !paused;
        if (!paused) {console.log("Animated");...