Issue loading heightmap from image

[ehd19777]

Hello.. First of all let me congratulate you on such a cool terrain generator.. I apologize if my question is too basic, but I am kind of new with three.js.
I am using your terrain generator to build a terrain around a screen so I need a 'static' terrain so it doesn't get in the way of the screen. I am trying to use a heightmap image to load the same terrain always but it is not working for me, nothing shows up.. With all the other dynamic heightmap options (diamondSquare, etc) it does work, but when I try to use an image it simply doesn't show anything. I am sure it must be some small detail that I am not doing correctly.. I am using an image I got from the demo. Also I am using r75. Here is my code for creating a terrain:

`
var materialTest = new THREE.MeshLambertMaterial( {color: 0x21b531} );

	var heightmapImage = new Image();

	heightmapImage.src = 'assets/img/map.png';

        var xS = 63, yS = 63;

	var terrainSettings = {
	    easing: THREE.Terrain.Linear,
	    heightmap: heightmapImage,
	    material: materialTest,
	    maxHeight: 300,
	    minHeight: -1,
	    steps: 1,
	    useBufferGeometry: false,
	    xSegments: xS,
	    xSize: 1024,
	    ySegments: yS,
	    ySize: 1024,
	};
	var terrainScene = THREE.Terrain(terrainSettings);
	scene.add(terrainScene);`

If you could please check it out and let me know what is it taht i am doing wrong I would greatly appreciate it.. Thanks in advance..

[vladgaidukov]

@ehd19777 look at this example, you need create THREE.Terrain in onload heightmap callback

        var heightmapImage = new Image();
            heightmapImage.src = 'heightmap.png';
            heightmapImage.onload = function () { 

                THREE.ImageUtils.loadTexture('sand1.jpg', undefined, function (t1) {  
                    THREE.ImageUtils.loadTexture('grass1.jpg', undefined, function (t2) { 
                        THREE.ImageUtils.loadTexture('stone1.jpg', undefined, function (t3) { 
                            THREE.ImageUtils.loadTexture('snow1.jpg', undefined, function (t4) { 
                                var material = THREE.Terrain.generateBlendedMaterial([
                                    {texture: t1},
                                    {texture: t2, levels: [-80, -35, 20, 50]},
                                    {texture: t3, levels: [20, 50, 60, 85]},
                                    {texture: t4, glsl: '1.0 - smoothstep(65.0 + smoothstep(-256.0, 256.0, vPosition.x) * 10.0, 80.0, vPosition.z)'},
                                    {texture: t3, glsl: 'slope > 0.7853981633974483 ? 0.2 : 1.0 - smoothstep(0.47123889803846897, 0.7853981633974483, slope) + 0.2'}, 
                                ]);

                                var terrainScene = THREE.Terrain({
                                    heightmap: heightmapImage,
                                    material: material,
                                    maxHeight: 100,
                                    minHeight: -100,
                                    xSegments: 63,
                                    xSize: 1024,
                                    ySegments: 63,
                                    ySize: 1024
                                });
                                scene.add(terrainScene);
                                terrainScene.children[0].castShadow = true;
                                terrainScene.children[0].receiveShadow = true;
                            });
                        });
                    });
                });
            };

[ehd19777]

@vladgaidukov Awesome that did the trick.. Thank you very much for your help.. Greatly appreciated.. Cheers mate..

[IceCreamYou]

Nice, thanks @vladgaidukov for helping!

@ehd19777 glad you're enjoying the library 😀