SceneKit 场景编辑器-为您的AR体验构建3D舞台

为了能够在应用程序中添加3D模型，我们需要一个3D渲染器框架。在本节中，我们将了解SceneKit的场景编辑器。这是一个很好的空间，可以帮助您可视化3D模型，编辑它，播放动画，模拟物理等。

下载

要学习本教程，您需要Xcode 10或更高版本，以及从简介到ARKit的最终Xcode项目。您可以下载本节的最终Xcode项目，以帮助您与自己的进度进行比较。

文件夹art.scnassets

在左侧的Project Navigator中，art.scnassets是存储3D模型，纹理，动画等的文件夹。您可以将文件夹命名为您想要的任何名称，但这是它在Xcode的ARKit模板中的标签，它是一个非常好的标准。名称本身就是解释性的。如果展开文件夹，请注意此处存储了飞船场景。

文件夹Assets.xcassets

另一方面，Assets.xcassets是您保存所有其他资产（如图像和图标）的地方。

场景编辑器

要访问场景编辑器，您需要打开.scn文件。所以选择ship.scn文件。这对你来说很熟悉吗？这是正确的，它是您在手机上看到的预览船。应用程序加载时调用此场景。

SceneKit％20Scene％20Editor

视口(VIEWPORT)

包含飞船的中间部分是视口。在此空间中，您将能够从不同角度查看3D模型并对您的修改进行流式处理。您可以通过单击并用一根手指拖动来更改视角。要在保持相同角度的同时调整视图，请用两根手指滚动。您可以通过捏住触控板或选项+向上和向下滚动鼠标来放大设计。

操纵器

如果选择模型，现在可以看到操纵器。您可以使用它来旋转或移动模型。箭头表示坐标系。绿色箭头是Y轴，红色是X轴，蓝色箭头代表Z轴。移动它们以直观地重新定位模型。它们之间的弧度是一次用一个轴旋转对象。

视口控件

视口下方是视口控件。在这个栏上，我们可以改变到不同的视角。我经常将它设置为前面，因为这是在屏幕上添加模型时的起始角度。如果场景附带动画，您可以通过单击“ 播放”按钮进行预览。

场景图视图

打开场景时，通常会隐藏场景图视图。要显示它，请单击视口下方左下方的小窗口图标，在控件旁边。在这里，您可以看到组成场景的所有部分。这些对象是几何，灯光，相机等节点。节点与没有大小，没有形状也没有颜色空间中的位置，直到我们将它们分配给它。稍后我们将详细介绍节点。你也可以在这里找到动画，物理和粒子系统，如火和水。

检查器

右侧面板是Inspectors，它分为多个标签：

• 文件检查器：您可以更改文件名和文件格式。
• 快速帮助检查器：您可以搜索文档。
• 节点检查器：您可以应用转换，可见性或添加动画。
• 属性检查器：您可以更改几何设置。
• 材质检查器：您可以更改颜色并应用纹理。
• 物理检查器：您可以将物理学应用于3D模型。
• 场景检查器：您可以更改背景以及物理世界。

在本课程中，我们将主要关注这3个检查器：Node Inspector，Attributes Inspector和Materials Inspector。

变换

让我们从Node Inspector开始。节点变换涉及位置，旋转和缩放。

位置

位置是您放置模型的位置。它由3D坐标组成：x，y和z。当所有坐标的初始位置设置为0时，它是应用程序加载时设备相机的起始位置。建议首先或靠近它设置该位置，这样您就可以确保在开始时在您面前看到您的模型，而不是远处的某个位置。

欧拉角

欧拉角度使您能够以俯仰，滚转和偏航旋转模型。对于我们来说，我们宁愿要使用的方向在X，Y和Z轴。

Euler Angles

缩放

Scale允许我们调整模型的大小。

边界框

边界框是您的资产的尺寸，以米为单位。

材质

让我们切换到Material Inspector。材质赋予模型物理外观，无论是颜色，照明还是纹理。没有材料，网格只是一个赤裸裸的骨架。

我们将介绍最常用的材料属性，并将地球用作简单参考。

漫反射

漫反射是包裹物体的皮肤。它可以是颜色或图像。它也是整个表面上光线的直接反射。我们也将漫反射贴图称为纹理。例如，飞船的漫反射图像设置为texture.png。您可以在飞船场景下查看该图像。

