# Displacement map doesn't work

**URL:** <https://discourse.threejs.org/t/displacement-map-doesnt-work/55084>\
**Category:** Questions\
**Tags:** displacement-map\
**Created:** [August 17, 2023, 3:47pm UTC](https://discourse.threejs.org/t/displacement-map-doesnt-work/55084 "2023-08-17T15:47:15Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Aman\_Raj\_Aryan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aman_raj_aryan/32/38562_2.png) [@Aman\_Raj\_Aryan](https://discourse.threejs.org/u/Aman_Raj_Aryan)\
**Post date:** [August 17, 2023, 3:47pm UTC](https://discourse.threejs.org/t/displacement-map-doesnt-work/55084/1 "2023-08-17T15:47:15Z")

</div>

My code :

```javascript

import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';

const scene = new THREE.Scene();
scene.background = new THREE.Color(0xdadada)

const camera = new THREE.PerspectiveCamera(75 , window.innerWidth/window.innerHeight, 0.1 , 1000);
camera.position.set(0 , 1 , 3);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth , window.innerHeight);
document.body.appendChild(renderer.domElement);

const orbitControls = new OrbitControls(camera , renderer.domElement)

const textureLoader = new THREE.TextureLoader();

const ambientLight = new THREE.AmbientLight();
scene.add(ambientLight);

const groundGeo = new THREE.PlaneGeometry(200 , 200 , 100 , 100);
const HM = textureLoader.load('./HM/Rolling Hills Height Map.png');

const groundMat = new THREE.MeshStandardMaterial({
    displacementMap : HM,
    displacementScale : 3,
    map : HM,
    side : THREE.DoubleSide,
})
const ground = new THREE.Mesh(groundGeo , groundMat);
ground.rotateX = -Math.PI/2;
ground.position.y = -0.01;
ground.rotation.x = -Math.PI/2;
scene.add(ground);

const groundHelper = new THREE.GridHelper(50 , 20 , new THREE.Color(0xff0000) , new THREE.Color(0x00ff00))
scene.add(groundHelper);

const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

console.log(groundGeo);

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene , camera);
}
animate();

```

Texture loads as I can see it is displaying because of

### map property
 but displacement map is not working.

---

<div class="post-metadata">

**Author:** ![Aman\_Raj\_Aryan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aman_raj_aryan/32/38562_2.png) [@Aman\_Raj\_Aryan](https://discourse.threejs.org/u/Aman_Raj_Aryan)\
**Post date:** [August 17, 2023, 4:26pm UTC](https://discourse.threejs.org/t/displacement-map-doesnt-work/55084/2 "2023-08-17T16:26:49Z")

</div>

Oh my bad!  
Displacement map was working but it wasn’t visible cause the ground had too much width and height after decreasing the width and height or increasing displacement scale to higher value like 100 I got the displacement visible to me.