How to add words（comment） on 3D model in Scenekit ？

Question

I showed a 3D model in my app with Scenekit. The model could rotate, scale, move by gesture. Now I need to add some comments on screen to explain every part of the model is what(such as a cardiac module, includes cardiac muscle, blood vessel...). The comments should always follow the part of model, when the model transform, and word's size will not change, always face to User . But I do not know how to achieved that.

My idea is to make 3D world coordinate to screen coordinate , and add UILabels on SCNView, when model transforms, change UILabels frame. But I don't know how to make coordinate convert. Of course, it could be a better way , I don't know. Thanks.

Answer 1

This snippet is taken from an ARKit project, but with respect to having a text label attached to an SCNNode and always facing the user, this is what you need -

func renderer(_ renderer: SCNSceneRenderer, nodeFor anchor: ARAnchor) -> SCNNode? {
        guard let featureAnchor = anchor as? FeatureAnchor else {
            return nil
        }
        let feature = featureAnchor.feature

        let billboardConstraint = SCNBillboardConstraint()
        billboardConstraint.freeAxes = SCNBillboardAxis.Y

        let sphere = SCNSphere(radius: Global.dotRadius)
        sphere.firstMaterial?.transparency = Global.annotationTransparency
        sphere.firstMaterial?.diffuse.contents = UIColor.yellow
        sphere.firstMaterial?.specular.contents = UIColor.white
        let node = SCNNode(geometry: sphere)
        node.constraints = [billboardConstraint]

        let text = SCNText(string: feature.description, extrusionDepth: Global.textDepth)
        text.chamferRadius = Global.textDepth
        text.firstMaterial?.transparency = Global.annotationTransparency
        text.firstMaterial?.diffuse.contents = UIColor.green
        text.firstMaterial?.specular.contents = UIColor.white
        text.firstMaterial?.isDoubleSided = true
        text.font = Global.textFont
        text.alignmentMode = kCAAlignmentCenter

        let (min, max) = text.boundingBox
        let dx: Float = (max.x - min.x) / 2.0 // x = center
        let dy: Float = min.y // y = bottom
        let dz: Float = Float(Global.textDepth) / 2.0 // z = center

        let textNode = SCNNode(geometry: text)
        textNode.pivot = SCNMatrix4MakeTranslation(dx, dy, dz)
        textNode.scale = SCNVector3Make(Global.textScale, Global.textScale, Global.textScale)

        node.addChildNode(textNode)

        return node
    }