Browse Source

use non square example

Gregg Tavares 5 years ago
parent
commit
068e1bb97a

+ 3 - 3
threejs/lessons/threejs-custom-geometry.md

@@ -322,16 +322,16 @@ terrain mesh.
 A heightmap based terrain is where you have a 2D array of heights
 that you apply them to a grid. An easy way to get a 2D array of heights
 is to draw them in an image editing program. Here's an image I drew.
-It's 64x64 pixels
+It's 96x64 pixels
 
-<div class="threejs_center"><img src="../resources/images/heightmap-64x64.png" style="width: 512px; image-rendering: pixelated;"></div>
+<div class="threejs_center"><img src="../resources/images/heightmap-96x64.png" style="width: 512px; image-rendering: pixelated;"></div>
 
 We'll load that and then generate a heightmap mesh from it.
 We can use the `ImageLoader` to load the image.
 
 ```js
 const imgLoader = new THREE.ImageLoader();
-imgLoader.load('resources/images/heightmap-64x64.png', createHeightmap);
+imgLoader.load('resources/images/heightmap-96x64.png', createHeightmap);
 
 function createHeightmap(image) {
   // extract the data from the image by drawing it to a canvas

BIN
threejs/resources/images/heightmap-96x64.png


+ 1 - 1
threejs/threejs-custom-geometry-heightmap.html

@@ -52,7 +52,7 @@ function main() {
   addLight(1, 2, -2);
 
   const imgLoader = new THREE.ImageLoader();
-  imgLoader.load('resources/images/heightmap-64x64.png', createHeightmap);
+  imgLoader.load('resources/images/heightmap-96x64.png', createHeightmap);
 
   function createHeightmap(image) {
     // extract the data from the image by drawing it to a canvas