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() {
    console.log('BEG 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 loader = new THREE.TextureLoader();

    loader.load(
	// resource URL
	'https://cdn.jsdelivr.net/gh/avnermosh/meshlabjs_avnerV1@master/js/examples/textures/landscapeOrientation.jpg',

	// onLoad callback
	function ( texture ) {
            let rotationVal = 0;
            // let rotationVal = (-Math.PI / 2);

            var material = new THREE.SpriteMaterial( { map: texture,
                                                       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.material.map.needsUpdate before', planeMesh.material.map.needsUpdate);
          ...