How can I add a 3d object as a marker on Google Maps like Uber does

淺唱寂寞╮ 提交于 2021-02-17 11:47:38

问题


I want to add a 3d marker for showing cars on map with rotation like Uber does but I can't find any information on adding 3d objects on Google Maps SDK for iOS.

Would appreciate any help.

Apparently no one is seeing what OP and I are seeing so here's a video of a Uber car turning 90 degrees. Play it frame by frame and you'll notice that it's not a simple image rotation. Either Uber went through the trouble of doing ~360 angles of each vehicles, or it really is a 3D model. Doing 360 images of every car seems foolish to me.


回答1:


Uber just released a blog post documenting this.

It looks like the vehicles were modeled in 3D software and then image assets depicting different angles were exported for the app. Depending on where the vehicle is on the map and its heading then a different asset is used.




回答2:


From what I can tell, they are not using 3D objects. They are also not animating between 400 images of a car at a different angle. They're doing a mix of rotating image assets and animating between ~50-70 images of a car at different angles. The illusion is perfect because it really does look like they used 3D car models !

Look at this GIF of a Uber car turning a corner (Dropbox link):

We can clearly see that that the shadow and the car's view angle doesn't update as often as the car's rotation.

Here I overlaid 2 images of the car at different angles, but using the same car image:

We can see that the map is rotated ~5 degrees but the car image is perfectly clear because it hasn't changed, it was simply rotated.




回答3:


First, they are NOT 3D Objects if that's what you referring to (It's possible to create one though, but waste of time) They are simply 3D image created in Photoshop or Illustrator (Mostly) that have 3D perspective (It's also retina optimized, that's why it looks very clear).

The reason you see that the car is rotated its because the UIImageView that the image is being held into is rotated (using CABasicAnimation mostly) using calculation base off of 3D device position (Same technology use for running apps to track your location etc), which you can use Core Location to retrieve that data.

It's a proccess, but very doable. Good Luck!




回答4:


Thanks All answers are valid.

if you want you can see the video running, how it works

You can generate sprite sheet ( around 60 ) tiles

How i implement it and tools you need

  • 3d source car model.

  • blender, animate camera using path animation elipse.

  • camera rotate around of car from top to bottom view

  • render 3d marker using sprite generated with blender, for angles use bearing change on location updates.

Your vehicle needs to be rendered to support most screens, so the base size for each tile was 64 px and I was scaling according to the dpi of the screens

Result implementation:

https://twitter.com/ronfravi/status/1133226618024022016?s=09enter image description here




回答5:


I believe a pair of marker images, one is the real marker, and another one is a darker blurry shadow can do the trick in a cheaper way. Putting the shadow marker beneath the marker, shifting X & Y axis to an amount where you feel the shadow would be put appropriately, and finally moving them as well as rotating them (on web version, you may need separate rotated images) at the same time should be able to [re]create the illusion.

As @Felix Lapalme already explained it beyond any easier, am not diving any deeper into explaning it.




回答6:


check out my repo I used a dea model and turned it according to the heading variable https://github.com/hilalalhakani/HHMarker




回答7:


If you want to Rotated your image as the marker. Want to show a moving object you can use .git image. It would be help full for you.

Swift 3

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)

//Rotate a marker
let degrees = 90.0
let london = GMSMarker(position: position)
london.title = "London"

//Customize the marker image
london.icon = UIImage(named: "YourGifImageName")
london.groundAnchor = CGPoint(x: 0.5, y: 0.5)
london.rotation = degrees
london.map = mapView

For more info Please check here



来源:https://stackoverflow.com/questions/40974830/how-can-i-add-a-3d-object-as-a-marker-on-google-maps-like-uber-does

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!