Unable to add heightmap to view

Questions
,
1

Hi,

I’m trying to use an image that I created with a Diamond-square algorithm to display a map using the shades of gray as altitude

Using tutorials I managed to do this, but I just get a black square. No error in the console, the map image exists.

I admit I’m not sure where to look here.

I thought what I was trying to do was really basic, so I don’t know what is missing

thanks for your help

2

First issue… Your plane is one single quad.
You need to pass an additional 2 params to the PlaneGeometry constructor to subdivide it. like new PlaneGeometry(WIDTH,HEIGHT, 100,100)

Second issue.. you’re setting the material.color = 0xFFFFFF
Integer values like that don’t work.. it’s showing black. try:
color:‘white’ or ‘black’, “orange” or ‘#FFFFFF’
( edit: I was wrong here.. its showing black because there are no lights in the scene. :smiley: Switching to .emissive instead of .color fixes it. )

Third issue: Your image loading is being blocked by CORS (errors in console) since it’s an external resource. You’ll need to add that asset to JSFiddle somehow.

(imo jsfiddle basically sucks. You can fork a fiddle but it’s time limited? You can’t easily upload resources? I click “login” and it takes me to an empty fiddle instead of the one I’m looking at?
really not great. I wish glitch.io was still around.
If I were you, I’d just develop this locally, and then host it on github pages.)

Here’s a working zip of your thing:

hetasser.zip (146.7 KB)

3

hi,

thanks for your answer

I fixed the color to “#FFFFFF” and the geometry side to

new THREE.PlaneGeometry(WIDTH,HEIGHT,512,512);

I can’t find how to locally load my image to jsfidle, however I don’t see any CORS error in FF console logs

note : if you prefer the actual code I’m using it’s

https://utils.mh.raistlin.fr/ds/heightmap.html

https://utils.mh.raistlin.fr/ds/heightmap.js

and the image for the heightmap is

4

FireFox is also not a great browser for threejs dev imo. I would use chrome to get things working, then get it working in FF.
I’m not just hating on it.. I just know that there are issues that can occur in FF that don’t in chrome, so using chrome as a baseline or at least testing in 2 browsers can save a lot of headaches.

Make sure hardware accel is enabled in both browsers as well.

I also didn’t see any way to import your image into jsfiddle. hence.. why it kinda sucks, humbly, imo.

2 Likes
5

thanks

if you want to check the real website (it’s exactly the same code, but at least the image is local), I’ve edited my post above yours

Just checked with chrome and hardware graphic acceleration is enabled, but no change

6

Here it is hosted on github pages: https://manthrax.github.io/hetasser/

Here is the repo:

7

I added a "renderer.setClearColor(‘red’) to your page and it IS working… just showing flat because displacementScale isn’t high enough:

image
image1920×1453 325 KB

In my version I also added a resize handler, and increased displacementScale.

8

wow this works great, thanks

I will try to analyses the differences between your code and mine. I see you have added controls and a resize function, am I missing something else ?

9

using
emissive: ‘white’

instead of color

since color is affected by lighting and there are no lights in your scene.

emissive: emits the pure color regardless of light.

I also increased displacementScale.

I also added some styling to body, and the container to make sure they size with the window, and clip overflow so we don’t get scrollbars. just stylistic choices..

1 Like
10

hi, sorry for the delay

thanks for your help, It works now on my server too

didn’t think of adding a light source, now I just have to add some textures and it will start looking nice

thanks again

1 Like