Help width widthSegments, heightSegments, and Height Map size on PlaneGeometry

Questions
,
1

Hi all,

I am in the process of building a Plane that has segments that I am changing their vertice height based on a height map.

Everything is technically working but my results do not represent exactly what I have in my change map.

NOTE: The height map image is a grayscale 100x100 PNG.

I would love if someone could help understand what line segments I should be using and based off that, what the size of my heightmap should be.

Here is the basic code below…

var planeSize = 100;

//init
function init() {

    generatePlane();

}

function generatePlane() {

    var container = $('#change-map');

    var scene = new THREE.Scene();

    var camera = new THREE.PerspectiveCamera( 50, container.width()/container.height(), 0.1, 8000 );

    camera.name = "Camera";

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( container.width(), container.height() );
    container.append( renderer.domElement );

    var img = new Image();

    img.onload = function () {
        
        textureLoaded();
       
    };

    img.src = "img/height-map-100.png";

    function textureLoaded() {
        var data = getHeightData(img, 1);
        

        var geometry = new THREE.PlaneGeometry( planeSize, planeSize, planeSize * .5, planeSize * .5 );
        var material = new THREE.MeshBasicMaterial( { wireframe: true } );
        var plane = new THREE.Mesh( geometry, material );

        for ( var i = 0; i<plane.geometry.vertices.length; i++ ) {
            plane.geometry.vertices[i].z = data[i] * .1;
        //; 3
        }
        plane.name = "Plane";

        scene.add( plane );
      

    }
  
    scene.add( camera );

    camera.position.z = planeSize * 1.5;

    var animate = function () {
        requestAnimationFrame( animate );

        renderer.render(scene, camera);
    };

    animate();

}

function getHeightData(img,scale) {
  
 if (scale == undefined) scale=1;
  
    var canvas = document.createElement( 'canvas' );
    canvas.width = img.width;
    canvas.height = img.height;
    var context = canvas.getContext( '2d' );
 
    var size = img.width * img.height;
    var data = new Float32Array( size );
 
    context.drawImage(img,0,0);
 
    for ( var i = 0; i < size; i ++ ) {
        data[i] = 0
    }
 
    var imgd = context.getImageData(0, 0, img.width, img.height);
    var pix = imgd.data;
 
    var j=0;
    for (var i = 0; i<pix.length; i +=4) {
        var all = pix[i]+pix[i+1]+pix[i+2];
        data[j++] = all/(12*scale);
    }
     
    return data;
}
2

Think I may of figured it out… The line segments needs to be planeSize - 1 and the height map needs to be the same size as the planeSize, so 100x100.

If anyone can verify or clarify or dispute this, please do so :slight_smile: