JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

CSS

body {
	  margin: 0;
}

JavaScript

var texCamera, texScene, texRenderer;
var texControls
var texRenderer;
var planeMesh;
var axisHelper
var bbox;

var doLimitPan = false;
doLimitPan = true;

canvasInit();
animate();

function canvasInit() {

    let left = -50;
    let right = 50;
    let top = 50;
    let bottom = -50;
    let near = -500;
    let far = 100000;
    
    texCamera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);


    texScene = new THREE.Scene();

    texRenderer = new THREE.WebGLRenderer({
        preserveDrawingBuffer: true,
        alpha: true});
    
    texRenderer.domElement.id = 'canvasTex';
    texRenderer.setPixelRatio(window.devicePixelRatio);
		texRenderer.setSize( window.innerWidth, window.innerHeight );
    texRenderer.setClearColor(0XDBDBDB, 1); //Webgl canvas background color

    setTexControls();

    document.body.appendChild(texRenderer.domElement);

    let rotationVal = 0;
    // let rotationVal = (-Math.PI / 2);

    var material = new THREE.SpriteMaterial( { 
                                               color: 0xffffff,
                                               rotation: rotationVal,
                                               fog: true } );
    planeMesh = new THREE.Sprite( material );
    planeMesh.position.x = planeMesh.position.y = planeMesh.position.z = 0;
    planeMesh.scale.x = 100
    planeMesh.scale.y = 100;
    // planeMesh.scale.x = 200
    // planeMesh.scale.y = 200;
    planeMesh.name = "planeMesh";

    
    //Add the mesh to the scene
    texControls.reset();

    // bbox is fixed because the object does not change its coordinates
    bbox = new THREE.Box3().setFromObject(planeMesh);

    texScene.add(planeMesh);
    texCamera.position.set( 0, 0, 80 );
    texCamera.updateProjectionMatrix();

    axisHelper = new THREE.AxisHelper(500);
    axisHelper.position.set(0, 0, 1);
    axisHelper.material.linewidth = 20;
    texScene.add(axisHelper);
   
    render();
}

function render() {
    
    let x1 =...