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 bbox;

var doLimitPan = false;
doLimitPan = true;

// $(window).load(function () {
//     canvasInit();
//     animate();
// });

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.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 } );
    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";
	  console.log('planeMesh', planeMesh);
	  console.log('planeMesh.material.map.needsUpdate before', planeMesh.material.map.needsUpdate);
    planeMesh.material.map.needsUpdate = true;
	  console.log('planeMesh.material.map.needsUpdate after', planeMesh.material.map.needsUpdate);
    
    //Add the mesh to the scene
  ...