JSFiddle - React, Tailwind, and code Playground

by liyuanqiu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.min.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 = 2000;

  scene = new THREE.Scene();

  renderer = new THREE.WebGLRenderer();
  renderer.setClearColor( 0xffffff );
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  container.appendChild( renderer.domElement );

}

function createImage() {

  var canvas = document.createElement( 'canvas' );
  canvas.width = 256;
  canvas.height = 256;

  var context = canvas.getContext( '2d' );
  context.fillStyle = 'rgb(' + Math.floor( Math.random() * 256 ) + ',' + Math.floor( Math.random() * 256 ) + ',' + Math.floor( Math.random() * 256 ) + ')';
  context.fillRect( 0, 0, 256, 256 );

  return canvas;

}

//

function animate() {

  requestAnimationFrame( animate );

  render();

}

var width = 1000;
var height = 1100;

function render() {

  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  canvas.height = height;
  canvas.width = width;
  ctx.fillStyle = '#FFFF00';
  ctx.fillRect(0, 0, width, height);
  ctx.font = '300pt arial';
  ctx.fillStyle = '#FFFFFF';
  ctx.textAlign = 'center';
  ctx.fillText(Math.random().toFixed(2), width / 2, height / 2);

  var texture = new THREE.CanvasTexture(canvas);
  texture.needsUpdate = true;
  
  var geometry = new THREE.PlaneGeometry( width, height );
  var material = new THREE.MeshBasicMaterial({
  	map: texture,
    side: THREE.DoubleSide
  });
  var plane = new THREE.Mesh( geometry, material );
  scene.add( plane );

  renderer.render( scene, camera );

  scene.remove( plane );

  // clean up

  texture.dispose();
  geometry.dispose();
  material.dispose();

}