JSFiddle - React, Tailwind, and code Playground

Untitled Project

by Grant

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r82/three.min.js"></script>

CSS

body {
  margin: 0;
  overflow: hidden;
}

JavaScript

//FRAMEWORK START
//Temporary Use Variables
var cavnas=document.createElement("canvas")
var context=cavnas.getContext("2d")
var img=new Image()
//Image Helper Functions
//-URI to Array
function URItoArray(uri) {
  img.src = "data:image/png;base64," + uri;
  canvas.height = img.height;
  canvas.width = img.width;
  context.drawImage(img, 0, 0);
  return context.getImageData(0, 0, img.width, img.height);
}
//-Array to URI
function ArraytoURI(array) {
  canvas.height = array.height;
  canvas.width = array.width;
  context.putImageData(array, 0, 0);
  return canvas.toDataURL().slice(22);
}
//3D Funtions
//-3D setup
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var l = Math.PI / 2;
//-3D mouse setup
//--HitObjectEvent
function hitObject(x) {
  console.log(x)
}
//--MouseEvent
var raycaster = new THREE.Raycaster();
document.onmousedown = function(event) {
    var mouse = {
      x: (event.clientX / window.innerWidth) * 2 - 1,
      y: -(event.clientY / window.innerHeight) * 2 + 1,
      z: 0.5
    }
    raycaster.setFromCamera(mouse, camera);
    var intersects = raycaster.intersectObjects(scene.children);
    if (intersects.length > 0) {
      hitObject(intersects[0].object);
    }
  }
//-Keyboard Setup
activeKeys = [];
document.onkeydown = function(event) {
  activeKeys[event.keyCode] = true;
}
document.onkeyup = function(event) {
  activeKeys[event.keyCode] = false;
}
document.onfocusout = function(event) {
  console.log("hi")
  activeKeys = []
}
//-Render
gravity = 9.8;
spf = Date.now(); //Seconds per frame
var render = function() {
  setTimeout(function() {
    requestAnimationFrame(render);
  }, 30)
  var time = (Date.now() - spf) / 1000;
  spf = Date.now();


  //update location here


  //camera.position.z = chars[username].posZ + 3;
 ...