# How to Add contour lines To terrain

**URL:** <https://discourse.threejs.org/t/how-to-add-contour-lines-to-terrain/58484>\
**Category:** Questions\
**Tags:** gltf-loader, loaders, camera, textures, materials, animation, geometry\
**Created:** [November 23, 2023, 10:40am UTC](https://discourse.threejs.org/t/how-to-add-contour-lines-to-terrain/58484 "2023-11-23T10:40:03Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![mohamad\_chouacha](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mohamad_chouacha/32/34568_2.png) [@mohamad\_chouacha](https://discourse.threejs.org/u/mohamad_chouacha)\
**Post date:** [November 23, 2023, 10:40am UTC](https://discourse.threejs.org/t/how-to-add-contour-lines-to-terrain/58484/1 "2023-11-23T10:40:03Z")

</div>

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

 ![Capture](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/7/27afe68593dc035de8093b647bb032059983be07.png)  
I use This code But not working :

```javascript
 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);

```

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [November 23, 2023, 11:16am UTC](https://discourse.threejs.org/t/how-to-add-contour-lines-to-terrain/58484/2 "2023-11-23T11:16:04Z")

</div>

Hi!  
I would try this way: [Anti-Aliased Grid Shader - Made by Evan](https://madebyevan.com/shaders/grid/)

---

<div class="post-metadata">

**Author:** ![mohamad\_chouacha](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mohamad_chouacha/32/34568_2.png) [@mohamad\_chouacha](https://discourse.threejs.org/u/mohamad_chouacha)\
**Post date:** [November 23, 2023, 11:42am UTC](https://discourse.threejs.org/t/how-to-add-contour-lines-to-terrain/58484/3 "2023-11-23T11:42:10Z")

</div>

I used this code :

```javascript

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; 🤔

 ![Capture](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/b/fb537a0e78a09a0443ee5af5b7242d3f932ee9e9.png)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [November 23, 2023, 11:43am UTC](https://discourse.threejs.org/t/how-to-add-contour-lines-to-terrain/58484/4 "2023-11-23T11:43:21Z")

</div>

> [@mohamad\_chouacha](#):
>
> i got this

Does it look like the desired result?

---

<div class="post-metadata">

**Author:** ![mohamad\_chouacha](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mohamad_chouacha/32/34568_2.png) [@mohamad\_chouacha](https://discourse.threejs.org/u/mohamad_chouacha)\
**Post date:** [November 23, 2023, 11:46am UTC](https://discourse.threejs.org/t/how-to-add-contour-lines-to-terrain/58484/5 "2023-11-23T11:46:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [November 23, 2023, 11:53am UTC](https://discourse.threejs.org/t/how-to-add-contour-lines-to-terrain/58484/6 "2023-11-23T11:53:20Z")

</div>

Maybe it’s worth to search the forum.  
For example: [Draw a horizontal line around object on Mouse Hover - #5 by prisoner849](https://discourse.threejs.org/t/draw-a-horizontal-line-around-object-on-mouse-hover/31766/5)  
Direct link (adapted to the latest revision): [GPU raycast - JSFiddle - Code Playground](https://jsfiddle.net/prisoner849/ag09r4pL/)

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/4/842e347ae1f8b54779a65a08a3740ea66c166d59.jpeg)

---

<div class="post-metadata">

**Author:** ![mohamad\_chouacha](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mohamad_chouacha/32/34568_2.png) [@mohamad\_chouacha](https://discourse.threejs.org/u/mohamad_chouacha)\
**Post date:** [November 23, 2023, 12:02pm UTC](https://discourse.threejs.org/t/how-to-add-contour-lines-to-terrain/58484/7 "2023-11-23T12:02:37Z")

</div>

good.  
Tank you