JSFiddle - React, Tailwind, and code Playground

by Akbar1909

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>

CSS

body {
	  margin: 0;
}

JavaScript

let camera, scene, renderer;

const width=window.innerWidth;
const height=window.innerHeight;

init();
animate();



function init() {
 camera = new THREE.OrthographicCamera(width / -1, width / 1, height / 1, height / -1, 1, 1000);
    camera.position.z = 1;
 
    
   
   scene=new THREE.Scene();
   
   const loader=new THREE.TextureLoader();
   
   
   const texture=loader.load('https://di9mr54a05a64.cloudfront.net/api-alpha2.expoplatform.com/image/MTY2OTg5ODU1MjYzODhhMTM4ZGRlMTg=.png', (loadedTexture)=>{
    const { width: imageWidth, height: imageHeight } = loadedTexture.image;
        const imageAspectRatio = imageWidth / imageHeight;

        // NOTE Plane ----- general

        const planeWidth = 1500; // Desired plane width
        const planeHeight = planeWidth / imageAspectRatio;
        
    geometry = new THREE.PlaneGeometry( planeWidth, planeHeight ); // ensure correct aspect ratio
    material = new THREE.MeshBasicMaterial( { map: texture } ); 
    material.depthWrite = false;
    
    mesh = new THREE.Mesh( geometry, material );
    
     mesh.updateMatrixWorld();

      mesh.geometry.computeBoundingBox();

    scene.add( mesh );
   });
   
   

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( width, height );
    document.body.appendChild( renderer.domElement );
   
  

}



function animate() {

    requestAnimationFrame( animate );
    renderer.render( scene, camera );

}