ARKit从入门到精通(1)--显示Cube(原生方法实现)

栏目: IOS · 发布时间: 6年前

内容简介:在全新AR开发专栏的第一篇我们通过一个简单的project(在显示环境放置一个cube)来了解ARKit的核心功能与API特性。通过这个过程,你将了解ARKit如何在真实的设备中工作,从而与创建的3D对象进行交互。然后按住control键并从ARKit SceneKit视图拖拽到ViewController.swift文件。当提示时,命名IBOutlet sceneView。可以删除didReceiveMemoryWarning() 方法,目前我们并不需要它。

在全新AR开发专栏的第一篇我们通过一个简单的project(在显示环境放置一个cube)来了解ARKit的核心功能与API特性。通过这个过程,你将了解ARKit如何在真实的设备中工作,从而与创建的3D对象进行交互。

前提说明

1.本部分教程使用的是原生iOS开发,目前不涉及Unity,主要使用SceneKit。

2.使用的软件版本:Xcode 9。

3.使用的开发语言版本:Swift 4

4.本系列专栏希望通过简洁的语言与图片帮助大家更好的理解ARKit开发流程,帮助大家开发出炫酷的AR应用。

Step 1: 创建项目

打开Xcode,点击 File > New > Project… ,选择Single View App,点击Next创建项目,命名为 ARKitDemo 。如下图操作所示:

ARKit从入门到精通(1)--显示Cube(原生方法实现)

设置SceneKit View

打开Main.storyboard,将ARKit SceneKit视图拖放到视图控制器上。

ARKit从入门到精通(1)--显示Cube(原生方法实现)

然后将ARKit SceneKit视图约束填充整个视图控制器。

ARKit从入门到精通(1)--显示Cube(原生方法实现)

Step 2: 编辑代码实现open camera

连接IBOutlet

ViewController.swift 文件的顶部添加一个import语句来导入ARKit:

import ARKit复制代码

然后按住control键并从ARKit SceneKit视图拖拽到ViewController.swift文件。当提示时,命名IBOutlet sceneView。可以删除didReceiveMemoryWarning() 方法,目前我们并不需要它。

ARKit从入门到精通(1)--显示Cube(原生方法实现)

配置ARSCNView Session

我们的AR应用程序是通过摄像头观察世界和周围的环境。所以接下来我们需要设置Camera:

配置ARKit SceneKit View。在ViewController类中插入以下代码:

override func viewWillAppear(_ animated: Bool) {    
super.viewWillAppear(animated)    
let configuration = ARWorldTrackingConfiguration()    
sceneView.session.run(configuration)
}复制代码

viewWillAppear(_:) 方法中,我们初始化了一个名为 ARWorldTrackingConfiguration 的AR配置。主要用于实现World Tracking功能。

The World Tracking配置跟踪设备的方向和位置,它还能通过设备的Camera探测真实世界的表面。

设置sceneView’s AR session来运行我们刚刚初始化的配置。AR session管理视图内容的运动跟踪和camera图像处理。

现在在ViewController中添加另一个方法:

override func viewWillDisappear(_ animated: Bool) {    
super.viewWillDisappear(animated)    
sceneView.session.pause()
}复制代码

在viewWillDisappear(_:)方法中主要处理:停止tracking和视图内容的图像。

Camera 授权

在我们运行应用程序之前,我们需要通知用户我们将使用他们设备的摄像头实现增强现实功能。这是iOS 10发布以来的一个要求。

打开Info.plist。右键单击空白区域并选择Add row。设置私隐相机使用说明键。值可以设置为Augmented Reality。如下图所示:

ARKit从入门到精通(1)--显示Cube(原生方法实现)

接下来我们提前测试下Camera是否可以顺利的调用出来。将测试手机连接到Mac上。在Xcode上构建并运行该项目。该应用程序应该会提示你允许摄像头进入。如下图所示:

ARKit从入门到精通(1)--显示Cube(原生方法实现)

Step 3: 添加3D物体

插入以下代码到你的ViewController类:

func addBox() {
    let box = SCNBox(width: 0.1, height: 0.1, length: 0.1, chamferRadius: 0)
    
    let boxNode = SCNNode()
    boxNode.geometry = box
    boxNode.position = SCNVector3(0, 0, -0.2)
    
    let scene = SCNScene()
    scene.rootNode.addChildNode(boxNode)
    sceneView.scene = scene
}复制代码
  • 创建一个Box,1 Float = 1 meter。

  • 创建一个node。node表示物体在三维空间中的位置和坐标。node本身没有可见的内容。

  • 给node设置一个形状(Box)。

  • 设置box的位置。这个位置相对于camera的,右边是X正,左边是X负。上面表示Y正,向下表示Y负。向后表示Z正,向前表示Z负。

  • 创建一个scene(SceneKit scene),将box添加到场景中去。

  • sceneView 的scene设置为显示刚刚创建的场景。

