How to Add contour lines To terrain

Questions
, , , , , ,
1

Please how to add contour line to the terrain in threejs like this piture :

Capture
Capture863×506 186 KB

I use This code But not working :

 var widthSegments = 100;
var heightSegments = 100;
var segmentSize = 1;

var terrainGeometry = new THREE.PlaneGeometry(100,100,10,10);

terrainGeometry.vertices.forEach(function (vertex) {
  var x = vertex.x;
  var y = vertex.y;

  var amplitude = 10; // Controls the height of the terrain
  var frequency = 0.1; // Controls the frequency of the sinusoidal wave

  var height = amplitude * Math.sin(frequency * (x + y));
  vertex.z = height;
});
 var contourMaterial = new THREE.MeshBasicMaterial({ color: 'green', wireframe:true });
var mesh=new THREE.Mesh(terrainGeometry , contourMaterial)
scene.add(mesh)
terrainGeometry.verticesNeedUpdate = true;
var contourInterval = 10; // Contour interval

var contourGroup = new THREE.Group();

for (var contourHeight = contourInterval; contourHeight <= 10; contourHeight += contourInterval) {
  var contourPoints = [];

  terrainGeometry.vertices.forEach(function (vertex) {
    if (vertex.z >= contourHeight && vertex.z < contourHeight + contourInterval) {
      contourPoints.push(new THREE.Vector2(vertex.x, vertex.y));
    }
  });

  var contourSpline = new THREE.CatmullRomCurve3(contourPoints);
  var contourGeometry = new THREE.BufferGeometry().setFromPoints(contourSpline.getPoints(100));
  var contourMaterialA = new THREE.LineBasicMaterial({ color: 0xff0000 });
  var contourLine = new THREE.Line(contourGeometry, contourMaterialA);
  contourGroup.add(contourLine);
}

scene.add(contourGroup);
2

Hi!
I would try this way: Anti-Aliased Grid Shader - Made by Evan

1 Like
3

I used this code :


var widthSegments = 100;
var heightSegments = 100;
var segmentSize = 1;

var terrainGeometry = new THREE.PlaneBufferGeometry(
  widthSegments * segmentSize,
  heightSegments * segmentSize,
  widthSegments,
  heightSegments
);

var amplitude = 10; // Controls the height of the terrain
var frequency = 0.1; // Controls the frequency of the sinusoidal wave

var positions = terrainGeometry.attributes.position.array;
var vertexCount = positions.length / 3;

for (var i = 0; i < vertexCount; i++) {
  var x = positions[i * 3];
  var y = positions[i * 3 + 1];

  var height = amplitude * Math.sin(frequency * (x + y));
  positions[i * 3 + 2] = height;
}
terrainGeometry.attributes.position.needsUpdate = true;
 var materials=new THREE.MeshBasicMaterial({color:'green', wireframe:true})
var mesh=new THREE.Mesh(terrainGeometry, materials);
scene.add(mesh)
// After the terrain geometry generation

// Create a material for the contour lines
var contourMaterial = new THREE.LineBasicMaterial({ color: 'red'});

// Create an array to hold the contour lines
var contourLines = [];
var contourInterval=10;
// Iterate through the height levels for contour lines
for (var contourHeight = 10; contourHeight <= amplitude; contourHeight += 10) {
  var contourPoints = [];

  // Iterate through the vertices of the terrain geometry
  for (var i = 0; i < vertexCount; i++) {
    var x = positions[i * 3];
    var y = positions[i * 3 + 1];
    var z = positions[i * 3 + 2];

    // Check if the vertex is above the contour height
    if (Math.abs(z - contourHeight) < 0.01) {
      // Add the vertex to the contour points
      contourPoints.push(new THREE.Vector3(x, y, z));
    }
  }

  // Create a geometry for the contour line
  var contourGeometry = new THREE.BufferGeometry().setFromPoints(contourPoints);

  // Create a contour line using the geometry and material
  var contourLine = new THREE.Line(contourGeometry, contourMaterial);

  // Add the contour line to the scene
  scene.add(contourLine);

  // Store the contour line in the array
  contourLines.push(contourLine);
}

i got this; :thinking:

Capture
Capture1080×678 109 KB

4

Does it look like the desired result?

5

No its not the desired result I want to create contour lines for each height not single spline passed on the points

6

Maybe it’s worth to search the forum.
For example: Draw a horizontal line around object on Mouse Hover - #5 by prisoner849
Direct link (adapted to the latest revision): GPU raycast - JSFiddle - Code Playground

изображение
изображение854×853 132 KB

1 Like
7

good.
Tank you