JSFiddle - React, Tailwind, and code Playground

by jscastro76

HTML

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

CSS

body {
	  margin: 0;
}

JavaScript

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

    init();
    animate();

    function init() {

        camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
        camera.position.z = 1;

        scene = new THREE.Scene();
        scene.background = new THREE.Color( 0xffffff );

        var loader = new THREE.TextureLoader();
        var texture = loader.load( 'https://i.imgur.com/lrE7DLJ.jpg' );



        geometry = new THREE.PlaneGeometry();
        material = new THREE.MeshBasicMaterial( { map: texture  } );

        mesh = new THREE.Mesh( geometry, material );

        var obj3D = new THREE.Object3D()
        obj3D.add(mesh)
        scene.add( obj3D );

        renderer = new THREE.WebGLRenderer(  );
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

    }

    function animate() {

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

    }