Because you calculate surface position in a shader, the data available to JavaScript is not aware of the height. One option is to calculate shperes’ positions in the shader too.
A pure JS alternative is to:
convert 3D coordinates to texture coordinates
get the pixel color at these texture coordinates
calculate desired height based on the color
Here is a demo of this approach (for your case you have to adjust calculation of coordinates to match your sizes and colors):
I really appreciate your help. Thank you! I have been stuck on this problem for a long time, and I have tried many ways but failed to achieve it. Your explanation gives me hope again! js is really broad and profound, I have a lot to learn.
Hello, friend! I followed your example and practiced it again to understand many knowledge points. However, I still encountered some problems, that is, when I changed the texture map into black and white map, I found that not all points could be accurately positioned, as shown in the figure:
I am a little unclear now, whether it was my code that went wrong or the image data of the two pictures that affected it. This is my sample code, I hope you can inform me :
Try with the following changes in lines 130, 132 and 137 in your CodeSandbox code:
var x = Math.round(tx + 1024), // Line 130 CHANGED
y = 0,
z = Math.round(tz + 512); // Line 132 CHANGED
// get pixel color
var pixel = context.getImageData(x, z, 1, 1);
y = pixel.data[0];
ty = THREE.MathUtils.mapLinear(y, 0, 252, 50, 0); // Line 137 CHANGED
When I realized that your conversion ratio was different, I checked the sizes of the two pictures again. I was careless and didn’t realize that the sizes of the two pictures were different and the positions of the corresponding pixel data were also different
Black and white picture
Blue-white graph
Thank you very much. I am a careless and troublesome person