Displacement map doesn't work

Questions
1

My code :



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.

2

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.