iOS -- AR(任意門)

小時候我們都看過日本動漫哆啦A夢丽猬,機器貓有一個任意門柴梆,通過這個門拂铡,可以讓你從現(xiàn)實世界壹无,通往另一個虛擬的世界。
網(wǎng)絡圖片.jpg

現(xiàn)在感帅,我們用SceneKit也來實現(xiàn)這個效果斗锭,先上效果圖:


1510807754.gif

實現(xiàn)這個效果其實不難,難點在模型的構建失球。

一岖是、原理分析

利用ARSession平面檢測并確定錨點,在這個錨點上添加一個平面節(jié)點实苞,點擊這個平面節(jié)點豺撑,添加房子模型。

二黔牵、模型準備

圖片.png

我個人認為3D的模型制作和我們用XIB原理一樣的聪轿,只不過一個是在3D上做布局,一個是在2D上做布局猾浦。
2.1 創(chuàng)建scn文件


圖片.png

2.2 拖拽式開發(fā)


圖片.png

小技巧:當你在3D空間上拖動物件位置發(fā)生混亂時陆错,可點擊面板左下角下面像攝像頭的小按鈕,可以讓你選擇任何視角觀察你的模型金赦。


圖片.png

制作模型是個技術活音瓷,需要非常仔細,比如夹抗,房間有六個面绳慎,然后給每個面用圖片渲染上,包括墻上的電視機兔朦,壁畫偷线,都是用3D節(jié)點制作出來的。


圖片.png

三沽甥、實現(xiàn)步驟:

ARSession介紹:它是連接底層和AR視圖的一個中間環(huán)節(jié)声邦,提供ARSNView所有的API,可以理解為網(wǎng)絡7層模型的會話層摆舟。

3.1 平面檢測
明確表示需要追蹤個水平面亥曹。設置后邓了,scene被檢測到時就會調用 ARSCNViewDelegate代理方法


     let configuration = ARWorldTrackingConfiguration()
     configuration.planeDetection = .horizontal
     configuration.worldAlignment = .gravityAndHeading
     // Run the view's session
     sceneView.session.run(configuration)

3.2 添加節(jié)點
當攝像機捕捉到了平面,就會回調下面這個方法:

func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {
      //        錨點?? VS 節(jié)點
      if anchor is ARPlaneAnchor {
          //           錨點可以是任意形態(tài)的 如果我們檢測的是平面媳瞪,那么這個錨點就是平面
          let planeAnchor = anchor as! ARPlaneAnchor
          
          let plane = SCNPlane(width: CGFloat(planeAnchor.extent.x), height: CGFloat(planeAnchor.extent.z))
          //            extent: 檢測平面的寬和高
          //            錨點的大小 = 檢測到的水平面大小
          let planeNode = SCNNode() //創(chuàng)建一個節(jié)點
          //            設置節(jié)點的位置骗炉,即錨點的中心位置
          planeNode.position = SCNVector3(x: planeAnchor.center.x, y: 0, z: planeAnchor.center.z)
          //X 軸旋轉90度
          planeNode.transform = SCNMatrix4MakeRotation(-Float.pi/2, 1, 0, 0)
          
          let gridMaterial = SCNMaterial()
          gridMaterial.diffuse.contents = UIImage.init(named: "art.scnassets/grid.png")
          plane.materials = [gridMaterial]
          planeNode.geometry = plane // 因為我不知道 會偵測到怎麼樣的水平面
          node.addChildNode(planeNode)
   }
  }

在這個方法里面根據(jù)錨點的大小添加了一個平面節(jié)點,并用圖片渲染出蛇受。注意:手機必須離平面有一定的距離句葵,做好1m左右最佳,尚不清楚為什么近距離識別度不高的原因兢仰。

