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/[email protected]/build/three.module.js",
          "BufferGeometryUtils": "https://unpkg.com/[email protected]/examples/jsm/utils/BufferGeometryUtils.js",
          "ArcballControls": "https://unpkg.com/[email protected]/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, mesh0, controls;
var speedy = 0, paused = false, reqid, camup;

function create()
{
  renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  
  camera = new THREE.PerspectiveCamera(17, window.innerWidth / window.innerHeight, 0.1, 100);
  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.SphereGeometry(1, 360, 180);
  var material = new THREE.MeshPhongMaterial();
  material.map = new THREE.TextureLoader().load("https://threejs.org/examples/textures/uv_grid_opengl.jpg");
  mesh0 = new THREE.Mesh(geometry, material);
  
  scene = new THREE.Scene();
  scene.add(camera);
  scene.add(light);
  scene.add(mesh0);

  renderer.render(scene, camera);
  
  controls = new ArcballControls(camera, renderer.domElement, scene);
  controls._up0.copy(camup); controls._upState.copy(camup);
  controls.addEventListener("change", function(e) {renderer.render(scene, camera); console.log(camera.position);});
  
  document.addEventListener("keyup", function(e)
  {
    switch (e.code)
    {
      case "KeyP":
        paused = !paused;
        if (!paused) {console.log("Animated"); animate();} else {console.log("Paused"); stagnate();};
      break;
      case "KeyM":
        camera.position.set(0.007458207360992682, 0.9695669569290823, 0.38698120798624336);
        // controls.update();
        renderer.render(scene, camera);
      break;
    };
  });
};

function animate()
{
  if (paused) {return;};
  reqid = requestAnimationFrame(animate);
  mesh0.rotation.y += speedy;
 ...