我如何像 Uber 一样在 Google 地图上添加 3d 对象作为标记
How can I add a 3d object as a marker on Google Maps like Uber does
我想添加一个 3d 标记来像 Uber 那样在地图上显示汽车的旋转,但我在 Google Maps SDK for iOS 上找不到任何关于添加 3d 对象的信息。
非常感谢任何帮助。
显然没有人看到 OP 和我看到的,所以这里是 video 优步汽车转 90 度。逐帧播放,您会发现这不是简单的图像旋转。要么优步经历了为每辆车做 ~360 度的麻烦,要么它真的是一个 3D 模型。对每辆车都做 360 度图像对我来说似乎很愚蠢。
首先,它们不是 3D 对象,如果这就是您所指的(虽然可以创建一个,但浪费时间)它们只是在 Photoshop 中创建的 3D 图像或具有 3D 透视图的 Illustrator(大部分)(它也是视网膜优化的,这就是它看起来非常清晰的原因)。
你看到汽车旋转的原因是因为 UIImageView
图像正在旋转(主要使用 CABasicAnimation
)使用 3D 设备位置的计算基础(相同运行 应用程序使用的技术来跟踪您的位置等),您可以使用 Core Location 检索该数据。
这是一个过程,但非常可行。祝你好运!
如果你想旋转你的图像作为标记。想要显示移动的物体可以使用 .git 图像。这对你很有帮助。
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
据我所知,他们没有使用 3D 对象。他们也没有在 400 张不同角度的汽车图像之间制作动画。他们正在混合旋转图像资产,并以不同角度制作约 50-70 辆汽车图像的动画。幻觉是完美的,因为它看起来确实像他们使用的 3D 汽车模型!
看看优步汽车转弯的 GIF (Dropbox link):
我们可以清楚地看到阴影和汽车的视角没有汽车旋转那样频繁地更新。
这里我叠加了两张不同角度的汽车图像,但使用的是同一张汽车图像:
我们可以看到地图旋转了 ~5 度,但汽车图像非常清晰,因为它没有改变,只是简单地旋转了。
优步 released a blog post documenting this。
看起来这些车辆是在 3D 软件中建模的,然后为该应用导出描绘不同角度的图像资产。根据车辆在地图上的位置及其航向,使用不同的资产。
谢谢所有答案都有效。
如果您愿意,可以观看视频 运行,它是如何工作的
您可以生成 sprite sheet(大约 60 个)图块
我如何实现它以及您需要的工具
3d源汽车模型。
blender,使用路径动画椭圆为相机设置动画。
相机从上到下旋转汽车
使用 blender 生成的 sprite 渲染 3d 标记,角度使用位置更新时的方位变化。
您的车辆需要渲染以支持大多数屏幕,因此每个图块的基本尺寸为 64 像素,我根据屏幕的 dpi 进行缩放
执行结果:
https://twitter.com/ronfravi/status/1133226618024022016?s=09
我相信一对标记图像,一个是真正的标记,另一个是更暗的模糊阴影可以以更便宜的方式实现这一目的。将阴影标记放在标记下方,将 X 和 Y 轴移动到您认为可以适当放置阴影的量,最后同时移动和旋转它们(在网络版本上,您可能需要单独的旋转图像)时间应该能够[重新]创造幻觉。
正如@Felix Lapalme 已经解释的那样简单,我不再深入解释它。
查看我的回购协议
我用的是dea模型,根据heading变量转
https://github.com/hilalalhakani/HHMarker
我在 Xamarin 中通过在 Web 视图中渲染 three.js 然后将图像缓冲区直接发送到标记而不是将其绘制到屏幕来实现这一点。只花了几天时间,对于我的用例来说,它是必需的,因为我希望司机能够改变汽车的颜色和种类,但如果这不是你需要的功能,你最好只使用渲染图像序列。
我想添加一个 3d 标记来像 Uber 那样在地图上显示汽车的旋转,但我在 Google Maps SDK for iOS 上找不到任何关于添加 3d 对象的信息。
非常感谢任何帮助。
显然没有人看到 OP 和我看到的,所以这里是 video 优步汽车转 90 度。逐帧播放,您会发现这不是简单的图像旋转。要么优步经历了为每辆车做 ~360 度的麻烦,要么它真的是一个 3D 模型。对每辆车都做 360 度图像对我来说似乎很愚蠢。
首先,它们不是 3D 对象,如果这就是您所指的(虽然可以创建一个,但浪费时间)它们只是在 Photoshop 中创建的 3D 图像或具有 3D 透视图的 Illustrator(大部分)(它也是视网膜优化的,这就是它看起来非常清晰的原因)。
你看到汽车旋转的原因是因为 UIImageView
图像正在旋转(主要使用 CABasicAnimation
)使用 3D 设备位置的计算基础(相同运行 应用程序使用的技术来跟踪您的位置等),您可以使用 Core Location 检索该数据。
这是一个过程,但非常可行。祝你好运!
如果你想旋转你的图像作为标记。想要显示移动的物体可以使用 .git 图像。这对你很有帮助。
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
据我所知,他们没有使用 3D 对象。他们也没有在 400 张不同角度的汽车图像之间制作动画。他们正在混合旋转图像资产,并以不同角度制作约 50-70 辆汽车图像的动画。幻觉是完美的,因为它看起来确实像他们使用的 3D 汽车模型!
看看优步汽车转弯的 GIF (Dropbox link):
我们可以清楚地看到阴影和汽车的视角没有汽车旋转那样频繁地更新。
这里我叠加了两张不同角度的汽车图像,但使用的是同一张汽车图像:
我们可以看到地图旋转了 ~5 度,但汽车图像非常清晰,因为它没有改变,只是简单地旋转了。
优步 released a blog post documenting this。
看起来这些车辆是在 3D 软件中建模的,然后为该应用导出描绘不同角度的图像资产。根据车辆在地图上的位置及其航向,使用不同的资产。
谢谢所有答案都有效。
如果您愿意,可以观看视频 运行,它是如何工作的
您可以生成 sprite sheet(大约 60 个)图块
我如何实现它以及您需要的工具
3d源汽车模型。
blender,使用路径动画椭圆为相机设置动画。
相机从上到下旋转汽车
使用 blender 生成的 sprite 渲染 3d 标记,角度使用位置更新时的方位变化。
您的车辆需要渲染以支持大多数屏幕,因此每个图块的基本尺寸为 64 像素,我根据屏幕的 dpi 进行缩放
执行结果:
https://twitter.com/ronfravi/status/1133226618024022016?s=09
我相信一对标记图像,一个是真正的标记,另一个是更暗的模糊阴影可以以更便宜的方式实现这一目的。将阴影标记放在标记下方,将 X 和 Y 轴移动到您认为可以适当放置阴影的量,最后同时移动和旋转它们(在网络版本上,您可能需要单独的旋转图像)时间应该能够[重新]创造幻觉。
正如@Felix Lapalme 已经解释的那样简单,我不再深入解释它。
查看我的回购协议 我用的是dea模型,根据heading变量转 https://github.com/hilalalhakani/HHMarker
我在 Xamarin 中通过在 Web 视图中渲染 three.js 然后将图像缓冲区直接发送到标记而不是将其绘制到屏幕来实现这一点。只花了几天时间,对于我的用例来说,它是必需的,因为我希望司机能够改变汽车的颜色和种类,但如果这不是你需要的功能,你最好只使用渲染图像序列。