JSFiddle - React, Tailwind, and code Playground

by avnerm

HTML

<script src="https://cdn.jsdelivr.net/gh/avnermosh/meshlabjs_avnerV1@master/js/include/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/avnermosh/meshlabjs_avnerV1@master/js/include/jquery-ui-1.12.1/external/jquery/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/gh/avnermosh/meshlabjs_avnerV1/sandbox/OrbitControls_example3.js"></script>
<body >        
    <div id="texCanvasWrapper" class="texCanvasWrapper"></div>
</body>

CSS

.texCanvasWrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    /* object-fit: contain; */
    /* overflow: "auto" */
}

JavaScript

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

var texCameraType = "OrthographicCamera";
// texCameraType = "PerspectiveCamera";

var doLimitPan = false;
// doLimitPan = true;

canvasInit();
animate();

function canvasInit() {

    console.log('BEG canvasInit');

    if(texCameraType == "OrthographicCamera")
    {
        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);
    }
    else
    {
        let w0 = $("#texCanvasWrapper").width();
        let h0 = $("#texCanvasWrapper").height();
        console.log('w0', w0);
        console.log('h0', h0); 

        let cameraFrustumAspectRatio = w0 / h0;
        let cameraFrustumNearPlane = 0.1;
        let cameraFrustumFarPlane = 100000;
        let fov = 60;
        texCamera = new THREE.PerspectiveCamera(fov, cameraFrustumAspectRatio, cameraFrustumNearPlane, cameraFrustumFarPlane);
    }


    texScene = new THREE.Scene();

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

    setTexControls();

    $("#texCanvasWrapper").append(texRenderer.domElement);

    var spriteMap = new THREE.TextureLoader().load( 'https://cdn.jsdelivr.net/gh/avnermosh/meshlabjs_avnerV1@master/js/examples/textures/land_ocean_ice_cloud_2048.jpg' );

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

    var material = new THREE.SpriteMaterial( { map: spriteMap,
                                               color: 0xffffff,
                                               rotation: rotationVal,
                                               fog: true } );
   ...