{"id":2139,"date":"2021-07-04T15:40:46","date_gmt":"2021-07-04T15:40:46","guid":{"rendered":"https:\/\/sezeromer.com\/?p=2139"},"modified":"2023-03-04T13:45:07","modified_gmt":"2023-03-04T10:45:07","slug":"arkit-ile-ev-olusturma","status":"publish","type":"post","link":"https:\/\/sezeromer.com\/en\/arkit-ile-ev-olusturma\/","title":{"rendered":"Building a Home with ARKit"},"content":{"rendered":"<p>Hello friends, in this article, we will talk about how to create a home object with ARKit and display it on the screen. First of all, we need to know how to put a node on the screen. You can find <a href=\"https:\/\/sezeromer.com\/arkit-ile-cisim-olusturmak-ve-gostermek\/\">this<\/a> in my previous articles.<\/p>\n<p>First, as usual, we put a scene view on the screen and reset it to all edges. This way it covers the entire screen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-2141\" src=\"https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/07\/Screen-Shot-2021-07-04-at-18.33.17-1024x556.png\" alt=\"\" width=\"640\" height=\"348\" srcset=\"https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/07\/Screen-Shot-2021-07-04-at-18.33.17-1024x556.png 1024w, https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/07\/Screen-Shot-2021-07-04-at-18.33.17-300x163.png 300w, https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/07\/Screen-Shot-2021-07-04-at-18.33.17-768x417.png 768w, https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/07\/Screen-Shot-2021-07-04-at-18.33.17-1536x834.png 1536w, https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/07\/Screen-Shot-2021-07-04-at-18.33.17-2048x1112.png 2048w, https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/07\/Screen-Shot-2021-07-04-at-18.33.17-500x271.png 500w, https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/07\/Screen-Shot-2021-07-04-at-18.33.17-800x434.png 800w, https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/07\/Screen-Shot-2021-07-04-at-18.33.17-1280x695.png 1280w, https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/07\/Screen-Shot-2021-07-04-at-18.33.17-1920x1042.png 1920w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>Then we can start writing the code. Here we will do a simple house design. We&#8217;re going to put a box and put a cylinder on top of that box to make it look like a roof and then a plane to look like a door. You can find them all in the previous article. After creating these nodes, we need to connect them to each other, that is, we need to specify in which positions they will be with each other. I posted the code snippet below. You can actually understand it by examining the code.<\/p>\n<div class=\"wp-block-codemirror-blocks code-block \">\n<pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;swift&quot;,&quot;mime&quot;:&quot;text\/x-swift&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;lineNumbers&quot;:true,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:true,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}\">\/\/\r\n\/\/  ViewController.swift\r\n\/\/  arkit-home\r\n\/\/\r\n\/\/  Created by Omer Sezer on 4.07.2021.\r\n\/\/\r\n\r\nimport UIKit\r\nimport ARKit\r\n\r\nclass ViewController: UIViewController {\r\n\r\n    @IBOutlet weak var sceneView: ARSCNView!\r\n    let configuration = ARWorldTrackingConfiguration()\r\n    \r\n    override func viewDidLoad() {\r\n        super.viewDidLoad()\r\n        setUI()\r\n    }\r\n\r\n    func setUI() {\r\n        \/\/ MARK: sceneView\r\n        sceneView.debugOptions = [.showFeaturePoints, .showWorldOrigin]\r\n        sceneView.session.run(configuration)\r\n        sceneView.autoenablesDefaultLighting = true\r\n        \r\n        setHomeNode()\r\n    }\r\n    \r\n    func setHomeNode() {\r\n        let nodeRoof = SCNNode(geometry: SCNPyramid(width: 0.1, height: 0.1, length: 0.1))\r\n        nodeRoof.geometry?.firstMaterial?.diffuse.contents = UIColor.red\r\n        \r\n        let nodeHome = SCNNode(geometry: SCNBox(width: 0.1, height: 0.1, length: 0.1, chamferRadius: 0))\r\n        nodeHome.geometry?.firstMaterial?.diffuse.contents = UIColor.blue\r\n        \r\n        let nodeDoor = SCNNode(geometry: SCNPlane(width: 0.03, height: 0.06))\r\n        nodeDoor.geometry?.firstMaterial?.diffuse.contents = UIColor.green\r\n        \r\n        nodeRoof.position = SCNVector3(-0.1, 0.1, -0.7)\r\n        nodeHome.position = SCNVector3(0, -0.05, 0)\r\n        nodeDoor.position = SCNVector3(0, -0.02, 0.05)\r\n        \r\n        sceneView.scene.rootNode.addChildNode(nodeRoof)\r\n        nodeRoof.addChildNode(nodeHome)\r\n        nodeHome.addChildNode(nodeDoor)\r\n    }\r\n}<\/pre>\n<\/div>\n<p>The screen output of the above project is as follows. You can enlarge this house and add windows etc.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-2140\" src=\"https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/07\/IMG_CB9DC06A1946-1-473x1024.jpeg\" alt=\"\" width=\"473\" height=\"1024\" srcset=\"https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/07\/IMG_CB9DC06A1946-1-473x1024.jpeg 473w, https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/07\/IMG_CB9DC06A1946-1-139x300.jpeg 139w, https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/07\/IMG_CB9DC06A1946-1-768x1662.jpeg 768w, https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/07\/IMG_CB9DC06A1946-1-710x1536.jpeg 710w, https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/07\/IMG_CB9DC06A1946-1-500x1082.jpeg 500w, https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/07\/IMG_CB9DC06A1946-1-800x1731.jpeg 800w, https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/07\/IMG_CB9DC06A1946-1.jpeg 828w\" sizes=\"(max-width: 473px) 100vw, 473px\" \/><\/p>\n<p>You can access the project <a href=\"https:\/\/github.com\/omersezer\/arkit-samples\">here<\/a>. If you have any questions, you can reach us by sending an e-mail or comment. Good work.<\/p>\n<p>&nbsp;<\/p>","protected":false},"excerpt":{"rendered":"<p>Hello friends, in this article, we will talk about how to create a home object with ARKit and display it on the screen. First of all, we need to know how to put a node on the screen. You can find this in my previous articles. First, as usual, we put a scene view on [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2118,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[824,327,706],"tags":[813,812,845,818,822,844,846,843,8,7,842,819,440,328,707],"class_list":["post-2139","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arkit","category-swift","category-swiftui","tag-ar","tag-arkit","tag-arttirilmis","tag-augmented","tag-augmented-reality","tag-ev","tag-gerceklik","tag-home","tag-omer","tag-omer-sezer","tag-rea","tag-reality","tag-sezer","tag-swift","tag-swiftui"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/posts\/2139"}],"collection":[{"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/comments?post=2139"}],"version-history":[{"count":4,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/posts\/2139\/revisions"}],"predecessor-version":[{"id":2673,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/posts\/2139\/revisions\/2673"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/media\/2118"}],"wp:attachment":[{"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/media?parent=2139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/categories?post=2139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/tags?post=2139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}