JSFiddle - React, Tailwind, and code Playground

by KramRul

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Visualizer</title>
    <style type="text/css">
      body {
        margin: 0;
        overflow: hidden;
        touch-action: none;
      }
    </style>
  </head>

  <body>
    <script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
    <script src="https://unpkg.com/three@0.85.0/examples/js/controls/OrbitControls.js"></script>
    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"
    ></script>
  </body>
</html>

JavaScript

let camera, scene, renderer;
let group = new THREE.Group();

const mouse = new THREE.Vector2();
const target = new THREE.Vector2();
const windowHalf = new THREE.Vector2(
  window.innerWidth / 2,
  window.innerHeight / 2
);

var startY;
var startX;
var speed = 0.001;
var moveScale = -0.5;
init();
animate();
var scale = 1;

var width = window.innerWidth;
var height = window.innerHeight;
var originx = 0;
var originy = 0;
var visibleWidth = width;
var visibleHeight = height;
var zoomIntensity = 0.2;
var newscale = scale;
var prevPos = 0;

function init() {
  camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    0.1,
    500
  );
  camera.position.z = 80;

  scene = new THREE.Scene();

  const geometry = new THREE.BoxBufferGeometry();
  const material = new THREE.MeshNormalMaterial();
  for (let i = 0; i < 10; i++) {
    const object = new THREE.Mesh(geometry, material);
    object.position.x = Math.random() * 50 - 40;
    object.position.y = Math.random() * 50 - 20;
    object.position.z = 0;
    object.rotation.x = Math.random() * 2 * Math.PI;
    object.rotation.y = Math.random() * 2 * Math.PI;
    object.rotation.z = 0;
    group.add(object);
  }
  scene.add(group);
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  document.addEventListener("mousemove", onMouseMove, false);
  document.addEventListener("wheel", onMouseWheel, false);
  window.addEventListener("resize", onResize, false);
}

function onMouseMove(event) {
  mouse.x = event.clientX /*- windowHalf.x*/ ;
  mouse.y = event.clientY /* - windowHalf.y*/ ;
}

function onMouseWheel(event) {
  // Get mouse offset.
  var mousex = event.clientX - renderer.domElement.offsetLeft;
  var mousey = event.clientY - renderer.domElement.offsetTop;
  mouse.x = mousex;
  mouse.y = mousey;
  var mousePosition = transformCoordToThree(mouse, camera, renderer);
 ...