ARKit：如何将 UIView 添加到 ARKit 场景？

Question

我正在使用 ARKit 开发一个 AR 项目。

我想在 ARKit 场景中添加一个 UIView。当我点击一个对象时，我想在对象旁边以“弹出窗口”的形式获取信息。此信息位于 UIView 中。

是否可以将此 UIView 添加到 ARKit 场景？ 我将此 UIView 设置为场景，然后我该怎么办？ 我可以给它一个节点，然后将它添加到 ARKit 场景中吗？如果是这样，它是如何工作的？

或者还有其他方法吗？

谢谢！

编辑：我的 SecondViewController 的代码

class InformationViewController: UIViewController {

    @IBOutlet weak var secondView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        self.view = secondView
    }
}

编辑 2：firstViewController 中的代码

guard let secondViewController = storyboard?.instantiateViewController(withIdentifier: "SecondViewController") as? SecondViewController else {
    print ("No secondController")
    return
}

let plane = SCNPlane(width: CGFloat(0.1), height: CGFloat(0.1))       
plane.firstMaterial?.diffuse.contents = secondViewController.view

let node = SCNNode(geometry: plane)

我只得到飞机的白屏，而不是视图。

Answer 1

我现在无法为您提供代码，但这是如何做到的。

1. 创建SCNPlane。
2. 使用您需要的所有元素创建您的UIView。
3. 从UIView 创建图像上下文。
4. 将此图像用作SCNPlane 的素材。

或者更容易制作带有标签的SKScene 并将其添加为SCNPlane 的材料。

Answer 2

要将文本放置在世界中的标签中，请将其绘制成图像，然后将该图像附加到SCNNode。

例如：

let text = "Hello, Stack Overflow."
let font = UIFont(name: "Arial", size: CGFloat(size))
let width = 128
let height = 128

let fontAttrs: [NSAttributedStringKey: Any] = 
[NSAttributedStringKey.font: font as UIFont]

let stringSize = self.text.size(withAttributes: fontAttrs)
let rect = CGRect(x: CGFloat((width / 2.0) - (stringSize.width/2.0)),
                  y: CGFloat((height / 2.0) - (stringSize.height/2.0)),
                  width: CGFloat(stringSize.width),
                  height: CGFloat(stringSize.height))

let renderer = UIGraphicsImageRenderer(size: CGSize(width: CGFloat(width), height: CGFloat(height)))
let image = renderer.image { context in

    let color = UIColor.blue.withAlphaComponent(CGFloat(0.5))

    color.setFill()
    context.fill(rect)

    text.draw(with: rect, options: .usesLineFragmentOrigin, attributes: fontAttrs, context: nil)
}

let plane = SCNPlane(width: CGFloat(0.1), height: CGFloat(0.1))
plane.firstMaterial?.diffuse.contents = image

let node = SCNNode(geometry: plane)

编辑： 我添加了这些行：

let color = UIColor.blue.withAlphaComponent(CGFloat(0.5))

color.setFill()
context.fill(rect)

这可以让您设置背景颜色和不透明度。还有其他方法可以做到这一点 - 也可以让您绘制复杂的形状 - 但这是最​​简单的基本颜色。

编辑 2：添加了对 stringSize 和 rect 的引用

Answer 3

实现这一目标的最简单（尽管未记录）方法是将由视图控制器支持的UIView 设置为SCNPlane（或任何其他几何体上的材质的漫反射内容，但它最适用于平面明显的原因）。

let plane = SCNPlane()
plane.firstMaterial?.diffuse.contents = someViewController.view
let planeNode = SCNNode(geometry: plane)

您必须将视图控制器保存在某个地方，否则它将被释放并且平面将不可见。仅使用 UIView 而不使用任何 UIViewController 将引发错误。

它最好的一点是它保留了所有的手势并且实际上就像一个简单的视图一样工作。例如，如果您使用UITableViewController 的视图，您将能够在场景中直接滚动它。

我还没有在 iOS 10 及更低版本上测试过它，但到目前为止它一直在 iOS 11 上运行。既适用于普通的 SceneKit 场景，也适用于 ARKit。