Toturial

A ThreeJS toturial

HTML

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

JavaScript

// instantiate a Scene
var scene = new THREE.Scene();

// instantiate a Camera
var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(2500, 2500, 2500);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);

// instantiate a Renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// axis helper
var axisHelper = new THREE.AxisHelper(500);
scene.add(axisHelper);

// set animate
animate(renderer);
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

// test
let width = 1024;
let height = 1024;
// Be careful, your browser will crash soon if you enable the two lines below.
//width = 1000;
//height = 1100;
let s = null;

setInterval(function () {

	if (s !== null) {
  	s.material.dispose();
    s.material.map.dispose();
  	scene.remove(s);
  }
	
	console.warn( 'Dummy warning' );
  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 );
  s = plane;

/*
  var material = new THREE.SpriteMaterial({
    map: texture
  });
  var sprite = new THREE.Sprite(material);
  sprite.scale.set(canvas.width, canvas.height, 1);
  scene.add(sprite);  
  s = sprite;
*/
}, 10);