计算增强现实中与墙壁大小对应的图像大小并平滑拖动
Calculate image size corresponding to wall size in Augmented Reality and Drag it smoothly
我正在创建一个从图库中选择图像并使用 ARKit 垂直平面将其放置在墙上的应用程序 detection.I我也能够正确缩放它，但拖动不是预期的那样。另外，我也对图像大小感到困惑。我想要它就像假设墙是 10 英尺，我想放置 3*2 feet.I 的图像引用了许多链接，docs.Below 是渲染和添加位置图像的代码：
func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for
anchor: ARAnchor) {
if nodeWeCanChange == nil{
guard let planeAnchor = anchor as? ARPlaneAnchor else { return
}
let width = CGFloat(planeAnchor.extent.x)
let height = CGFloat(planeAnchor.extent.z)
nodeWeCanChange = SCNNode(geometry: SCNPlane(width: width,
height: height))
nodeWeCanChange?.position = SCNVector3(planeAnchor.center.x, 0,
planeAnchor.center.z)
nodeWeCanChange?.transform = SCNMatrix4MakeRotation(-Float.pi / 2.0, 1.0, 0.0, 0.0)
nodeWeCanChange?.geometry?.firstMaterial?.diffuse.contents = UIColor.white
DispatchQueue.main.async(execute: {
node.addChildNode(self.nodeWeCanChange!)
self.zIndex = (self.nodeWeCanChange?.simdPosition.z)!})
} }
}
func placeImage(image : UIImage){
guard let pointsPerInch = UIScreen.pointsPerInch else{
return}
let pixelWidth = (image.size.width) * (image.scale)
let pixelHeight = (image.size.height) * (image.scale)
let inchWidth = pixelWidth/pointsPerInch
let inchHeight = pixelHeight/pointsPerInch
let widthInMetres = (inchWidth * 2.54) / 100
let heightInMeters = (inchHeight * 2.54) / 100
let photo = SCNPlane(width: (widthInMetres), height: (heightInMeters))
nodeWeCanChange?.geometry = photo
nodeWeCanChange?.geometry?.firstMaterial?.diffuse.contents = image}`
@objc func handleTap(_ gestureRecognize: ThresholdPanGesture)
{
// Function that handles drag
let position = gestureRecognize.location(in: augentedRealityView)
var foundNode:SCNNode? = nil
do {
if gestureRecognize.state == .began {
print("Pan state began")
//let hitTestOptions = [SCNHitTestOption: Any]()
let hitResult: [SCNHitTestResult] = (self.augentedRealityView?.hitTest(gestureRecognize.location(in: self.augentedRealityView), options: nil))!
guard let firstNode = hitResult.first else {
return
}
print("first node =\(firstNode.node)")
if firstNode.node.isEqual(nodeWeCanChange){
foundNode = nodeWeCanChange
print("node found")}
else if (firstNode.node.parent?.isEqual(nodeWeCanChange))!{ print("node found")}
else{ return print("node not found")}
latestTranslatePos = position
}
}
if gestureRecognize.state == .changed{
let deltaX = Float(position.x - latestTranslatePos.x)/700
let deltaY = Float(position.y - latestTranslatePos.y)/700
nodeWeCanChange?.localTranslate(by: SCNVector3Make(deltaX, -deltaY , zIndex))
latestTranslatePos = position
print("Pan State Changed")
}
if gestureRecognize.state == .ended {
print("Done moving object")
let deltaX = Float(position.x - latestTranslatePos.x)/700
let deltaY = Float(position.y - latestTranslatePos.y)/700
nodeWeCanChange?.localTranslate(by: SCNVector3Make(deltaX, -deltaY , zIndex))
latestTranslatePos = position
foundNode = nil
}
}`
任何人都可以帮我解决我所缺少的吗？
这里有两个问题...^__________^.
关于平移 SCNNode 最简单的方法是使用 touches，尽管您可以很容易地修改下面的示例。
假设你的内容放在 ARPlaneAnchor 上，你想在平面上移动它，那么你可以做这样的事情（假设你还选择了一个 SCNNode 作为你的 nodeToDrag) 在我的示例中将是图片：
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
//1. Get The Current Touch Point
guard let currentTouchPoint = touches.first?.location(in: self.augmentedRealityView),
//2. Get The Existing ARPlaneAnchor
let hitTest = augmentedRealityView.hitTest(currentTouchPoint, types: .existingPlane).first else { return }
//3. Convert To World Coordinates
let worldTransform = hitTest.worldTransform
//4. Set The New Position
let newPosition = SCNVector3(worldTransform.columns.3.x, worldTransform.columns.3.y, worldTransform.columns.3.z)
//5. Apply To The Node
nodeToDrag.simdPosition = float3(newPosition.x, newPosition.y, newPosition.z)
}
或者您可以尝试以下操作：
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
//1. Get The Current Touch Point
guard let currentTouchPoint = touches.first?.location(in: self.augmentedRealityView),
//2. Get The Existing ARPlaneAnchor
let hitTest = augmentedRealityView.hitTest(currentTouchPoint, types: .existingPlane).first else { return }
//3. Convert To Local Coordinates
nodeToDrag.simdPosition.x = Float(hitTest.localTransform.columns.3.x)
nodeToDrag.simdPosition.y = Float(-hitTest.localTransform.columns.3.z)
}
关于您的尺寸，您并不完全清楚您想要做什么。然而，这里有一个小例子，其中的注释应该有所帮助：
func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {
//1. Check We Have An ARPlaneAnchor
guard let planeAnchor = anchor as? ARPlaneAnchor else { return }
//2. Get The Approximate Width & Height Of The Anchor
let width = CGFloat(planeAnchor.extent.x)
let height = CGFloat(planeAnchor.extent.z)
//3. Create A Dummy Wall To Illustrate The Vertical Plane
let dummyWall = SCNNode(geometry: SCNPlane(width: width, height: height))
dummyWall.geometry?.firstMaterial?.diffuse.contents = UIColor.black
dummyWall.opacity = 0.5
dummyWall.eulerAngles.x = -.pi/2
node.addChildNode(dummyWall)
//4. Create A Picture Which Will Be Half The Size Of The Wall
let picture = SCNNode(geometry: SCNPlane(width: width/2, height: height/2))
picture.geometry?.firstMaterial?.diffuse.contents = UIColor.white
//5. Add It To The Dummy Wall (As We Dont Assign A Position It Will Be Centered Automatically At SCNVector3Zero)
dummyWall.addChildNode(picture)
//6. To Prevent Z-Fighting Move The Picture Forward Slightly
picture.position.z = 0.0001
}
您还可以创建辅助函数，例如：
//--------------------------
//MARK: - CGFloat Extensions
//--------------------------
extension CGFloat{
/// Desired Scale Factor
enum Scalar{
case Quarter
case Third
case Half
case ThreeQuarters
case FullSize
var value: CGFloat{
switch self {
case .Quarter: return 0.25
case .Third: return 0.33
case .Half: return 0.5
case .ThreeQuarters: return 0.75
case .FullSize: return 1
}
}
}
/// Returns A CGFloat Based On The Desired Scale
///
/// - Parameter size: Scalar
/// - Returns: CGFloat
func scaledToSize(_ size: Scalar) -> CGFloat {
return self * size.value
}
}
您可以使用它根据锚点的范围缩放图片，例如：
let width = CGFloat(planeAnchor.extent.x)
let height = CGFloat(planeAnchor.extent.z)
let picture = SCNNode(geometry: SCNPlane(width: width.scaledToSize(.ThreeQuarters), height: height.scaledToSize(.ThreeQuarters)))
更新：
由于您无法使该示例正常工作，并且现在已经对您的要求进行了更具体的说明，这里是一个完整的示例（需要进行一些调整），但它应该足以为您指明方向正确方向：
//-----------------------
//MARK: ARSCNViewDelegate
//-----------------------
extension ARViewController: ARSCNViewDelegate{
func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {
if wallAndPictureNode != nil { return }
//1. Check We Have An ARPlaneAnchor
guard let planeAnchor = anchor as? ARPlaneAnchor else { return }
//2. Get The Approximate Width & Height Of The Anchor
let width = CGFloat(planeAnchor.extent.x)
let height = CGFloat(planeAnchor.extent.z)
//3. Create A Dummy Wall To Illustrate The Vertical Plane
let dummyWall = SCNNode(geometry: SCNPlane(width: width, height: height))
dummyWall.geometry?.firstMaterial?.diffuse.contents = UIColor.black
dummyWall.opacity = 0.5
dummyWall.eulerAngles.x = -.pi/2
node.addChildNode(dummyWall)
//4. Create A Picture Which Will Be Half The Size Of The Wall
let picture = SCNNode(geometry: SCNPlane(width: width/2, height: height/2))
picture.geometry?.firstMaterial?.diffuse.contents = UIColor.white
//5. Add It To The Dummy Wall (As We Dont Assign A Position It Will Be Centered Automatically At SCNVector3Zero)
dummyWall.addChildNode(picture)
//6. To Prevent Z-Fighting Move The Picture Forward Slightly
picture.position.z = 0.0001
//7. Set The Wall & Picture Node
wallAndPictureNode = dummyWall
}
}
class ARViewController: UIViewController {
//1. Create A Reference To Our ARSCNView In Our Storyboard Which Displays The Camera Feed
@IBOutlet weak var augmentedRealityView: ARSCNView!
//2. Create Our ARWorld Tracking Configuration
let configuration = ARWorldTrackingConfiguration()
//4. Create Our Session
let augmentedRealitySession = ARSession()
//5. Create Variable To Store Our Wall With The Picture On It
var wallAndPictureNode: SCNNode?
//--------------------
//MARK: View LifeCycle
//--------------------
override func viewDidLoad() {
super.viewDidLoad()
}
override func viewDidAppear(_ animated: Bool) { setupARSession() }
override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() }
//-------------------
//MARK: - Interaction
//-------------------
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
//1. Get The Current Touch Point, Check We Have Our WallAndPictureNode, & Then Check We Have A Valid ARPlaneAnchor
guard let nodeToMove = wallAndPictureNode,
let currentTouchPoint = touches.first?.location(in: self.augmentedRealityView),
let hitTest = augmentedRealityView.hitTest(currentTouchPoint, types: .existingPlane).first else { return }
//3. Move The Wall & Picture
nodeToMove .simdPosition.x = Float(hitTest.worldTransform.columns.3.x)
nodeToMove .simdPosition.z = Float(-hitTest.worldTransform.columns.3.y)
}
//---------------
//MARK: ARSession
//---------------
/// Sets Up The ARSession
func setupARSession(){
//1. Set The AR Session
augmentedRealityView.session = augmentedRealitySession
augmentedRealityView.delegate = self
//2. Conifgure The Type Of Plane Detection
configuration.planeDetection = [.vertical]
//3. Configure The Debug Options
augmentedRealityView.debugOptions = debug(.None)
//4. Run The Session
augmentedRealitySession.run(configuration, options: [.resetTracking, .removeExistingAnchors])
//5. Disable The IdleTimer
UIApplication.shared.isIdleTimerDisabled = true
}
}
希望对您有所帮助...
我正在创建一个从图库中选择图像并使用 ARKit 垂直平面将其放置在墙上的应用程序 detection.I我也能够正确缩放它，但拖动不是预期的那样。另外，我也对图像大小感到困惑。我想要它就像假设墙是 10 英尺，我想放置 3*2 feet.I 的图像引用了许多链接，docs.Below 是渲染和添加位置图像的代码：
func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for
anchor: ARAnchor) {
if nodeWeCanChange == nil{
guard let planeAnchor = anchor as? ARPlaneAnchor else { return
}
let width = CGFloat(planeAnchor.extent.x)
let height = CGFloat(planeAnchor.extent.z)
nodeWeCanChange = SCNNode(geometry: SCNPlane(width: width,
height: height))
nodeWeCanChange?.position = SCNVector3(planeAnchor.center.x, 0,
planeAnchor.center.z)
nodeWeCanChange?.transform = SCNMatrix4MakeRotation(-Float.pi / 2.0, 1.0, 0.0, 0.0)
nodeWeCanChange?.geometry?.firstMaterial?.diffuse.contents = UIColor.white
DispatchQueue.main.async(execute: {
node.addChildNode(self.nodeWeCanChange!)
self.zIndex = (self.nodeWeCanChange?.simdPosition.z)!})
} }
}
func placeImage(image : UIImage){
guard let pointsPerInch = UIScreen.pointsPerInch else{
return}
let pixelWidth = (image.size.width) * (image.scale)
let pixelHeight = (image.size.height) * (image.scale)
let inchWidth = pixelWidth/pointsPerInch
let inchHeight = pixelHeight/pointsPerInch
let widthInMetres = (inchWidth * 2.54) / 100
let heightInMeters = (inchHeight * 2.54) / 100
let photo = SCNPlane(width: (widthInMetres), height: (heightInMeters))
nodeWeCanChange?.geometry = photo
nodeWeCanChange?.geometry?.firstMaterial?.diffuse.contents = image}`
@objc func handleTap(_ gestureRecognize: ThresholdPanGesture)
{
// Function that handles drag
let position = gestureRecognize.location(in: augentedRealityView)
var foundNode:SCNNode? = nil
do {
if gestureRecognize.state == .began {
print("Pan state began")
//let hitTestOptions = [SCNHitTestOption: Any]()
let hitResult: [SCNHitTestResult] = (self.augentedRealityView?.hitTest(gestureRecognize.location(in: self.augentedRealityView), options: nil))!
guard let firstNode = hitResult.first else {
return
}
print("first node =\(firstNode.node)")
if firstNode.node.isEqual(nodeWeCanChange){
foundNode = nodeWeCanChange
print("node found")}
else if (firstNode.node.parent?.isEqual(nodeWeCanChange))!{ print("node found")}
else{ return print("node not found")}
latestTranslatePos = position
}
}
if gestureRecognize.state == .changed{
let deltaX = Float(position.x - latestTranslatePos.x)/700
let deltaY = Float(position.y - latestTranslatePos.y)/700
nodeWeCanChange?.localTranslate(by: SCNVector3Make(deltaX, -deltaY , zIndex))
latestTranslatePos = position
print("Pan State Changed")
}
if gestureRecognize.state == .ended {
print("Done moving object")
let deltaX = Float(position.x - latestTranslatePos.x)/700
let deltaY = Float(position.y - latestTranslatePos.y)/700
nodeWeCanChange?.localTranslate(by: SCNVector3Make(deltaX, -deltaY , zIndex))
latestTranslatePos = position
foundNode = nil
}
}`
任何人都可以帮我解决我所缺少的吗？
这里有两个问题...^__________^.
关于平移 SCNNode 最简单的方法是使用 touches，尽管您可以很容易地修改下面的示例。
假设你的内容放在 ARPlaneAnchor 上，你想在平面上移动它，那么你可以做这样的事情（假设你还选择了一个 SCNNode 作为你的 nodeToDrag) 在我的示例中将是图片：
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
//1. Get The Current Touch Point
guard let currentTouchPoint = touches.first?.location(in: self.augmentedRealityView),
//2. Get The Existing ARPlaneAnchor
let hitTest = augmentedRealityView.hitTest(currentTouchPoint, types: .existingPlane).first else { return }
//3. Convert To World Coordinates
let worldTransform = hitTest.worldTransform
//4. Set The New Position
let newPosition = SCNVector3(worldTransform.columns.3.x, worldTransform.columns.3.y, worldTransform.columns.3.z)
//5. Apply To The Node
nodeToDrag.simdPosition = float3(newPosition.x, newPosition.y, newPosition.z)
}
或者您可以尝试以下操作：
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
//1. Get The Current Touch Point
guard let currentTouchPoint = touches.first?.location(in: self.augmentedRealityView),
//2. Get The Existing ARPlaneAnchor
let hitTest = augmentedRealityView.hitTest(currentTouchPoint, types: .existingPlane).first else { return }
//3. Convert To Local Coordinates
nodeToDrag.simdPosition.x = Float(hitTest.localTransform.columns.3.x)
nodeToDrag.simdPosition.y = Float(-hitTest.localTransform.columns.3.z)
}
关于您的尺寸，您并不完全清楚您想要做什么。然而，这里有一个小例子，其中的注释应该有所帮助：
func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {
//1. Check We Have An ARPlaneAnchor
guard let planeAnchor = anchor as? ARPlaneAnchor else { return }
//2. Get The Approximate Width & Height Of The Anchor
let width = CGFloat(planeAnchor.extent.x)
let height = CGFloat(planeAnchor.extent.z)
//3. Create A Dummy Wall To Illustrate The Vertical Plane
let dummyWall = SCNNode(geometry: SCNPlane(width: width, height: height))
dummyWall.geometry?.firstMaterial?.diffuse.contents = UIColor.black
dummyWall.opacity = 0.5
dummyWall.eulerAngles.x = -.pi/2
node.addChildNode(dummyWall)
//4. Create A Picture Which Will Be Half The Size Of The Wall
let picture = SCNNode(geometry: SCNPlane(width: width/2, height: height/2))
picture.geometry?.firstMaterial?.diffuse.contents = UIColor.white
//5. Add It To The Dummy Wall (As We Dont Assign A Position It Will Be Centered Automatically At SCNVector3Zero)
dummyWall.addChildNode(picture)
//6. To Prevent Z-Fighting Move The Picture Forward Slightly
picture.position.z = 0.0001
}
您还可以创建辅助函数，例如：
//--------------------------
//MARK: - CGFloat Extensions
//--------------------------
extension CGFloat{
/// Desired Scale Factor
enum Scalar{
case Quarter
case Third
case Half
case ThreeQuarters
case FullSize
var value: CGFloat{
switch self {
case .Quarter: return 0.25
case .Third: return 0.33
case .Half: return 0.5
case .ThreeQuarters: return 0.75
case .FullSize: return 1
}
}
}
/// Returns A CGFloat Based On The Desired Scale
///
/// - Parameter size: Scalar
/// - Returns: CGFloat
func scaledToSize(_ size: Scalar) -> CGFloat {
return self * size.value
}
}
您可以使用它根据锚点的范围缩放图片，例如：
let width = CGFloat(planeAnchor.extent.x)
let height = CGFloat(planeAnchor.extent.z)
let picture = SCNNode(geometry: SCNPlane(width: width.scaledToSize(.ThreeQuarters), height: height.scaledToSize(.ThreeQuarters)))
更新：
由于您无法使该示例正常工作，并且现在已经对您的要求进行了更具体的说明，这里是一个完整的示例（需要进行一些调整），但它应该足以为您指明方向正确方向：
//-----------------------
//MARK: ARSCNViewDelegate
//-----------------------
extension ARViewController: ARSCNViewDelegate{
func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {
if wallAndPictureNode != nil { return }
//1. Check We Have An ARPlaneAnchor
guard let planeAnchor = anchor as? ARPlaneAnchor else { return }
//2. Get The Approximate Width & Height Of The Anchor
let width = CGFloat(planeAnchor.extent.x)
let height = CGFloat(planeAnchor.extent.z)
//3. Create A Dummy Wall To Illustrate The Vertical Plane
let dummyWall = SCNNode(geometry: SCNPlane(width: width, height: height))
dummyWall.geometry?.firstMaterial?.diffuse.contents = UIColor.black
dummyWall.opacity = 0.5
dummyWall.eulerAngles.x = -.pi/2
node.addChildNode(dummyWall)
//4. Create A Picture Which Will Be Half The Size Of The Wall
let picture = SCNNode(geometry: SCNPlane(width: width/2, height: height/2))
picture.geometry?.firstMaterial?.diffuse.contents = UIColor.white
//5. Add It To The Dummy Wall (As We Dont Assign A Position It Will Be Centered Automatically At SCNVector3Zero)
dummyWall.addChildNode(picture)
//6. To Prevent Z-Fighting Move The Picture Forward Slightly
picture.position.z = 0.0001
//7. Set The Wall & Picture Node
wallAndPictureNode = dummyWall
}
}
class ARViewController: UIViewController {
//1. Create A Reference To Our ARSCNView In Our Storyboard Which Displays The Camera Feed
@IBOutlet weak var augmentedRealityView: ARSCNView!
//2. Create Our ARWorld Tracking Configuration
let configuration = ARWorldTrackingConfiguration()
//4. Create Our Session
let augmentedRealitySession = ARSession()
//5. Create Variable To Store Our Wall With The Picture On It
var wallAndPictureNode: SCNNode?
//--------------------
//MARK: View LifeCycle
//--------------------
override func viewDidLoad() {
super.viewDidLoad()
}
override func viewDidAppear(_ animated: Bool) { setupARSession() }
override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() }
//-------------------
//MARK: - Interaction
//-------------------
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
//1. Get The Current Touch Point, Check We Have Our WallAndPictureNode, & Then Check We Have A Valid ARPlaneAnchor
guard let nodeToMove = wallAndPictureNode,
let currentTouchPoint = touches.first?.location(in: self.augmentedRealityView),
let hitTest = augmentedRealityView.hitTest(currentTouchPoint, types: .existingPlane).first else { return }
//3. Move The Wall & Picture
nodeToMove .simdPosition.x = Float(hitTest.worldTransform.columns.3.x)
nodeToMove .simdPosition.z = Float(-hitTest.worldTransform.columns.3.y)
}
//---------------
//MARK: ARSession
//---------------
/// Sets Up The ARSession
func setupARSession(){
//1. Set The AR Session
augmentedRealityView.session = augmentedRealitySession
augmentedRealityView.delegate = self
//2. Conifgure The Type Of Plane Detection
configuration.planeDetection = [.vertical]
//3. Configure The Debug Options
augmentedRealityView.debugOptions = debug(.None)
//4. Run The Session
augmentedRealitySession.run(configuration, options: [.resetTracking, .removeExistingAnchors])
//5. Disable The IdleTimer
UIApplication.shared.isIdleTimerDisabled = true
}
}
希望对您有所帮助...