Texture Leak

Texture Leak

by liyuanqiu

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>
<script src="//139.196.28.110/OrbitControls.js"></script>

JavaScript

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

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

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

// 4. (optional) instantiate a Controls
var orbit = new THREE.OrbitControls(camera, renderer.domElement);

// 5. add some lights
var light1 = new THREE.PointLight( 0xffffff, 1, 0 );
light1.position.set( 500, 500, 500 );
scene.add( light1 );
var lightHelper1 = new THREE.PointLightHelper( light1 );
scene.add( lightHelper1 );

var light2 = new THREE.PointLight( 0xffffff, 1, 0 );
light2.position.set( -500, -500, -500 );
scene.add( light2 );
var lightHelper2 = new THREE.PointLightHelper( light2 );
scene.add( lightHelper2 );

var t = texture('hahahaha', 0xff0000);
var material = new THREE.SpriteMaterial({
  map: t,
  color: 0xffffff,
  fog: true
});
var sprite = new THREE.Sprite(material);
var s = 60;
sprite.applyMatrix(new THREE.Matrix4().set(t.image.width / t.image.height * s, 0, 0, 0, 0, s, 0, 0, 0, 0, s, 0, 0, 0, 0, s));
scene.add( sprite );

setInterval(function () {
	
}, 1000);

// 7. set animate
animate(renderer);
function animate() {
	var t = texture('haha' + Math.random(), 0xffffff);
  //material.map.dispose();
  material.map = t;
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

function texture(text, color) {

  var font = 'Arial';
  var size = 150;

  font = "normal " + size + "px " + font;

  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');

  context.font = font;

  canvas.width = 1024;
  canvas.height = 512;

  context.font = font;

  context.fillStyle = "rgba(0, 0, 0, 0)";
  context.fillRect(0, 0, canvas.width, canvas.height);

  var c = color.toString(16);
  context.fillStyle =...