Graphics Reference
In-Depth Information
How to do it...
To create a heightmap-based geometry, you need to perform these steps:
1. Before we look at the required Three.js code, we first need to load the image
and set some properties that determine the final size and height of the geo-
metry. This can be done by adding the following code snippet and loading
the image by setting the
img.src
property to the location of our height map.
Once the image is loaded, the
img.onload
function will be called, where we
convert the image data to
THREE.Geometry
:
var depth = 512;
var width = 512;
var spacingX = 3;
var spacingZ = 3;
var heightOffset = 2;
var canvas =
document.createElement('canvas');
canvas.width = 512;
canvas.height = 512;
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = "../assets/other/
grandcanyon.png";
img.onload = function () {...}
