1.先上效果图
![]()
1510626388.gif
1510626388.gif
因为简书规定gif图最大为5M，所以看起来有些模糊，效果上很简单。
2.原理分析:
空间上一个黄色的点(点击屏幕触发),实时测距到手机的位置，也就是图中那个绿色的十字架(其实是三维坐标点)，并用橘黄色的线实时绘制(在3D空间中绘制线可没有2D平面上绘制线那么简单)，测量的结果显示在屏幕的最上面，在空间中也有橘黄色的字标记，标记的位置在空间两个点的中间位置。当手机移动时，距离值也动态的改变。
3.步骤
3.1 获取相机的三维坐标
为了拿到三维坐标点，我们需要相机的实时位置。通过对SCNVector3扩展一个静态方法获取三维坐标:
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)。
在这个类的初始化方法里，需要做的就是渲染两个节点(开始位置和结束为止)，线段中间距离值的文字节点，并设置约束。(注意:屏幕最上方的是用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
//不会产生阴影
dot.firstMaterial?.lightingModel = .constant
dot.firstMaterial?.isDoubleSided = false
//创建一个圆的两面光亮，正反兩面都拋光的球
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
//包装文字的节点
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)
//我们无法预计文字会出现在哪？所以我们可以给他设计约束，这样的约束把文字绑定在线的中间位置 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] //指数
//创建一个几何容器
let source = SCNGeometrySource(vertices: [self,vector])
//创建一个几何元素(一条线)
let element = SCNGeometryElement(indices: indices, primitiveType:.line)
//根据容器和元素创建一个几何体
let geomtry = SCNGeometry(sources: [source], elements: [element])
geomtry.firstMaterial?.diffuse.contents = color
//根据几何体创建一个node节点
return SCNNode(geometry: geomtry)
}
当手机位置发生变化时
func update(to vector:SCNVector3) {
//把所有的线先给移除
lineNode?.removeFromParentNode()
lineNode = startVector.line(to: vector, color: color)
sceneView.scene.rootNode.addChildNode(lineNode!)
//更新文字
text.string = distance(to: vector)
//设置文字位置，(放在线的中间)
textNode.position = SCNVector3((startVector.x + vector.x) / 2.0, (startVector.y + vector.y) / 2.0, (startVector.z + vector.z) / 2.0)
//结束点的位置
endNode.position = vector
if endNode.parent == nil {
sceneView.scene.rootNode.addChildNode(endNode)
}
}
4.主要工作做完了，只需要在一个控制器里面调用就好。
这里只是列出了关键代码，详情请看:代码传送门
