Mis-matched coordinate systems - 3d scatter plot superimposed over 3d surface

Hi everyone,

I am currently trying to produce a scatter plot that sits on top of a 3D surface using three js. The scatter plot data represents control points which should rest perfectly on my 3D surface since the surface data is interpolated from these control points. Unfortunately, when I plot the control points, they do not seem to use the same coordinate system as the 3d surface. This is what it looks like:

The surface is on an xyz grid with origin at (0,0,0). The black points are the control points.

I can easily achieve the correct plots using Python’s matplotlib:

And similarly with matlab:

Any help that you can offer in reproducing this with three js would be greatly appreciated. Thanks!

Without seeing your code, it will be very hard to provide meaningful help. Consider to share a editable live example or a github repository that demonstrates this issue…

1 Like

Thank you for the reply. I have uploaded the code to a github repo here.

It seems there is a lot of stuff missing in your repository. You need to share it in a way so it’s possible to run it locally.

Hi Mugen87,
Thanks so much for replying and for your willingness to check this out.
I have posted a working fiddle at https://jsfiddle.net/willgoldring/Lya6mnfs/25/

Please let me know if anything is unclear. The basic issue is that the control points (x,y,z) of the
interpolated surface seem to be skewed and do not lie on the surface as displayed.


We were able to solve the problem by transposing both data sets. The new plot looks very nice:

Thanks again for your reply.


@nickgoldring @willgoldring Thanks for posting the solution as well. I’m trying to create a similar plot but unable to generate the right interpolated z values data. Can you please help me with that? Or let me know how do I generate the interpolated z values array in JavaScript using those x_vals, y_vals and z_vals? Thanks.