Hello, Augmented World!
大綱
Introduction
Defining AR
Introducing ARKit
Template App
It’s time to dive right into ARKit programming by starting with the ARKit app template that Xcode provides.
Intro to SceneKit
A look at SceneKit and some key concepts, including 3D coordinates, aligning those coordinates with the real world, SceneKit geometries, and SceneKit’s node graph.
Your First SceneKit Shape
設定sceneview
override func viewDidLoad() {
super.viewDidLoad()
// Set the view's delegate
sceneView.delegate = self
// Show statistics such as fps and timing information
sceneView.showsStatistics = true
sceneView.debugOptions = [ARSCNDebugOptions.showWorldOrigin,
ARSCNDebugOptions.showFeaturePoints]
sceneView.autoenablesDefaultLighting = true
}在座標圓心畫個藍色球
func drawSphereAtOrigin() {
sphere = SCNNode(geometry: SCNSphere(radius: 0.05))
sphere.geometry?.firstMaterial?.diffuse.contents = UIColor.blue
// 相對於parent node的座標
// 畫在parent node的座標系統圓心
sphere.position = SCNVector3(0, 0, 0)
sceneView.scene.rootNode.addChildNode(sphere)
}Shiny Objects
You just drew a dull object. Now you’ll make it shiny, and learn about diffuse and specular reflection while doing so.
畫一個正方體
func drawBoxAt1200High() {
let box = SCNNode(geometry: SCNBox(width: 0.1,
height: 0.1,
length: 0.1,
chamferRadius: 0.0))
// z = -0.3, 表示在核心的後方30cm
// y = 0.2, 表示在核心的上方20cm
box.position = SCNVector3(0, 0.2, -0.3)
box.geometry?.firstMaterial?.diffuse.contents = UIColor.orange
box.geometry?.firstMaterial?.specular.contents = UIColor.white
sceneView.scene.rootNode.addChildNode(box)
}Challenge: Draw a Shiny Green Pyramid
You know how to draw a sphere, and make it shiny and blue. Can you draw a shiny green pyramid?
func drawPyramidAt600Low() {
let pyramid = SCNNode(geometry: SCNPyramid(width: 0.1,
height: 0.1,
length: 0.1))
pyramid.geometry?.firstMaterial?.diffuse.contents = UIColor.green
pyramid.geometry?.firstMaterial?.specular.contents = UIColor.red
pyramid.position = SCNVector3(0, -0.2, 0.3)
sceneView.scene.rootNode.addChildNode(pyramid)
}Earth
Let's turn that shiny blue sphere into our home planet by covering it with a photo of the Earth’s surface.
將中心的藍色圓球換成地球的圖片
func drawSphereAtOrigin() {
sphere = SCNNode(geometry: SCNSphere(radius: 0.05))
sphere.geometry?.firstMaterial?.diffuse.contents = UIImage(named: "earth")
sphere.position = SCNVector3(0, 0, 0)
sceneView.scene.rootNode.addChildNode(sphere)
}Challenge: Cat On a Plane
Take what you’ve learned from the previous lesson and draw a flat surface with a cat picture on it.
畫平面
func drawPlaneAt900() {
let plane = SCNNode(geometry: SCNPlane(width: 0.1,
height: 0.1))
plane.geometry?.firstMaterial?.diffuse.contents = UIImage(named: "cat")
plane.geometry?.firstMaterial?.isDoubleSided = true
plane.position = SCNVector3(-0.2, 0, 0)
sceneView.scene.rootNode.addChildNode(plane)
}Euler Angles
They’re pronounced “oiler”, not “yoo-ler”, and they’re how you can tilt objects at jaunty angles.
畫個紅色甜甜圈
func drawTorusAt300() {
let torus = SCNNode(geometry: SCNTorus(ringRadius: 0.05,
pipeRadius: 0.03))
torus.geometry?.firstMaterial?.diffuse.contents = UIColor.red
torus.geometry?.firstMaterial?.specular.contents = UIColor.white
torus.position = SCNVector3(0.2, 0, 0)
torus.eulerAngles = SCNVector3(0, 0, 45.degreesToRadians())
sceneView.scene.rootNode.addChildNode(torus)
}
extension Int {
func degreesToRadians() -> CGFloat {
return CGFloat(self) * CGFloat.pi / 180.0
}
}
Challenge: Tilt the Cat
Now that you know about Euler angles, apply them to that cat picture.
畫個有貓的圖面
func drawPlaneAt900() {
let plane = SCNNode(geometry: SCNPlane(width: 0.1,
height: 0.1))
plane.geometry?.firstMaterial?.diffuse.contents = UIImage(named: "cat")
plane.geometry?.firstMaterial?.isDoubleSided = true
plane.position = SCNVector3(-0.2, 0, 0)
plane.eulerAngles = SCNVector3(-45.degreesToRadians(),
20.degreesToRadians(),
45.degreesToRadians())
sceneView.scene.rootNode.addChildNode(plane)
}Actions
Actions are objects that make changes to SceneKit objects. They can move objects, rotate them, grow and shrink them, change their appearance and more. Learn how to use them to put a little spin on the Earth!
讓地球旋轉的action
func drawSphereAtOrigin() {
sphere = SCNNode(geometry: SCNSphere(radius: 0.05))
sphere.geometry?.firstMaterial?.diffuse.contents = UIImage(named: "earth")
sphere.geometry?.firstMaterial?.specular.contents = UIColor.yellow
sphere.position = SCNVector3(0, 0, 0)
sceneView.scene.rootNode.addChildNode(sphere)
let rotateAction = SCNAction.rotate(by: 360.degreesToRadians(),
around: SCNVector3(0, 1, 0),
duration: 8)
let rotateForeverAction = SCNAction.repeatForever(rotateAction)
sphere.runAction(rotateForeverAction)
}Beyond Shapes
All this time, you’ve been drawing simple shapes using SceneKit geometries. Let’s draw something fancier.
讀取太空梭3Ｄ物件，並繞地球進行旋轉
func drawOrbitingShip() {
let scene = SCNScene(named: "art.scnassets/ship.scn")!
let ship = (scene.rootNode.childNode(withName: "ship", recursively: false))!
ship.position = SCNVector3(1, 0, 0)
ship.scale = SCNVector3(0.3, 0.3, 0.3)
ship.eulerAngles = SCNVector3(0, 180.degreesToRadians(), 0)
// ship是sphere的child, 所以會受sphere的action影響
sphere.addChildNode(ship)
}Conclusion
You’ve just completed a crash course in SceneKit and written some basic AR app. Let's review where you are and see what comes next.
Last updated
Was this helpful?