JSFiddle - React, Tailwind, and code Playground

by grano

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script>

JavaScript

var camera, scene, renderer, geometry, material, mesh;

var loader = new THREE.TextureLoader();
loader.crossOrigin = true;

init();
animate();
var texture;
function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(1, window.innerWidth / window.innerHeight, 0.1, 10000);
    camera.position.z = 500;
    scene.add(camera);

		geometry = new THREE.PlaneBufferGeometry(2, 1);
//geometry = new THREE.PlaneGeometry(1, 1);

//geometry.faceVertexUvs[ 0 ][ 0 ][ 0 ].set( 0.5, 1.0 );
//geometry.faceVertexUvs[ 0 ][ 0 ][ 1 ].set( 0.0, 0.5 );
//geometry.faceVertexUvs[ 0 ][ 0 ][ 2 ].set( 1.0, 0.5 );
//geometry.faceVertexUvs[ 0 ][ 1 ][ 0 ].set( 0.0, 0.5 );
//geometry.faceVertexUvs[ 0 ][ 1 ][ 1 ].set( 0.5, 0.0 );
//geometry.faceVertexUvs[ 0 ][ 1 ][ 2 ].set( 1.0, 0.5 );  

geometry.attributes.uv.setXY( 0, 0.5, 1.0 )
geometry.attributes.uv.setXY( 1, 1.0, 1.0 )
geometry.attributes.uv.setXY( 2, 0.5, 0)
geometry.attributes.uv.setXY( 3, 1, 0.0 )
	
    texture = loader.load("https://i.imgur.com/t6kizy8g.png")
//    texture.minFilter = THREE.NearestFilter;
//		texture.magFilter = THREE.NearestFilter;

    material = new THREE.MeshBasicMaterial({map: texture});
    mesh = new THREE.Mesh(geometry, material);
    
    // draw edges
    var geo = new THREE.WireframeGeometry( mesh.geometry );
		var mat = new THREE.LineBasicMaterial( { color: 0x00FF00, linewidth: 1 } );
		var wireframe = new THREE.LineSegments( geo, mat );
		mesh.add( wireframe );

    scene.add(mesh);

    renderer = new THREE.WebGLRenderer({
        alpha: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

}

function animate() {

    requestAnimationFrame(animate);
    render();

}

function render() {


    renderer.render(scene, camera);

}