Skip to content

Instantly share code, notes, and snippets.

@KoltesDigital
Forked from MAKIO135/index.html
Last active August 14, 2018 21:58
Show Gist options
  • Save KoltesDigital/a7773422d1ebe01f9580595c8e107548 to your computer and use it in GitHub Desktop.
Save KoltesDigital/a7773422d1ebe01f9580595c8e107548 to your computer and use it in GitHub Desktop.
Using canvas as ThreeJS texture
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body style="background:#fff;">
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.min.js"></script>
<script id="jsbin-javascript">
var width = window.innerWidth, height = window.innerHeight / 2;
var size = 256;
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var camera, scene, renderer, geometry, texture, mesh;
function changeCanvas() {
canvas.width = 32;
canvas.height = 32;
//ctx.font = '"' + font + '" ' + fontSize + 'pt';
ctx.fillStyle = '#FF00FF';
ctx.fillRect(0, 0, 16, 16);
return canvas;
}
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);
camera.position.z = 500;
scene.add(camera);
texture = new THREE.Texture(canvas);
var material = new THREE.MeshBasicMaterial({ map: texture });
geometry = new THREE.BoxGeometry( 200, 200, 200 );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
canvas.width = canvas.height = size;
}
function animate() {
requestAnimationFrame(animate);
changeCanvas();
texture.needsUpdate = true;
mesh.rotation.y += 0.01;
renderer.render(scene, camera);
}
init();
animate();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment