Creating a mesh based on a height map in Three.js revision 70

An example of creating a mesh based on a height map taken from a loaded up 16bit color file in Three.js rev. 70.
var gt = THREE.ImageUtils.loadTexture( "images/desert_texture.png" ); // load the texture
var mapHeight = THREE.ImageUtils.loadTexture( "images/desert_texture_bw_16bit.png" ); // load the file from which the height data will be taken
			
    			mapHeight.anisotropy = 4;
    			mapHeight.repeat.set( 0.998, 0.998 );
    			mapHeight.offset.set( 0.005, 0.005 )
    			mapHeight.wrapS = mapHeight.wrapT = THREE.RepeatWrapping;
    			mapHeight.format = THREE.RGBFormat;
			
var gg = new THREE.PlaneGeometry( 6000, 3000, 100, 100 ); // create a three.js plane mesh				
var gm = new THREE.MeshPhongMaterial( { color: 0xffffff, map: gt, specular: 0x333333, shininess: 5, bumpMap: mapHeight, bumpScale: 0.85, metal: 

false } ); // set the material for the mesh

			var ground = new THREE.Mesh( gg, gm ); // create thre mesh
				ground.rotation.x = - Math.PI / 2;
				ground.material.map.repeat.set( 8, 8 );
				ground.material.map.wrapS = ground.material.map.wrapT = THREE.RepeatWrapping;
				ground.receiveShadow = true;
				
				ground.position.y = -1490;

			scene.add( ground );

Responses

0 Replies