Displacement map causing gaps on edges of the box

Questions
, , , ,
1

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

Code:

// 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);
scene.add(box);

DisplacementMap:

Stylized_Crate_001_height
Stylized_Crate_001_height1024×1024 88.3 KB

The result:

result
result1178×1022 47 KB

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

2

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