Graphics Reference
In-Depth Information
Whenever a key is pressed, the
copyCanvas
function will be called.
2. Now let's look at the
copyCanvas
function:
function copyCanvas(e) {
var imgData, imgNode;
if (e.which !== 80) {
return;
} else {
imgData =
renderer.domElement.toDataURL();
}
// create a new image and add to the
document
imgNode =
document.createElement("img");
imgNode.src = imgData;
document.body.appendChild(imgNode);
}
The first thing we do here is check which key was pressed. If the
p
key was
pressed, we'll continue. Next, we take the image data from the canvas with
the
toDataURL()
function. The final step we need to take is to create a new
img
element, assign the data (
imgData
), and add it to the document.
3. This would work for non-WebGL canvas elements. However, if you work
with WebGL, we need to take one additional step. We need to instantiate
THREE.WebGLRenderer
like this:
renderer = new
THREE.WebGLRenderer({preserveDrawingBuffer:
true});
If we don't do this, you'll only see a black screen in the output and not the
actual WebGL output. Note, though, that this does have an adverse impact
on performance.