3.3.點擊這個平面節(jié)點乍丈,在 sceneView.scene.rootNode上添加我們的房間模型,

 override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        //       是否第一次點擊(第一次接觸)
        if let touch = touches.first {
            //            在2D屏幕上點擊的位置
            let touchLocation = touch.location(in: sceneView)
            //     在2D屏幕是上點擊的位置轉換成3D的位置
            let results = sceneView.hitTest(touchLocation, types: .existingPlaneUsingExtent)
            // existingPlaneUsingExtent: 表示只在檢測到的屏幕上起作用
            //     點擊結果是否是他的第一次
            if let hitResult = results.first {
                
                
                let boxScene = SCNScene(named: "art.scnassets/portal.scn")!
                
                if let boxNode = boxScene.rootNode.childNode(withName: "portal", recursively: true) {
                    
                    
                    boxNode.position = SCNVector3(x: hitResult.worldTransform.columns.3.x, y: hitResult.worldTransform.columns.3.y - 0.05, z: hitResult.worldTransform.columns.3.z)
                    
                    sceneView.scene.rootNode.addChildNode(boxNode)
                }
            }
        }
    }

解語:目前Xcode制作3D模型時還是有些卡頓的把将,但是我相信蘋果一定會在下一個版本中做優(yōu)化轻专。代碼傳送門

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市察蹲,隨后出現(xiàn)的幾起案子请垛,更是在濱河造成了極大的恐慌,老刑警劉巖洽议,帶你破解...
    沈念sama閱讀 206,723評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件宗收,死亡現(xiàn)場離奇詭異,居然都是意外死亡绞铃,警方通過查閱死者的電腦和手機镜雨,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,485評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來儿捧,“玉大人荚坞,你說我怎么就攤上這事》贫埽” “怎么了颓影?”我有些...
    開封第一講書人閱讀 152,998評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長懒鉴。 經(jīng)常有香客問我诡挂,道長,這世上最難降的妖魔是什么临谱? 我笑而不...
    開封第一講書人閱讀 55,323評論 1 279
  • 正文 為了忘掉前任璃俗,我火速辦了婚禮,結果婚禮上悉默,老公的妹妹穿的比我還像新娘城豁。我一直安慰自己,他們只是感情好抄课,可當我...
    茶點故事閱讀 64,355評論 5 374
  • 文/花漫 我一把揭開白布唱星。 她就那樣靜靜地躺著雳旅,像睡著了一般。 火紅的嫁衣襯著肌膚如雪间聊。 梳的紋絲不亂的頭發(fā)上攒盈,一...
    開封第一講書人閱讀 49,079評論 1 285
  • 那天,我揣著相機與錄音哎榴,去河邊找鬼型豁。 笑死,一個胖子當著我的面吹牛叹话,可吹牛的內容都是我干的偷遗。 我是一名探鬼主播,決...
    沈念sama閱讀 38,389評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼驼壶,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了喉酌?” 一聲冷哼從身側響起热凹,我...
    開封第一講書人閱讀 37,019評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎泪电,沒想到半個月后般妙,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,519評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡相速,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 35,971評論 2 325
  • 正文 我和宋清朗相戀三年碟渺,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片突诬。...
    茶點故事閱讀 38,100評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡苫拍,死狀恐怖,靈堂內的尸體忽然破棺而出旺隙,到底是詐尸還是另有隱情绒极,我是刑警寧澤,帶...
    沈念sama閱讀 33,738評論 4 324
  • 正文 年R本政府宣布蔬捷,位于F島的核電站垄提,受9級特大地震影響,放射性物質發(fā)生泄漏周拐。R本人自食惡果不足惜铡俐,卻給世界環(huán)境...
    茶點故事閱讀 39,293評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望妥粟。 院中可真熱鬧审丘,春花似錦、人聲如沸罕容。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,289評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至露泊,卻和暖如春喉镰,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背惭笑。 一陣腳步聲響...
    開封第一講書人閱讀 31,517評論 1 262
  • 我被黑心中介騙來泰國打工侣姆, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人沉噩。 一個月前我還...
    沈念sama閱讀 45,547評論 2 354
  • 正文 我出身青樓捺宗,卻偏偏與公主長得像,于是被迫代替她去往敵國和親川蒙。 傳聞我的和親對象是個殘疾皇子蚜厉,可洞房花燭夜當晚...
    茶點故事閱讀 42,834評論 2 345

推薦閱讀更多精彩內容