JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

//three.js r.62

var mesh, renderer, scene, camera, controls;
var t = 0, ambientFactor, canvas, textureImage;
let cylinders = [];
init();
animate();

function init() {

	// info
	info = document.createElement( 'div' );
	info.style.position = 'absolute';
	info.style.top = '30px';
	info.style.width = '100%';
	info.style.textAlign = 'center';
	info.style.color = '#fff';
	info.style.fontWeight = 'bold';
	info.style.backgroundColor = 'transparent';
	info.style.zIndex = '1';
	info.style.fontFamily = 'Monospace';
	info.innerHTML = 'Drag mouse to rotate camera; scroll to zoom';
	document.body.appendChild( info );


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

	// scene
	scene = new THREE.Scene();
	
	// camera
	camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
	camera.position.set( 20, 20, 20 );

	// controls
	controls = new THREE.OrbitControls( camera, renderer.domElement );
	controls.minDistance = 10;
	controls.maxDistance = 50;

	// axes
	scene.add( new THREE.AxisHelper( 20 ) );

	// geometry
	var geometry = new THREE.CylinderGeometry( 10, 10, 100, 16, true );

	// image
	var texture = new THREE.Texture( generateTexture() );
	textureImage = texture.image

	// material texture
	var texture = new THREE.Texture( generateTexture() );
	texture.needsUpdate = true; // important!

	// material
    var material = new THREE.MeshBasicMaterial( { map: texture, transparent: true } );
	
	// mesh
	mesh = new THREE.Mesh( geometry, material );
  cylinders.push(mesh);
	scene.add( mesh );
	console.log(mesh)
}

let lastFrame = 0;
function animate(timestamp) {

	requestAnimationFrame( animate );

	controls.update();

	renderer.render( scene, camera );
  cylinders.forEach(cylinder=>{
  	/* cylinder.material.texture.map = new THREE.Texture(...