How to work with displacement Map

How to work with displacement Map? :face_with_raised_eyebrow:

let material = new THREE.MeshStandardMaterial();
            let displacementMap = new THREE.TextureLoader().load(
            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)

Picture - displacement


WTF ?? :+1:

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?

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