2k地球日图

弥漫之前和之后

至于地球，这里以默认的白色球体开始，我们在它上面应用这个地球地图。塔达，这就是我们所知道的！

地球在扩散之后

镜面

Specular描述从光源反射出来的光线，类似于镜子上的反射。如果提供了高光贴图，则对象会在有白色的部分上发光。

2k地球镜面地图

高光之前和之后

此图像显示使用光源应用地球镜面反射贴图之前和之后的比较。注意中间的轻球？另外根据地图，水应该比陆地更亮。

镜面之后的地球

正常

法线是为光滑表面增加粗糙度，在3D中给出更多真实物体的错觉。例如，您可以在男士的脸上为石头或胡须添加粗糙的外观。至于地球，法线贴图决定了山脉的位置。

2k地球法线贴图

发射

发射是表面上发出的颜色或发光，与光无关。在地球上，我们在顶部添加了另一层，即白云。

2k地球云

排放前后

这是在应用发射图之前​​和之后。

发射前的地球

自定义模型

现在我们已经了解了场景编辑器的方法，我们如何使自己成为自定义模型？为了与我们的概念保持一致，我们将从Apple中选择一种设备。我们将从头开始构建Apple Watch的简单版本。首先，返回飞船场景并删除飞船。我们不再需要它了。我们先添加一些形状。为此，请转到对象库，该对象库是视口右上角的图标。如果您有Xcode 9，它位于右侧面板的底部。您将看到可添加的对象列表。黄色物体是灯光，而绿色物体是几何形状。蓝色是相机，还有其他物体，如物理和动画。

Apple Watch Pink

外壳

我们将从手表外壳开始。

盒子几何

将Box拖放到场景中。要调整节点的视图，诀窍是双击节点名称框旁边的节点图标。为节点分配默认颜色白色。你现在看到它是黑色的，因为背景也是白色的。让我们在屏幕上保存一些不动产并隐藏Project Navigator。按Command + 0。

背景

对于设计师来说，背景是平淡的。我们可以在Scene Inspector中更改它。作为背景，选择您想要的颜色。我喜欢Procedural Sky。

盒子大小

现在，转到属性检查器，我们将给它维度。您可以在Apple网站上找到它们。它们以毫米为单位。首先使用仪表更容易，然后将其缩小。所以，我将它们转换为米。我们将宽度设置为3.33，高度设置为3.86，长度设置为1.14。然后，将倒角半径设置为0.5。倒角半径是圆角。您可以随时根据需要调整视图。

盒子位置

在“ 节点”检查器中，将所有轴的位置设置为0，以便在首次运行会​​话时与摄像机的位置对齐。

盒子颜色

我们为它指定一种颜色。我们选择的颜色来自粉红色的Apple Watch。转到“ 材质”检查器，在“ 属性”部分中，将“ 着色”更改为“ Blinn”。然后，单击“ 漫反射”。在调色板窗口的底部，有一个颜色选择器图标。单击它，将鼠标悬停在Apple Watch案例上，然后再次单击。我们给了它一个皮肤！

现在，它看起来不太吸引人，不是吗？让我们添加一些灯让它看起来更逼真。在此之前，让我们将视图更改为Front并倾斜大小写以从大约45度角的轮廓中查看它。现在，转到对象库并添加全向灯，它将从该光源的每个方向照亮场景。在场景的左上角添加一个，在右下角添加另一个。您可以通过拖动操纵器或直接在位置框中随意移动这些灯光。将“ 镜面反射”设置为白色。现在你看到灯光反射到表壳上了。

屏幕

让我们添加手表的屏幕，好吗？

平面几何

转到对象库，选择一个平面并将其放在场景中。

平面尺寸

在属性检查器，分配一个宽度为3和高度为3.5。该圆角半径为0.4。

相对位置

现在，我们希望将屏幕放在表壳的正中间。因此，x和y位置与情况相同，即为0。为了计算它的z位置，我们知道该情况的长度为1.14，其中心位于该值的一半，即0.57。由于方框的z位置为0，因此平面的z位置应为0.57。不幸的是，如果飞机正好放在盒子的侧面，你会看到它像电视屏幕出错一样闪烁。不理想。解决这个问题的方法是稍微调整一下位置，将其增加到0.58。如果你旋转我们到目前为止的模型，盒子和飞机之间有一个小空间，那很好。我们不是试图在这里复制完美的手表，而只是学习如何使用基本形状组装物体。

