JSFiddle - React, Tailwind, and code Playground

by avnerm

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/avnermosh/example10_flipTextureOfSprite/example10_OrbitControls.js"></script>
    <body >        
        <div id="texCanvasWrapper" class="texCanvasWrapper"></div>
    </body>

JavaScript

var texCamera, texScene, texRenderer;
var texControls
var texRenderer;
var sprite1;
var axesHelper
var bbox;

var doFlipImage = false;
doFlipImage = true;

var doRunOnJsFiddle = false;
doRunOnJsFiddle = true;

if(doRunOnJsFiddle)
{
    // option1 - running from jsfiddle
    canvasInit();
    animate();
}
else
{
    // option2 - running from localhost
    $(window).load(function () {
        canvasInit();
        animate();
    });
}

function canvasInit() {
    console.log('BEG canvasInit'); 
    let left = -500;
    let right = 500;
    let top = 500;
    let bottom = -500;
    let near = -5;
    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

    let width1 = 2016/2;
    let height1 = 1512/2;
    texRenderer.setSize ( width1, height1 );

    let vec1 = new THREE.Vector2(0,0);
    texRenderer.getSize ( vec1 );
    
    setTexControls();

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

    var loader = new THREE.TextureLoader();

    if(doRunOnJsFiddle)
    {
        // option1 - running from jsfiddle
        var textureFileName = 'https://cdn.jsdelivr.net/gh/avnermosh/example10_flipTextureOfSprite/landscapeOrientation.jpg';
    }
    else
    {
        // option2 - running from localhost
        var textureFileName = 'landscapeOrientation.jpg';
    }
    
    
    loader.load(
	// resource URL
	textureFileName,

	// onLoad callback
	function ( texture ) {
            let rotationVal = 0;

            var spriteMaterial = new THREE.SpriteMaterial( { map: texture,
                                                       color: 0xffffff,
                                           ...