2D to 3D conversion

Hello Members,
In my project previously i used 2d Map. as per costumer requirement they want 3d map. But 3rd party provide only X and Y. In that project some Objects are static so I placed manually. But some Objects are dynamically changed the position. That object need X , Y , Z How to internally convert X Y to X Y Z

Some Static Objects Coordinates : in 2D X: 865 Y: 950
In 3d X:-54.2,Y:11.6,Z:17.5

in 2D X: 813 Y: 945
In 3d X:-54.4,Y:12.4,Z:24.1
2D Map
2D

3D Map
3D

If you have a 2D coordinate [1,2] you can convert it into a 3D coordinate by adding a 3rd value, so [1,2,3]. That’s all there is to it. It is completely up to you what the 3rd value is depending on your app.

For example, I can arbitrarily convert [30, 40] into [30, 40, 7598734].

How did you know that X: 865 Y: 950 turns into X:-54.2,Y:11.6,Z:17.5? I mean, why the object must be placed at that very position in 3D?

@prisoner849, We got 2d map with some statics objects placed in that. Then we created 3d map and same position we placed static objects. But some dynamic objects also there that change position. Like car truck

Okay, but how did you put those static objects? Just by sight with a good eye? Like “on the 2D map this traffic light locates at that crossroad, so where is that crossroad on the 3D map? Ah, there it is! So we will put the traffic light approximately next to it”.
Did you try to understand relation between 2D values and 3D values? When you understand it, it will be the way how you will be able to convert 2D to 3D “internally”.

First of all, I would find the relation between xy coordinates in 2D and xz coordinates in 3D. When you get it, you’ll solve a half of the question.
Next, to find y in 3D. I would use THREE.Raycaster() with THREE.Vector(0, -1 ,0) direction and its origin is higher than the highest point on the 3D map. But this is not the end. As you’re working with 3D, there can be such a situation, when your object should be placed under, for example, a bridge or on some level of traffic junction. Here you have to know somehow, which part of a road your object belongs to. To prevent such behaviour, when your object (let’s say a car) goes on a road which passes under a bridge, so the moment when the car jumps on the bridge then jumps from it and continues to go further on the road.
Creativity is up to you.

@prisoner849 I prevent road using navMesh. Now I managed X & Z as u said but, Y is changing every time how to fix Y axis on the road.

Do you mean that if you cast a ray from the same origin at the same direction for several times, then you’ll get different results?

I have this X Y points based on 2d map(png Image map).

 var xypoints= [{'x': -144.81417674922724,'y' : 34.22498639615816},{'x': -141.07241059744925,'y' : 32.1253657934659}];

I need a process to convert those xy points to xyz points suitable to 3d map(.obj)

Yeah, and? Did you try to write it yourself already? Or do you offer the others to write it for you?

I m trying

At least, now you have an idea.
If someone has another one and wants to share it, I’d be very grateful ))

Your explanations are always enigmatic. They generate more questions than answers.

@prisoner849, I think Z & X are working fine. The problem in Y only. If I passed correct value of a Y its working but if some minor change value came its not working for example Correct Y: 4.32157 if came Y : 4.32159 its not working. How to give rigid passive body to map and car in three.js

Could you create a live code example, as it’s very hard to understand what and how you do?

JsFiddle. Suppose that home is my map, animal is car. If I passed Y higher or less than surface line number 97. It should be attached with surface. it should not depends on user value it must be attached with surface(navMesh) or road

Thank You…!

There is no house in the fiddle.
Are you sure that the path https://objpatroljs-zzcpndkpct.now.sh/patrol.js is correct?
I’ve got a message in the console log that it was unable to load.

@prisoner849
https://jsfiddle.net/y5xxwj9c/10/

animal is on air
image

my COnsole

image

Once again: that example is not working. At least, for me.
And I have no slightest desire to run through your code there to understand how it works and compile it in my head to see what’s happening.
That code even doesn’t have appropriate comments.
And you still [don’t want / can’t / unwill] (underline whatever applicable): clearly describe the problem, provide a working live code example, tell the others about what and how works there and/or point to the lines of code where you’ve got stuck.

@prisoner849 , now I have putted in Pen. Its working me fine. If I give any values for Y. It should be on the surface not on air or below surface.

Somehow it started to work on Pen.

What lines of code respond for this?

Just in case you didn’t, know, you can post a Pen on a new line to embed it here. Like this:


The content above looks like this:

Just in case you didn't, know, you can post a Pen on a new line to embed it here. Like this:

https://codepen.io/Sandipnd31/pen/rpNGeW