美文网首页SceneKit + ARKitiOS-swiftARKIT
100 行代码写一个手机AR

100 行代码写一个手机AR

作者: 酷走天涯 | 来源:发表于2017-04-23 14:33 被阅读2484次

    本节学习目标

    学习如何使用SceneKit框架高效开发AR项目

    先来看两个效果视频

    Scenekit_17.gif Scenekit_16.gif

    使用技术

    苹果亲儿子 SceneKit 3D框架

    话不多说直接上干活


    实现思路

    第一步 - 摄像头捕捉生活场景
    第二步 - 使用SceneKit 框架加载3D 模型文件
    第三步 - 使用重力感应类获取手机旋转角度,模型中的视角位置


    代码实现部分

    • 第一步 - 通过照相机捕捉现实生活中的场景,这个想必iOS 开发者都很熟悉,我就简单的说一下

    使用的框架AVFoundation

    Step-1.实现两个协议
    1.AVCaptureMetadataOutputObjectsDelegate
    2.UINavigationControllerDelegate

    Step-2.创建一个捕捉设备对象

    let device =   AVCaptureDevice.defaultDevice(withMediaType: AVMediaTypeVideo)
    

    Step-3.创建一个输入和输出设备对象

      let input = try! AVCaptureDeviceInput(device: device)
      output = AVCaptureMetadataOutput()
      output.setMetadataObjectsDelegate(self, queue: DispatchQueue.main)
      session = AVCaptureSession()
    

    Step-4.创建一个会话场景 将输入和输出设备对象添加到会话场景中去

    session.canSetSessionPreset(AVCaptureSessionPresetHigh)
    if(session.canAddInput(input)){
          session.addInput(input)
    }
    if(session.canAddOutput(output)){
        session.addOutput(output)
    }
    

    Step-5.创建一个预览视图对象用于显示摄像头捕捉到的画面

    let preview = AVCaptureVideoPreviewLayer(session: session)
    preview?.videoGravity = AVLayerVideoGravityResizeAspectFill
    preview?.frame = self.bounds
    self.layer.addSublayer(preview!)
    

    Step-6.开始捕捉画面

    session.startRunning()
    

    第一步操作完成了,接下来第二步操作

    • 第二步 创建渲染3D模型的场景

    Step-1.创建渲染3D模型专用视图

       var  scnView:SCNView = { // 游戏场景
       let view = SCNView()
       return view
      }()
    

    Step-2.创建用于观察3D场景的照相机节点对象

    var  eyeNode:SCNNode = { // 眼睛节点
        let node = SCNNode()
        node.camera = SCNCamera()
        node.camera?.automaticallyAdjustsZRange = true;
        return node
    }()
    

    Step-3.配置3D视图

    self.scnView.frame = self.frame
    self.addSubview(self.scnView)
    self.scnView.scene = SCNScene()     
    self.scnView.scene?.rootNode.addChildNode(self.eyeNode)
    

    Step-4.创建一个给场景中添加3D模型的方法

     func addModelFile(file:URL,position:SCNVector3){
       let scene = try! SCNScene(url: file, options: nil)
       let node = scene.rootNode
       node.position = position
       self.scnView.scene?.rootNode.addChildNode(node)
    }
    

    第二步. 内容就完成了,继续第三步

    • 第三步 创建重力感应对象,检测手机角度的变化

    Step-1.创建对象

    var  motionManager = CMMotionManager() 
    

    Step-2.设置刷新频率

    motionManager.deviceMotionUpdateInterval = 1/30.0
    

    Step-3.开始检测

     motionManager.startDeviceMotionUpdates(using: .xMagneticNorthZVertical, to: OperationQueue.main) { (motion, error) in
         if  let attitude = motion?.attitude,error == nil{
             var vector = SCNVector3Zero
             if (UIDevice.current.orientation.isPortrait) // home键靠右
              {
                    vector.x = Float(attitude.pitch);
                    vector.y = (Float)(attitude.roll);
                }else if(UIDevice.current.orientation.isLandscape ){
                    vector.x = (Float)(attitude.pitch);
                    vector.y = Float(attitude.roll);
               }else{
                    vector.x = (Float)(attitude.pitch)
                    vector.y = Float(attitude.roll);
               }
               vector.z = Float(attitude.yaw);
               self.eyeNode.eulerAngles = vector
           }
       }
    

    以上就是全部内容了

    A5556ACE-2593-4C8B-B946-E77BC2F0C070.png

    上图是demo的工程目录

    所有内容封装在一个ARView的文件中,接下来看看如何使用

      // 创建AR场景
       self.arView = ARView(frame: UIScreen.main.bounds)
       self.view.addSubview(self.arView)
        // 添加3D 文件
       let url =  Bundle.main.url(forResource: "boss_attack", withExtension: "dae")
       self.arView.addModelFile(file: url!, position: SCNVector3Make(0, 0, -1000))
    

    可能好多iOS 开发者从来没有使用过SceneKit 3D框架,是因为国内这方面的资料太少。不过这个引擎特别强大,而且使用起来很简单,appstore上有中文电子书,当你项目需要在你的应用中加入3D元素的时候,可以去下载看看,应用名字叫做<SceneKit>

    来给大家看一张图,你就知道它有多强大

    混编

    此demo的代码,我已放在这里

    Swift教程
    SceneKit 中文教程
    VR全景播放器

    相关文章

      网友评论

      • Noah_bin:楼主,我这边有两个问题。第一个就是ARKit 里面做特征识别有没有好点的办法。第二:3D模型骨骼运动和交互应该要怎么做!
        酷走天涯:@Noah_bin 第一个问题,在session代理中你可以过去每一帧的图像数据,进行识别,然后将模型加载到场景中去,第二个问题,你可以去appstore 搜索我写的教程,应用scenekit
        Noah_bin:@酷走天涯 特征识别就是我把图片和2D模型对应,扫描关联图片显示3D模型。 第二个就是 :假如我导出一个有动作的3D模型 我要怎么取操作这个模型
        酷走天涯:@Noah_bin 你第一,你的特征识别指的是什么?第二个需求你描述清楚一点
      • 72f63adf2eb6:Arkit中模型.scn是怎么弄出来的?
      • 清無:ARKit现在不支持场景识别,但可以里Vision框架自己合并功能。。。
        酷走天涯:@菲拉兔 关键arkit只支持ios11之后系统
      • 苹果API搬运工:楼主厉害了,苹果现在的ARKit就和你这个差不多,只是多个了视频画面识别
        酷走天涯:@史前图腾 底层都是scenekit
      • zhao1zhihui:需要专门的设备吗?
        zhao1zhihui:@酷走天涯 谢谢
        酷走天涯:@zhao1zhihui 不需要啊 苹果手机就可以运行了
      • 国王or乞丐:厉害,我这边有一个全景图,放进去不知道能不能实现
        国王or乞丐:@酷走天涯 真的啊,那十分感谢了,这个框架是不是都能实现?
        酷走天涯:@国王or乞丐 我可以帮你写个demo
        酷走天涯:@国王or乞丐 这个是加载模型的,全景图要用scenekit其他的技术

      本文标题:100 行代码写一个手机AR

      本文链接:https://www.haomeiwen.com/subject/qufyzttx.html