Graphics Reference
In-Depth Information
2. Once the image is loaded in the onload function, we need the value of each
pixel and convert it to THREE.Vector3 :
// draw on canvas
ctx.drawImage(img, 0, 0);
var pixel = ctx.getImageData(0, 0,
width, depth);
var geom = new THREE.Geometry();
var output = [];
for (var x = 0; x < depth; x++) {
for (var z = 0; z < width; z++) {
// get pixel
// since we're grayscale, we only
need one element
// each pixel contains four values
RGB and opacity
var yValue = pixel.data[z * 4 +
(depth * x * 4)] / heightOffset;
var vertex = new THREE.Vector3(x *
spacingX, yValue, z * spacingZ);
geom.vertices.push(vertex);
}
}
As you can see in this code snippet, we process each of the image pixels,
and based on the pixel value, we create THREE.Vector3 , which we add to
the vertices array of our custom geometry.
3. Now that we've defined the vertices, the next step is to use these vertices to
create faces:
// we create a rectangle between four
vertices, and we do
// that as two triangles.
for (var z = 0; z < depth - 1; z++) {
for (var x = 0; x < width - 1; x++) {
// we need to point to the position
in the array
Search WWH ::




Custom Search