动画与光线-让幻像变现实

在本节中,我们将主要使用我们的3D模型。让它看起来很漂亮!为了使您的3D模型看起来非常好,您基本上需要学习如何为其设置动画并使用场景照明。我们还将学习如何在屏幕上应用反射并放置阴影。

下载动画和照明

要学习本教程,您需要Xcode 10。您可以下载Final Xcode项目,以帮助您与自己的进度进行比较。

变换:旋转

用于演示的最常见和最简单的动画是通过Y轴旋转3D对象。你几乎到处都能看到这种动画。为此,请声明一个新函数,将其放在渲染器方法上方并将其命名为:rotateObject。应用旋转操作,您会注意到该度量采用Radian。我认为使用度数要容易得多,因此Xcode有一个内置的公式可以将Degrees转换为Radian。然后,声明一个新动作以重复循环中的最后一个动作。

func rotateObject() -> SCNAction {
    let action = SCNAction.rotateBy(x: 0, y: CGFloat(GLKMathDegreesToRadians(360)), z: 0, duration: 3)
    let repeatAction = SCNAction.repeatForever(action)
    return repeatAction
}

现在,调用iPhoneNode并使其运行旋转动作。运行模拟器,你会看到一个漂亮的旋转iPhone X.

iPhoneNode.runAction(rotateObject())

世界原点

你可能会注意到iPhone正在以一种奇怪的方式旋转。转到iPhoneX.scn并单击设备。您会注意到World Origin位于左下方,这就是为什么我们的手机在这一点上转动的原因。要解决这个问题,让我们将World Origin定位在3D模型的中间。在iPhoneNode定位后放置代码。

let min = iPhoneNode.boundingBox.min
let max = iPhoneNode.boundingBox.max
iPhoneNode.pivot = SCNMatrix4MakeTranslation(
    min.x + (max.x - min.x)/2,
    min.y + (max.y - min.y)/2,
    min.z + (max.z - min.z)/2)

在手机上运行模拟器,3D模型应该正常工作。

WorldOrigin

缩放

当您跟踪图像时,3D模型突然出现,我们可以添加更平滑的过渡,例如缩放动画。声明动画师及其用于缩放iPhoneNode的动作。

let animator = SCNAction.scale(by: 10, duration: 3)

iPhoneNode.runAction(animator)

通过这样做,您的模型将大10倍。您需要在iPhoneX.scn中更改手机缩放并将其除以10 。(0.004)您也可以将此操作声明为函数,并在每次检测到图像时调用它。

灯光

最后一步是使用灯光并应用完美的阴影。应用良好的照明真的很难,你需要玩很多。转到ViewController.swift,让我们将一些光照应用到场景中。在sceneView声明中,启用默认光照以及更新光照方法。

sceneView.autoenablesDefaultLighting = true
sceneView.automaticallyUpdatesLighting = true

在下面,配置声明,启用光估计功能。

configuration.isLightEstimationEnabled = true

镜面之后的地球

聚光灯

iPhoneX.scn中,您将看到一个聚光灯。这个场景带有一个灯光,但如果您使用自己的3D模型,则需要通过拖放对象库中的光源来自己定位。这是聚光灯的设置。

别忘了启用投射阴影!

SettingsLight

LightNode

让我们声明并搜索我们场景中的聚光灯。将新的lightNode添加到我们的planeNode。

let iPhoneLight = iPhoneScene.rootNode.childNodes.filter({ $0.name == "spot" }).first!

planeNode.addChildNode(iPhoneLight)

结论

如果您运行该应用程序,您将在您的环境中看到3D模型的精美演示。灯光和阴影产生了巨大的差异。我希望你喜欢这一节。我们学会了如何在应用良好照明的同时缩放和制作模型动画。

原文: https://designcode.io/arkit-lighting

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券