Updating Terrain Geometry with Three.js

Question

I'm experimenting with Bjørn Sandvik's really great process for importing terrain data into a scene.

Check it out:

http://blog.thematicmapping.org/2013/10/terrain-building-with-threejs.html

  var terrainLoader = new THREE.TerrainLoader();
terrainLoader.load('../assets/jotunheimen.bin', function(data) {

    var geometry = new THREE.PlaneGeometry(60, 60, 199, 199);

    for (var i = 0, l = geometry.vertices.length; i < l; i++) {
        geometry.vertices[i].z = data[i] / 65535 * 10;
    }

    var material = new THREE.MeshPhongMaterial({
        color: 0xdddddd, 
        wireframe: true
    });

    var plane = new THREE.Mesh(geometry, material);
    scene.add(plane);

});

My intent is to use this to display elevation data from a time series, so multiple .bin files will be loaded to provide data representing a period of several years to show change over time.

I am having difficulties updating the geometry with new data. I think that my difficulties stem from the plane and geometry variables being defined inside of a function, meaning that they are undefined in the global context. So later when I call those variables they don't have any value associated with them.

Does anyone have an idea of how I can update this geometry with new data loaded using the TerrainLoader?

Answer 1

anything you .add() to the scene object is visible as an element of the scene.children array -- to you can still reference your plane and the geometry of it as plane.geometry -- the the plane is the only object in the scene, it will probably be scene.children[0].geometry

See this page: https://github.com/mrdoob/three.js/wiki/Updates for hints on how to let THREE know the geometry is changing