JSFiddle - React, Tailwind, and code Playground

by cyber cyber

CSS

</style> 
<script type="text/javascript" src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script>

JavaScript

window.onload = init;

var scene, camera, render, loader, cube_texture, cube_geometry;


function init() {

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

    

    
    
////////////////////////////////////////////////
    cube_geometry = new THREE.CubeGeometry(300,300,300,30,30,30);
    cube_texture = new THREE.Texture();
    loader = new THREE.ImageLoader();
    
        loader.addEventListener( 'load', function (event) {
        
            cube_texture.image = event.content;
            cube_texture.needsUpdate = true;
        
         });
        
    loader.load();

    
    var cube_material = new THREE.MeshBasicMaterial({map: cube_texture, overdrop: true});
/////////////////////////////////////////////////


    var cube = new THREE.Mesh(cube_geometry, cube_material);
    scene.add(cube);
    
    

    render = new THREE.WebGLRenderer();
    render.setSize(window.innerWidth, window.innerHeight);


    var container = document.createElement('div');
    container.appendChild(render.domElement);
    document.body.appendChild(container);
    

   
     animation();
     function animation() {
     requestAnimationFrame(animation);
     cube.rotation.y += 180/Math.PI * 0.0001;
     render.render(scene,camera);
   }
    
 
   
}