前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >SceneKit 场景编辑器-为您的AR体验构建3D舞台

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

作者头像
iOSDevLog
发布2022-01-20 12:38:59
5.5K0
发布2022-01-20 12:38:59
举报
文章被收录于专栏:iOSDevLog

为了能够在应用程序中添加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 InspectorAttributes InspectorMaterials 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

圆柱体位置

将表冠定位到x1.665,这是盒子宽度的一半,y0.7z0,位于中间。

按键

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

胶囊体大小

在“ 属性”检查器中,将“ 帽半径(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建模程序是设计杰作的地方。在下一节中,我们将导入已经制作的模型。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.02.28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 下载
  • 文件夹art.scnassets
  • 文件夹Assets.xcassets
  • 场景编辑器
    • 视口(VIEWPORT)
      • 操纵器
        • 视口控件
          • 场景图视图
            • 检查器
            • 变换
              • 位置
                • 欧拉角
                  • 缩放
                    • 边界框
                    • 材质
                    • 漫反射
                      • 弥漫之前和之后
                      • 镜面
                        • 高光之前和之后
                        • 正常
                        • 发射
                          • 排放前后
                          • 自定义模型
                          • 外壳
                            • 盒子几何
                              • 背景
                                • 盒子大小
                                  • 盒子位置
                                    • 盒子颜色
                                    • 屏幕
                                      • 平面几何
                                        • 平面尺寸
                                          • 相对位置
                                            • 平面颜色
                                            • 表冠
                                              • 圆柱体尺寸
                                                • 圆柱体颜色
                                                  • 圆柱体旋转
                                                    • 圆柱体位置
                                                    • 按键
                                                      • 胶囊体大小
                                                        • 胶囊体颜色
                                                          • 胶囊体位置
                                                          • 表带
                                                            • 管子尺寸
                                                              • 管子颜色
                                                                • 管子旋转
                                                                  • 管子位置
                                                                  • 父节点
                                                                  • 缩放
                                                                  • 预览观看场景
                                                                  • 结论
                                                                  相关产品与服务
                                                                  图像处理
                                                                  图像处理基于腾讯云深度学习等人工智能技术,提供综合性的图像优化处理服务,包括图像质量评估、图像清晰度增强、图像智能裁剪等。
                                                                  领券
                                                                  问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档