Graphics Reference
In-Depth Information
1. The first thing we need to do is create the canvas element:
var canvas =
document.createElement('canvas');
canvas.width=512;
canvas.height=512;
Here, we create an HTML canvas element programmatically and define a
fixed width.
2. Now that we've got a canvas, we need to render the clock that we use as the
input for this recipe on it. The library is very easy to use; all you have to do is
pass in the canvas element we just created:
clock(canvas);
3. At this point, we've got a canvas that renders and updates an image of a
clock. What we need to do now is create a geometry and a material and use
this canvas element as a texture for this material:
var cubeGeometry = new
THREE.BoxGeometry(10, 10, 10);
var cubeMaterial = new
THREE.MeshLambertMaterial();
cubeMaterial.map = new
THREE.Texture(canvas);
var cube = new THREE.Mesh(cubeGeometry,
cubeMaterial);
To create a texture from a canvas element, all we need to do is create a new
instance of THREE.Texture and pass in the canvas element we created
in step 1. We assign this texture to the cubeMaterial.map property, and
that's it.
4. If you run the recipe at this step, you might see the clock rendered on the
sides of the cubes. However, the clock won't update itself. We need to tell
Three.js that the canvas element has been changed. We do this by adding
the following to the rendering loop:
Search WWH ::




Custom Search