Displacement map causing gaps on edges of the box

I am trying to apply displacementMap texture on a MeshStandartMaterial of a BoxGeometry.


// Geometry
const boxGeometry =new THREE.BoxGeometry( 1, 1, 1, 256, 256, 256 );

// Material
const boxMaterial = new THREE.MeshStandardMaterial({
    map: colorTexture,
    displacementMap: heightTexture,
    displacementScale: 0.1

// Mesh
const box = new THREE.Mesh(boxGeometry, boxMaterial);


The result:

How to get rid of those gaps? I tried to increase/decrease segments on a geometry and adjust the displacementScale, but nothing helped.

It’s pushing away the vertices since they aren’t connected, which however is what you want on a cube as you will get wrong normals otherwise. Displacement is only usable on very high tessellated surfaces like on terrains or for various effects, as it only pushes the vertices along the normals, not like parallax occlussion working on fragment level, so rather modelling the crate with reasonable low-poly topology makes more sense.

1 Like