override func viewDidLoad() {
    super.viewDidLoad()
    addBox()
}复制代码

接下来Build,打开camera,出现白色的box,效果如下图:

ARKit从入门到精通(1)--显示Cube(原生方法实现)

addBox() 的方法也可以这样写:

func addBox() {
    let box = SCNBox(width: 0.05, height: 0.05, length: 0.05, chamferRadius: 0)
    
    let boxNode = SCNNode()
    boxNode.geometry = box
    boxNode.position = SCNVector3(0, 0, -0.2)
    
    sceneView.scene.rootNode.addChildNode(boxNode)
}复制代码

Step 4: 添加手势(点击删除3D物体)

在ViewController.swift文件中插入以下方法:

@objc func didTap(withGestureRecognizer recognizer: UIGestureRecognizer) {
    let tapLocation = recognizer.location(in: sceneView)
    let hitTestResults = sceneView.hitTest(tapLocation)
    guard let node = hitTestResults.first?.node else { return }
    node.removeFromParentNode()
}复制代码

创建了一个didTap(带有gesturerecognizer:)方法。检索用户相对于sceneView的点击位置,然后t查看是否点击了任何node。然后从hitTestResults中找到第一个node。如果结果确实包含至少一个node,那么我们将从其父节点删除第一个节点。

在测试删除对象之前,更新viewDidLoad()方法,添加对addTapGestureToSceneView()方法的调用:

override func viewDidLoad() {
    super.viewDidLoad()
    
    addBox()
    addTapGestureToSceneView()
}复制代码

Step 5: 添加多个3D物体

在ViewController类的末尾创建一个extension:

extension float4x4 {
    var translation: float3 {
        let translation = self.columns.3
        return float3(translation.x, translation.y, translation.z)
    }
}复制代码

extension将矩阵转换为float3。修改addBox()方法:

func addBox(x: Float = 0, y: Float = 0, z: Float = -0.2) {
    let box = SCNBox(width: 0.1, height: 0.1, length: 0.1, chamferRadius: 0)
    
    let boxNode = SCNNode()
    boxNode.geometry = box
    boxNode.position = SCNVector3(x, y, z)
    
    sceneView.scene.rootNode.addChildNode(boxNode)
}复制代码

修改didTap(使用gesturerecognizer:)方法,在guard let语句内部和return语句之前。添加以下代码:

let hitTestResultsWithFeaturePoints = sceneView.hitTest(tapLocation, types: .featurePoint)
 
if let hitTestResultWithFeaturePoints = hitTestResultsWithFeaturePoints.first {
    let translation = hitTestResultWithFeaturePoints.worldTransform.translation
    addBox(x: translation.x, y: translation.y, z: translation.z)
}复制代码

接下来实现使用x、y和z在检测到的点击时添加一个新的box。didTap(withGestureRecognizer:)方法的代码如下:

@objc func didTap(withGestureRecognizer recognizer: UIGestureRecognizer) {
    let tapLocation = recognizer.location(in: sceneView)
    let hitTestResults = sceneView.hitTest(tapLocation)
    guard let node = hitTestResults.first?.node else {
        let hitTestResultsWithFeaturePoints = sceneView.hitTest(tapLocation, types: .featurePoint)
        if let hitTestResultWithFeaturePoints = hitTestResultsWithFeaturePoints.first {
            let translation = hitTestResultWithFeaturePoints.worldTransform.translation
            addBox(x: translation.x, y: translation.y, z: translation.z)
        }
        return
    }
    node.removeFromParentNode()
}复制代码

运行效果如下图:

ARKit从入门到精通(1)--显示Cube(原生方法实现)

参考链接:https://www.appcoda.com/arkit-introduction-scenekit/

------AR Portal(AR开发者社区)整理

关注微信公众号(AR开发者交流社区,提供AR开发干货,推动AR内容发展):AR开发者社区


以上所述就是小编给大家介绍的《ARKit从入门到精通(1)--显示Cube(原生方法实现)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Ajax for Web Application Developers

Ajax for Web Application Developers

Kris Hadlock / Sams / 2006-10-30 / GBP 32.99

Book Description Reusable components and patterns for Ajax-driven applications Ajax is one of the latest and greatest ways to improve users’ online experience and create new and innovative web f......一起来看看 《Ajax for Web Application Developers》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

html转js在线工具
html转js在线工具

html转js在线工具