1.先上效果圖
![]()
1510626388.gif
1510626388.gif
因為簡書規(guī)定gif圖最大為5M捂人，所以看起來有些模糊撕攒，效果上很簡單雁刷。
2.原理分析:
空間上一個黃色的點(點擊屏幕觸發(fā)),實時測距到手機的位置，也就是圖中那個綠色的十字架(其實是三維坐標點)荔睹，并用橘黃色的線實時繪制(在3D空間中繪制線可沒有2D平面上繪制線那么簡單)萝毛，測量的結(jié)果顯示在屏幕的最上面项阴，在空間中也有橘黃色的字標記，標記的位置在空間兩個點的中間位置。當手機移動時环揽，距離值也動態(tài)的改變略荡。
3.步驟
3.1 獲取相機的三維坐標
為了拿到三維坐標點，我們需要相機的實時位置歉胶。通過對SCNVector3擴展一個靜態(tài)方法獲取三維坐標:
static func positionTransform(_ transform:matrix_float4x4) ->SCNVector3{
return SCNVector3Make(transform.columns.3.x, transform.columns.3.y, transform.columns.3.z)
}
從上面的方法可以看出需要傳遞一個float4X4的矩陣
圖片.png
3.2 計算距離
三維空間中計算兩個點之間距離的方法：
func distance(form vector:SCNVector3) -> Float {
let distanceX = self.x - vector.x
let distanceY = self.y - vector.y
let distanceZ = self.z - vector.z
return sqrt((distanceX * distanceX) + (distanceY * distanceY) + (distanceZ * distanceZ))
}
3.3 畫線
當我們移動手機時汛兜，不僅要繪制當前距離，還需把之前的線段刪除通今，做到實時更新的效果粥谬。所以，在這里辫塌，畫線的方法可以抽成一個類專門管理(Line)漏策。
在這個類的初始化方法里，需要做的就是渲染兩個節(jié)點(開始位置和結(jié)束為止)臼氨，線段中間距離值的文字節(jié)點掺喻，并設(shè)置約束。(注意:屏幕最上方的是用UILabel顯示的測距值储矩，Line方法中是3D顯示的一個距離值)巢寡。
init(sceneView:ARSCNView,startVector:SCNVector3,unit:LengthUnit) {
self.sceneView = sceneView
self.startVector = startVector
self.unit = unit
let dot = SCNSphere(radius: 0.5)
dot.firstMaterial?.diffuse.contents = color
//不會產(chǎn)生陰影
dot.firstMaterial?.lightingModel = .constant
dot.firstMaterial?.isDoubleSided = false
//創(chuàng)建一個圓的兩面光亮，正反兩面都拋光的球
startNode = SCNNode(geometry: dot)
startNode.scale = SCNVector3(1/500.0,1/500.0,1/500.0)
startNode.position = startVector
sceneView.scene.rootNode.addChildNode(startNode)
endNode = SCNNode(geometry: dot)
endNode.scale = SCNVector3(1/500.0,1/500.0,1/500.0)
text = SCNText(string: "", extrusionDepth: 0.1)
text.font = .systemFont(ofSize: 5)
text.firstMaterial?.diffuse.contents = color
text.firstMaterial?.lightingModel = .constant
text.firstMaterial?.isDoubleSided = true
text.alignmentMode = kCAAlignmentCenter
text.truncationMode = kCATruncationMiddle
//包裝文字的節(jié)點
let textWrapperNode = SCNNode(geometry: text)
textWrapperNode.eulerAngles = SCNVector3Make(0, .pi, 0)
textWrapperNode.scale = SCNVector3(1/500.0,1/500.0,1/500.0)
textNode = SCNNode()
textNode.addChildNode(textWrapperNode)
//我們無法預計文字會出現(xiàn)在哪椰苟？所以我們可以給他設(shè)計約束，這樣的約束把文字綁定在線的中間位置 SCNLookConstraint是一種約束树叽，讓它綁定著我們的目標 永遠向著使用者
let constraint = SCNLookAtConstraint(target: sceneView.pointOfView)
textNode.constraints = [constraint]
sceneView.scene.rootNode.addChildNode(textNode)
}
//畫線的方法
func line(to vector:SCNVector3,color:UIColor) -> SCNNode {
let indices:[UInt32] = [0,1] //指數(shù)
//創(chuàng)建一個幾何容器
let source = SCNGeometrySource(vertices: [self,vector])
//創(chuàng)建一個幾何元素(一條線)
let element = SCNGeometryElement(indices: indices, primitiveType:.line)
//根據(jù)容器和元素創(chuàng)建一個幾何體
let geomtry = SCNGeometry(sources: [source], elements: [element])
geomtry.firstMaterial?.diffuse.contents = color
//根據(jù)幾何體創(chuàng)建一個node節(jié)點
return SCNNode(geometry: geomtry)
}
當手機位置發(fā)生變化時
func update(to vector:SCNVector3) {
//把所有的線先給移除
lineNode?.removeFromParentNode()
lineNode = startVector.line(to: vector, color: color)
sceneView.scene.rootNode.addChildNode(lineNode!)
//更新文字
text.string = distance(to: vector)
//設(shè)置文字位置舆蝴，(放在線的中間)
textNode.position = SCNVector3((startVector.x + vector.x) / 2.0, (startVector.y + vector.y) / 2.0, (startVector.z + vector.z) / 2.0)
//結(jié)束點的位置
endNode.position = vector
if endNode.parent == nil {
sceneView.scene.rootNode.addChildNode(endNode)
}
}
4.主要工作做完了，只需要在一個控制器里面調(diào)用就好题诵。
這里只是列出了關(guān)鍵代碼洁仗，詳情請看:代碼傳送門
