Displacement map is not working

Questions
1

Why displacement map is not working

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);
const HM = textureLoader.load('./HM/Rolling Hills Height Map.png');
const groundMat = new THREE.MeshStandardMaterial({
    displacementMap : HM,
    displacementScale : 1,
    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);















function animate() {
    requestAnimationFrame(animate);



    renderer.render(scene , camera);
}

animate();

I can see in console that my image is loading

2

The displacement map shifts vertices, and your PlaneGeometry has only four vertices — one at each corner. You’ll need to subdivide the plane with the widthSegments and heightSegments arguments in the constructor:

https://threejs.org/docs/?q=plane#api/en/geometries/PlaneGeometry

3

Thank You Very Much