How to work with displacement Map

Hello.
How to work with displacement Map? :face_with_raised_eyebrow:

let material = new THREE.MeshStandardMaterial();
            let displacementMap = new THREE.TextureLoader().load(
                'files/pic1631848910320dfd7bb1e133021ebd9579c31b6bee.jpg'
            )
            material.displacementMap = displacementMap;

            let geo = new THREE.BoxBufferGeometry(2, 2, 2);
            if(typeof geo.attributes['uv'] !== 'undefined') {
                geo.addAttribute('uv2', new THREE.BufferAttribute(geo.attributes.uv.array, 2));
            }

            let plane = new THREE.Mesh(geo, material)
            scene.add(plane)

Picture - displacement

Result

WTF ?? :+1:

Hi!
Displacement map works per vertex. The more vertices on a surface you have, the more detailed displacement you’ll get. :thinking:

1 Like

This texture looks like it’s probably meant to be used as a .bumpMap, not a .displacementMap. Bump maps don’t displace geometry, but do create a more textured lighting effect.

1 Like

Do I need more polygons?

Yes.
But, but as @donmccurdy mentioned, your displacement map looks more like a bump map.