平面颜色

让屏幕变黑，就像手表处于非活动状态一样。转到材质检查器，再次将“ 着色”更改为“ Blinn”并指定漫反射颜色为黑色。

表冠

现在，我们将在侧面增加表冠。转到对象库，选择一个圆柱体并将其放在场景中。

圆柱体尺寸

在“ 属性”检查器中，将“ 半径”设置为0.4，将“ 高度”设置为0.2。

圆柱体颜色

对于颜色，它与案例相同。转到“ 材质”检查器，将“ 着色”更改为“ Blinn”，对于“ 漫反射”，选择从案例中保存的颜色。

圆柱体旋转

皇冠的方向不对，我们需要旋转它。它现在是水平的，我们想让它垂直。要找到正确的旋转轴，根据经验，确切地使用右手并伸出拇指使其与其他手指成90度。您的拇指也应该模拟任一轴的方向。您将意识到要使用的轴是z轴。因此将z欧拉角度更改为90度。

Rule Of Thumb

圆柱体位置

将表冠定位到x为1.665，这是盒子宽度的一半，y为0.7，z为0，位于中间。

按键

我们也将按钮放在一边。在“ 对象库”中，选择“ 胶囊体”并将其拖动到场景中。

胶囊体大小

在“ 属性”检查器中，将“ 帽半径（Cap radius）”更改为0.3，将“ 高度”更改为1.5。

胶囊体颜色

对于胶囊体的颜色，请执行与圆柱体相同的步骤。

胶囊体位置

对于“ 位置”，将z设置为0以使其居中，将x设置为1.4。至于y，将绿色箭头向上和向下拖动到约-0.7。

表带

最后但并非最不重要的是，手表缺少表带。猜猜我们将采用什么样的形状？暂停阅读并尝试添加它然后自己定位。

如果您猜对了，它就是一个管子，因为管子中间是空心的。因此，请从对象库中添加它。

管子尺寸

管子有2个半径，一个内部和一个外部。在“ 属性”检查器中，将“ 内半径”更改为2.3，将“ 外半径”更改为2.5。该高度也将是2.5。

管子颜色

粉红色Apple Watch的手镯颜色与表壳略有不同。所以我们要为它挑选另一种颜色。转到“ 材质”检查器，将“ 着色”更改为“ Blinn”，单击“ 漫反射”时，使用颜色选择器从Apple网站中选择图像手镯中的颜色。

管子旋转

应用与表冠相同的构思，我们将在节点检查器中将其在z轴上旋转90度。

管子位置

有时，重置位置以查看放置方式是很好的。然后，你可以从那里移动它。因此，对于x，y和z，将其初始化为0。然后移动蓝色箭头，使z位置等于约-1.95。

父节点

表壳是表的主要部分。添加的其他部件相对于壳体定位。因此，我们将框设为[parent]节点。这样做的好处是，如果我缩放，旋转或移动盒子，所有其他几何形状都会跟随，就像儿童拴在父母身上一样。你会看到一点点。因此，在“ 场景”图中，选择所有其他形状，将它们拖到框顶部。您可以单击箭头以展开并查看隐藏的节点。

缩放

请记住，我们测量的是米的大小。现在我们应该将整个手表缩小到1％。选择框的父节点。对于比例，为x，y和z输入0.01。双击该框的节点图标以调整视图。正如你所看到的，一旦我调整了盒子的大小，它的所有孩子都一样。

预览观看场景

我们如何才能真实地看到手表在应用中的外观？运行应用程序，您可以按cmd+ R了。

结论

现在，我们只使用基本几何图形制作了一个简单的3D对象，并应用材质使其看起来更真实。我们学会了如何定位，旋转和缩放它。使用SceneKit场景编辑器可以避免很多代码，就像故事板一样。编辑是设计师最好的朋友。但是，它非常适合修改场景的属性，但不能用于创建3D内容。其他3D建模程序是设计杰作的地方。在下一节中，我们将导入已经制作的模型。