ARKit - 如何在另一个 SCNNode 中包含 SCNText（语音气泡）

我正在尝试在 ARKit 的语音气泡中创建一个带有简单文本的报价生成器。

我可以用文本显示语音气泡，但文本始终从中间开始并溢出到语音气泡之外。

任何帮助使其在语音气泡的左上角对齐并包裹在语音气泡内的帮助将不胜感激。

Result

Classes

class SpeechBubbleNode: SCNNode {
    private let textNode = TextNode()

    var string: String? {
        didSet {
            textNode.string = string
        }
    }

    override init() {
        super.init()

        // Speech Bubble
        let plane = SCNPlane(width: 200.0, height: 100.0)
        plane.cornerRadius = 4.0
        plane.firstMaterial?.isDoubleSided = true
        geometry = plane

        // Text Node
        textNode.position = SCNVector3(position.x, position.y, position.z + 1.0)
//        textNode.position = convertPosition(SCNVector3(0.0, 0.0, 1.0), to: textNode)
//        textNode.position = SCNVector3(0.0, 0.0, position.z + 1.0)
        addChildNode(textNode)
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
}

class TextNode: SCNNode {
    private let textGeometry = SCNText()

    var string: String? {
        didSet {
            updateTextContainerFrame()
            textGeometry.string = string
        }
    }

    override init() {
        super.init()

        textGeometry.truncationMode = CATextLayerTruncationMode.middle.rawValue
        textGeometry.isWrapped = true
        textGeometry.alignmentMode = CATextLayerAlignmentMode.left.rawValue

        let blackMaterial = SCNMaterial()
        blackMaterial.diffuse.contents = UIColor.black
        blackMaterial.locksAmbientWithDiffuse = true
        textGeometry.materials = [blackMaterial]

        geometry = textGeometry
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    private func updateTextContainerFrame() {
        let (min, max) = boundingBox
        let width = CGFloat(max.x - min.x)
        let height = CGFloat(max.y - min.y)
        print("width :",max.x - min.x,"height :",max.y - min.y,"depth :",max.z - min.z)
        textGeometry.containerFrame = CGRect(x: 0.0, y: 0.0, width: width, height: height)
//        textGeometry.containerFrame = CGRect(origin: .zero, size: CGSize(width: 1.0, height: 1.0))
    }
}

执行

private func makeSpeechBubbleNode(forBobbleheadNode bobbleheadNode: BobbleheadNode) {
    let node = SpeechBubbleNode()
    node.position = sceneView.scene.rootNode.convertPosition(bobbleheadNode.position, to: node)
    node.scale = SCNVector3(0.002, 0.002, 0.002)

    sceneView.scene.rootNode.addChildNode(speechBubbleNode)
    self.speechBubbleNode = speechBubbleNode

    speechBubbleNode.string = "Some random string that could be long and should wrap within speech bubble"
}

我遇到了同样的问题，最后我解决了，如下：

• 创建一个 SCNText 并将其作为几何体添加到 SCNNode：

  let string = "Coverin text with a plane :)"
  let text = SCNText(string: string, extrusionDepth: 0.1)
  text.font = UIFont.systemFont(ofSize: 1)
  text.flatness = 0.005
  let textNode = SCNNode(geometry: text)
  let fontScale: Float = 0.01
  textNode.scale = SCNVector3(fontScale, fontScale, fontScale)
  

• 将文本枢轴从左下角调整到中心 https://stackoverflow.com/a/44829260/1724845:

  let (min, max) = (text.boundingBox.min, text.boundingBox.max)
  let dx = min.x + 0.5 * (max.x - min.x)
  let dy = min.y + 0.5 * (max.y - min.y)
  let dz = min.z + 0.5 * (max.z - min.z)
  textNode.pivot = SCNMatrix4MakeTranslation(dx, dy, dz)
  

• 创建一个 PlaneNode 并将 textNode 添加为 PlaneNode 的子节点：

  let width = (max.x - min.x) * fontScale
  let height = (max.y - min.y) * fontScale
  let plane = SCNPlane(width: CGFloat(width), height: CGFloat(height))
  let planeNode = SCNNode(geometry: plane)
  planeNode.geometry?.firstMaterial?.diffuse.contents = UIColor.green.withAlphaComponent(0.5)
  planeNode.geometry?.firstMaterial?.isDoubleSided = true
  planeNode.position = textNode.position
  textNode.eulerAngles = planeNode.eulerAngles
  planeNode.addChildNode(textNode)
  

• 最后将 PlaneNode 添加到 sceneView 中：

  sceneView.scene.rootNode.addChildNode(planeNode)
  

这就是结果：