JSFiddle - React, Tailwind, and code Playground

by intrinsica

HTML

<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/renderers/CanvasRenderer.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/renderers/Projector.js"></script>

JavaScript

var container;
var camera, scene, renderer;

init();
animate();

function init() {
    
    container = document.createElement( 'div' );
    document.body.appendChild( container );
    
    camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.z = 150;
    
    scene = new THREE.Scene();
    
    renderer = new THREE.CanvasRenderer();
    renderer.setClearColor( 0xffffff );
    renderer.setSize( window.innerWidth, window.innerHeight );
    container.appendChild( renderer.domElement );
    
}

function animate() {
    requestAnimationFrame( animate );
    render();
}

function render() {
    var geometry = new THREE.SphereGeometry( 50, Math.random() * 64, Math.random() * 32 );
    var material = new THREE.MeshBasicMaterial( { wireframe: true, color: Math.random() * 0xffffff } ); 
    var mesh = new THREE.Mesh( geometry, material );
    
    scene.add( mesh );
    renderer.render( scene, camera );
    scene.remove( mesh );
    
    // clean up
    
    geometry.dispose();
    material.dispose();
}