How do I get the vertex position somewhere on the PlaneGeometry surface?

I want the little red spheres, as shown here, to be on the geographic plate, not nested inside

I found this method on the Internet, but I was confused that I was using:


The index above it has 393,216 points

How do I get x and y to find the specified index to get the vertex position?

This is my code, I hope you help me to look at, thank you!

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):

https://codepen.io/boytchev/full/JjmMVNX

image

2 Likes

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.

1 Like

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:

Some of the red ones are hanging. This is the black and white one I used:

If you switch to your blue and white picture, the red board is exactly positioned and doesn’t hang

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 :sweat_smile::

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
1 Like

Thank you for your help and guidance! After I follow your prompt, my red board is no longer hanging!

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 :sweat_smile:

image
Black and white picture

image
Blue-white graph

Thank you very much. I am a careless and troublesome person :joy: