# \#displacement-map

**URL:** https://discourse.threejs.org/tag/displacement-map/62.md

[Latest](https://discourse.threejs.org/latest.md) · [Categories](https://discourse.threejs.org/categories.md) · [Tags](https://discourse.threejs.org/tags.md)

---

## [Discard vertex spikes from terrain created via displacement map](https://discourse.threejs.org/t/discard-vertex-spikes-from-terrain-created-via-displacement-map/84450)

<div class="topic-metadata">

**Author:** [@3do](https://discourse.threejs.org/u/3do)\
**Replies:** 15\
**Last updated:** [June 24, 2025, 3:26pm UTC](https://discourse.threejs.org/t/discard-vertex-spikes-from-terrain-created-via-displacement-map/84450 "2025-06-24T15:26:55Z")

</div>

Hello together, currently I try to visualize a terrain from a height map Float32Array. That works so far really good. The terrain is created by extending the existing MeshStandardMaterial with custom uniforms and a Data…

---

## [How to controll minimap like games?Location and area](https://discourse.threejs.org/t/how-to-controll-minimap-like-games-location-and-area/66948)

<div class="topic-metadata">

**Author:** [@Parisa\_Shahbazi](https://discourse.threejs.org/u/Parisa_Shahbazi)\
**Replies:** 3\
**Last updated:** [June 24, 2024, 12:29am UTC](https://discourse.threejs.org/t/how-to-controll-minimap-like-games-location-and-area/66948 "2024-06-24T00:29:02Z")

</div>

Hi I added minimap from the tutorial to my software.: I use IFC files. https://docs.thatopen.com/Tutorials/Components/Core/MiniMapI need a minimap like games: I need 3 things: The current minimap has some problems …

---

## [Adding displacement map to low poly mesh](https://discourse.threejs.org/t/adding-displacement-map-to-low-poly-mesh/28718)

<div class="topic-metadata">

**Author:** [@yunusabd](https://discourse.threejs.org/u/yunusabd)\
**Replies:** 2\
**Last updated:** [March 9, 2024, 11:25am UTC](https://discourse.threejs.org/t/adding-displacement-map-to-low-poly-mesh/28718 "2024-03-09T11:25:35Z")

</div>

Hi, I’m creating a 3D map (with markers) from an SVG file and I’m trying to add a displacement map for elevation. However, given the low number of vertices on the surface, the displacement isn’t working correctly. …

---

## [Displacement map causing gaps on edges of the box](https://discourse.threejs.org/t/displacement-map-causing-gaps-on-edges-of-the-box/59977)

<div class="topic-metadata">

**Author:** [@prusama](https://discourse.threejs.org/u/prusama)\
**Replies:** 1\
**Last updated:** [January 5, 2024, 9:05pm UTC](https://discourse.threejs.org/t/displacement-map-causing-gaps-on-edges-of-the-box/59977 "2024-01-05T21:05:14Z")

</div>

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.…

---

## [How Do I Add Displacement Maps to Node Materials?](https://discourse.threejs.org/t/how-do-i-add-displacement-maps-to-node-materials/58845)

<div class="topic-metadata">

**Author:** [@phil\_crowther](https://discourse.threejs.org/u/phil_crowther)\
**Replies:** 12\
**Last updated:** [December 5, 2023, 7:00pm UTC](https://discourse.threejs.org/t/how-do-i-add-displacement-maps-to-node-materials/58845 "2023-12-05T19:00:06Z")

</div>

I am converting my materials to node materials, which generally involves replacing modifiers with node modifiers. For example, a material like this: material = new THREE.MeshPhysicalMaterial({ color: 0x0000ff, metaln…

---

## [Picto3d - a website that transforms images into a 3D model](https://discourse.threejs.org/t/picto3d-a-website-that-transforms-images-into-a-3d-model/30488)

<div class="topic-metadata">

**Author:** [@H44AF](https://discourse.threejs.org/u/H44AF)\
**Replies:** 12\
**Last updated:** [October 18, 2023, 8:22pm UTC](https://discourse.threejs.org/t/picto3d-a-website-that-transforms-images-into-a-3d-model/30488 "2023-10-18T20:22:15Z")

</div>

It generates a depth map from an image and uses it as a displacement map to create a 3D model. This model can be downloaded in stl format with generated depth map and normal map.

---

## [Load SVG and displacement Map generate disconnected edges](https://discourse.threejs.org/t/load-svg-and-displacement-map-generate-disconnected-edges/51660)

<div class="topic-metadata">

**Author:** [@Arnaud\_Coutant](https://discourse.threejs.org/u/Arnaud_Coutant)\
**Replies:** 2\
**Last updated:** [September 8, 2023, 12:01pm UTC](https://discourse.threejs.org/t/load-svg-and-displacement-map-generate-disconnected-edges/51660 "2023-09-08T12:01:32Z")

</div>

Dear Community, When I apply a displacement map on a mesh generated with load SVG I get my vertices disconnected. Is there a way to avoid a such behavior ? Texture map: UVTexture: Result: Original:

---

## [Displacement map doesn't work](https://discourse.threejs.org/t/displacement-map-doesnt-work/55084)

<div class="topic-metadata">

**Author:** [@Aman\_Raj\_Aryan](https://discourse.threejs.org/u/Aman_Raj_Aryan)\
**Replies:** 1\
**Last updated:** [August 17, 2023, 4:26pm UTC](https://discourse.threejs.org/t/displacement-map-doesnt-work/55084 "2023-08-17T16:26:49Z")

</div>

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 TH…

---

## [Displacement map is not working](https://discourse.threejs.org/t/displacement-map-is-not-working/55077)

<div class="topic-metadata">

**Author:** [@Aman\_Raj\_Aryan](https://discourse.threejs.org/u/Aman_Raj_Aryan)\
**Replies:** 2\
**Last updated:** [August 17, 2023, 1:03pm UTC](https://discourse.threejs.org/t/displacement-map-is-not-working/55077 "2023-08-17T13:03:06Z")

</div>

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.Col…

---

## [Regarding Displacement Maps: Does Three.js do Vector Displacement?](https://discourse.threejs.org/t/regarding-displacement-maps-does-three-js-do-vector-displacement/52463)

<div class="topic-metadata">

**Author:** [@phil\_crowther](https://discourse.threejs.org/u/phil_crowther)\
**Replies:** 12\
**Last updated:** [June 19, 2023, 7:07am UTC](https://discourse.threejs.org/t/regarding-displacement-maps-does-three-js-do-vector-displacement/52463 "2023-06-19T07:07:12Z")

</div>

Three.js materials can handle grayscale displacement maps by moving the geometry vertices vertically. But where a three.js material is give a multi-colored displacement map, does three.js displace the geometry vertices …

---

## [Wrong scale of displacement map](https://discourse.threejs.org/t/wrong-scale-of-displacement-map/52099)

<div class="topic-metadata">

**Author:** [@OlegPershun](https://discourse.threejs.org/u/OlegPershun)\
**Replies:** 2\
**Last updated:** [May 28, 2023, 3:05pm UTC](https://discourse.threejs.org/t/wrong-scale-of-displacement-map/52099 "2023-05-28T15:05:50Z")

</div>

Hi there, i\`m trying to create terrain with height map file. But when i apply gayscale image as displacement-map i get wrong scaling terrain. I’m not an expert in 3D graphics so I can’t write my own vertex shader. I foun…

---

## [Displaying the Contents of FrameBuffers](https://discourse.threejs.org/t/displaying-the-contents-of-framebuffers/49605)

<div class="topic-metadata">

**Author:** [@phil\_crowther](https://discourse.threejs.org/u/phil_crowther)\
**Replies:** 2\
**Last updated:** [March 26, 2023, 9:35pm UTC](https://discourse.threejs.org/t/displaying-the-contents-of-framebuffers/49605 "2023-03-26T21:35:00Z")

</div>

I have been deconstructing an ocean wave generator that uses framebuffers to store interim calculations. The last two items the program creates are a displacement map and some version of a normal map. It used those maps…

---

## [Using a displacementMap to modify the (top) face of a cube](https://discourse.threejs.org/t/using-a-displacementmap-to-modify-the-top-face-of-a-cube/47418)

<div class="topic-metadata">

**Author:** [@nivkemai](https://discourse.threejs.org/u/nivkemai)\
**Replies:** 7\
**Last updated:** [January 30, 2023, 6:09am UTC](https://discourse.threejs.org/t/using-a-displacementmap-to-modify-the-top-face-of-a-cube/47418 "2023-01-30T06:09:54Z")

</div>

Hello, I’m probably going about this all wrong, but was hoping I’m at least somewhat on the right path. Context: I’m building something which will try to scan the height of an (IRL) object using a machine which has the …

---

## [Finalizing displaced vertices using displacement map](https://discourse.threejs.org/t/finalizing-displaced-vertices-using-displacement-map/45547)

<div class="topic-metadata">

**Author:** [@bugsbun1](https://discourse.threejs.org/u/bugsbun1)\
**Replies:** 1\
**Last updated:** [December 22, 2022, 7:48am UTC](https://discourse.threejs.org/t/finalizing-displaced-vertices-using-displacement-map/45547 "2022-12-22T07:48:47Z")

</div>

I am trying to finalize the position of the vertices that are displaced by the displacement map. When I finalize the position , there are holes in the geometry. I am doing this by displacing the vertices along the(normal…

---

## [Displacement map creates gaps on the edges of a mesh](https://discourse.threejs.org/t/displacement-map-creates-gaps-on-the-edges-of-a-mesh/44458)

<div class="topic-metadata">

**Author:** [@Tom\_Schmitz](https://discourse.threejs.org/u/Tom_Schmitz)\
**Replies:** 4\
**Last updated:** [November 11, 2022, 8:22am UTC](https://discourse.threejs.org/t/displacement-map-creates-gaps-on-the-edges-of-a-mesh/44458 "2022-11-11T08:22:15Z")

</div>

Hello, I have a question about the use of displacement maps. When applying a displacement map to my model it leaves gaps at the edges. I already tried the displacementBias option but that isn’t really the desired solu…

---

## [Getting accurate BufferGeometry position attributes after displacementMap applied to MeshStandardMaterial](https://discourse.threejs.org/t/getting-accurate-buffergeometry-position-attributes-after-displacementmap-applied-to-meshstandardmaterial/32928)

<div class="topic-metadata">

**Author:** [@JamT](https://discourse.threejs.org/u/JamT)\
**Replies:** 1\
**Last updated:** [December 24, 2021, 2:16pm UTC](https://discourse.threejs.org/t/getting-accurate-buffergeometry-position-attributes-after-displacementmap-applied-to-meshstandardmaterial/32928 "2021-12-24T14:16:50Z")

</div>

Hi all. I’m applying a displacementMap to a material which is applied to a glb model of type BufferGeometry. I’d like to add other objects to the vertices positions of the model, but I can only seem to get pre-displaced …

---

## [Cannot replicate MeshPhongMaterial's new displacementMap-based self shadowing using custom ShaderMaterial (with ShaderLib.phong)](https://discourse.threejs.org/t/cannot-replicate-meshphongmaterials-new-displacementmap-based-self-shadowing-using-custom-shadermaterial-with-shaderlib-phong/32027)

<div class="topic-metadata">

**Author:** [@molzer](https://discourse.threejs.org/u/molzer)\
**Replies:** 6\
**Last updated:** [November 29, 2021, 11:27am UTC](https://discourse.threejs.org/t/cannot-replicate-meshphongmaterials-new-displacementmap-based-self-shadowing-using-custom-shadermaterial-with-shaderlib-phong/32027 "2021-11-29T11:27:23Z")

</div>

I’ve spent almost days on this one already … so I kindly ask for your help! Since r132, it seems to be possible to have self-shadowing in geometry that has a displacementMap applied (see DisplacementMap with Shadow - Th…

---

## [Get custom displacementMap (RGB encoded) to work with shadows in r132](https://discourse.threejs.org/t/get-custom-displacementmap-rgb-encoded-to-work-with-shadows-in-r132/32162)

<div class="topic-metadata">

**Author:** [@molzer](https://discourse.threejs.org/u/molzer)\
**Replies:** 0\
**Last updated:** [November 27, 2021, 9:38pm UTC](https://discourse.threejs.org/t/get-custom-displacementmap-rgb-encoded-to-work-with-shadows-in-r132/32162 "2021-11-27T21:38:52Z")

</div>

I need to make a follow-up related to the previous posts regarding a custom displacement map. Self-shadowing via customDepthMaterial stopped working in Three r132 Cannot replicate MeshPhongMaterial's new displacementMa…

---

## [Displacement map creates gaps in my 3d models](https://discourse.threejs.org/t/displacement-map-creates-gaps-in-my-3d-models/28425)

<div class="topic-metadata">

**Author:** [@LarsvdV](https://discourse.threejs.org/u/LarsvdV)\
**Replies:** 1\
**Last updated:** [July 29, 2021, 8:27am UTC](https://discourse.threejs.org/t/displacement-map-creates-gaps-in-my-3d-models/28425 "2021-07-29T08:27:12Z")

</div>

Hello, I’m having a problem when using a displacement map on my 3d models. The model consists of multiple meshes like the back, sides, underside and front. The displacement map pushes these meshes away from each other w…

---

## [gLTF and displacement map](https://discourse.threejs.org/t/gltf-and-displacement-map/18967)

<div class="topic-metadata">

**Author:** [@RichardBao](https://discourse.threejs.org/u/RichardBao)\
**Replies:** 8\
**Last updated:** [September 24, 2020, 7:39am UTC](https://discourse.threejs.org/t/gltf-and-displacement-map/18967 "2020-09-24T07:39:07Z")

</div>

from the blender gLTF document, it seems the gLTF did not support displacement map, but for some texture, a displacement map would make it more realistic. is there any workaround for this? besides, i did not find an…

---

## [Compensate bump map artifacts from customized shader](https://discourse.threejs.org/t/compensate-bump-map-artifacts-from-customized-shader/17475)

<div class="topic-metadata">

**Author:** [@molzer](https://discourse.threejs.org/u/molzer)\
**Replies:** 2\
**Last updated:** [July 29, 2020, 3:50pm UTC](https://discourse.threejs.org/t/compensate-bump-map-artifacts-from-customized-shader/17475 "2020-07-29T15:50:45Z")

</div>

I replaced three’s internal phong shader “bumpmap\_pars\_fragment” with custom bump mapping where I create a bump map out of an RGB encoded height map which looks like this: To get a height value per pixel, the R channe…

---

## [Alternative to displacementMap just using values or data](https://discourse.threejs.org/t/alternative-to-displacementmap-just-using-values-or-data/16309)

<div class="topic-metadata">

**Author:** [@fuzzy\_wobble](https://discourse.threejs.org/u/fuzzy_wobble)\
**Replies:** 1\
**Last updated:** [June 17, 2020, 12:58pm UTC](https://discourse.threejs.org/t/alternative-to-displacementmap-just-using-values-or-data/16309 "2020-06-17T12:58:57Z")

</div>

I’m currently using a canvas displacementMap to deform a texture this.displacement\_map = new THREE.Texture( MYDEPTH.canvas ); this.plane\_material = new THREE.MeshPhongMaterial( { map:this.video\_texture, displacement…

---

## [How to make earth surface 3D map like this picture](https://discourse.threejs.org/t/how-to-make-earth-surface-3d-map-like-this-picture/15380)

<div class="topic-metadata">

**Author:** [@Pathompongmc](https://discourse.threejs.org/u/Pathompongmc)\
**Replies:** 2\
**Last updated:** [May 20, 2020, 8:05am UTC](https://discourse.threejs.org/t/how-to-make-earth-surface-3d-map-like-this-picture/15380 "2020-05-20T08:05:47Z")

</div>

How to make earth surface 3D map like this picture. Image From ScratchyCAD

---

## [Creating a displacement map from an image](https://discourse.threejs.org/t/creating-a-displacement-map-from-an-image/14458)

<div class="topic-metadata">

**Author:** [@reggie101](https://discourse.threejs.org/u/reggie101)\
**Replies:** 1\
**Last updated:** [April 21, 2020, 4:47pm UTC](https://discourse.threejs.org/t/creating-a-displacement-map-from-an-image/14458 "2020-04-21T16:47:41Z")

</div>

I am trying to use mapbox’s terrain api to generate a terrain mesh. I read some articles that mentioned that they use a plane buffer geometry with a displacement map. So given such an image, to get the height of the terr…

---

## [Using an animated gif as a displacement map - shaders](https://discourse.threejs.org/t/using-an-animated-gif-as-a-displacement-map-shaders/907)

<div class="topic-metadata">

**Author:** [@deSolidState](https://discourse.threejs.org/u/deSolidState)\
**Replies:** 12\
**Last updated:** [February 18, 2020, 2:05am UTC](https://discourse.threejs.org/t/using-an-animated-gif-as-a-displacement-map-shaders/907 "2020-02-18T02:05:43Z")

</div>

So I found a cool example - http://meetar.github.io/threejs-shader-demos/llama.html - that uses a gif as a displacement map. However, it uses THREE.js r58. I found out because it has the line geometry.computeTangents(); …

---

## [ShaderLib normalmap is no longer available](https://discourse.threejs.org/t/shaderlib-normalmap-is-no-longer-available/11780)

<div class="topic-metadata">

**Author:** [@three\_d\_art](https://discourse.threejs.org/u/three_d_art)\
**Replies:** 6\
**Last updated:** [December 30, 2019, 8:17pm UTC](https://discourse.threejs.org/t/shaderlib-normalmap-is-no-longer-available/11780 "2019-12-30T20:17:21Z")

</div>

There is an old example (threejs r58) of a threejs page that I am trying to recreate with a newer version of threejs (r112) r58 demo http://meetar.github.io/three.js-displacement-map/three.js-displacement-gui.html Thi…

---

## [Material displacement map makes the texture unwrap the model's surfaces](https://discourse.threejs.org/t/material-displacement-map-makes-the-texture-unwrap-the-models-surfaces/5119)

<div class="topic-metadata">

**Author:** [@brothereye](https://discourse.threejs.org/u/brothereye)\
**Replies:** 10\
**Last updated:** [November 2, 2019, 4:19pm UTC](https://discourse.threejs.org/t/material-displacement-map-makes-the-texture-unwrap-the-models-surfaces/5119 "2019-11-02T16:19:39Z")

</div>

I have a cube fbx model with MeshPhongMaterial and textures with 3 maps: color, displacement and normal 16bit. At first I used the displacement map loaded from .tif file, the texture wrapped but no bump on the model’s su…

---

## [MeshPhongMaterial displacementMap / normalMap](https://discourse.threejs.org/t/meshphongmaterial-displacementmap-normalmap/8989)

<div class="topic-metadata">

**Author:** [@kuxazoso](https://discourse.threejs.org/u/kuxazoso)\
**Replies:** 5\
**Last updated:** [August 13, 2019, 1:52am UTC](https://discourse.threejs.org/t/meshphongmaterial-displacementmap-normalmap/8989 "2019-08-13T01:52:12Z")

</div>

Hello. I’m trying to use PlaneBufferGeometry to create terrain chunks by altering vertex positions using a height map. I’d like to do this in the shader so that my scene only needs one geometry for all chunks instead of …

---

## [Displacement map for terrain shading problem](https://discourse.threejs.org/t/displacement-map-for-terrain-shading-problem/6077)

<div class="topic-metadata">

**Author:** [@DolphinIQ](https://discourse.threejs.org/u/DolphinIQ)\
**Replies:** 2\
**Last updated:** [February 12, 2019, 12:34pm UTC](https://discourse.threejs.org/t/displacement-map-for-terrain-shading-problem/6077 "2019-02-12T12:34:50Z")

</div>

Hello I tried using displacementMap in a mesh with planeBufferGeometry and meshStandardMaterial. The height is proper and when using wireframe mode I can see all vertices moved up correctly. However the shading looks as…

---

## [How to add spaced and raised bumps to a geometry?](https://discourse.threejs.org/t/how-to-add-spaced-and-raised-bumps-to-a-geometry/5749)

<div class="topic-metadata">

**Author:** [@Tintinabulator\_Zea](https://discourse.threejs.org/u/Tintinabulator_Zea)\
**Replies:** 9\
**Last updated:** [January 19, 2019, 7:24pm UTC](https://discourse.threejs.org/t/how-to-add-spaced-and-raised-bumps-to-a-geometry/5749 "2019-01-19T19:24:26Z")

</div>

Hi there! i’m trying to add raised bumps to a geometries vertices like in the picture above, Does anyone know what kind of math formula could do this? I know earlier we figured out how to add spirals and waves by usi…

[Next page](https://discourse.threejs.org/tag/displacement-map/62.md?match_all_tags=true&page=1&tags%5B%5D=displacement-map)