Drawing text across sphere in SceneKit

Question

I just started out using SceneKit in my UIKit app with the aim of displaying and manipulating some 3D models. I need to show a sphere with some short text written across it. I am rendering the sphere like this:

let sphereGeometry = SCNSphere(radius: 1)
let sphereNode = SCNNode(geometry: sphereGeometry)
sphereNode.position = SCNVector3(x: -1, y: 0, z: 8)
sphereGeometry.firstMaterial?.diffuse.contents = UIColor.cyan

self.rootNode.addChildNode(sphereNode)

I tried using a CATextLayer to achieve what I need but I've had little luck. What is the proper way to do this?

Answer 1

You can wrap text around the surface of an object by creating an image containing text, for example,

and then loading and assigning the image to the diffuse's contents property by

    let sphereGeometry = SCNSphere(radius: 1)
    let sphereNode = SCNNode(geometry: sphereGeometry)
    sphereNode.position = SCNVector3(x: 0, y: 0, z: 0)

    if let textImage = UIImage(named:"TextImage") {
        sphereGeometry.firstMaterial?.diffuse.contents = textImage
    }

    scene.rootNode.addChildNode(sphereNode)

Alternatively, you can programmatically create an image with text by

func imageWithText(text:String, fontSize:CGFloat = 150, fontColor:UIColor = .black, imageSize:CGSize, backgroundColor:UIColor) -> UIImage? {

    let imageRect = CGRect(origin: CGPoint.zero, size: imageSize)
    UIGraphicsBeginImageContext(imageSize)

    defer {
        UIGraphicsEndImageContext()
    }

    guard let context = UIGraphicsGetCurrentContext() else {
        return nil
    }

    // Fill the background with a color
    context.setFillColor(backgroundColor.cgColor)
    context.fill(imageRect)

    let paragraphStyle = NSMutableParagraphStyle()
    paragraphStyle.alignment = .center

    // Define the attributes of the text
    let attributes = [
        NSFontAttributeName: UIFont(name: "TimesNewRomanPS-BoldMT", size:fontSize),
        NSParagraphStyleAttributeName: paragraphStyle,
        NSForegroundColorAttributeName: fontColor
    ]

    // Determine the width/height of the text for the attributes
    let textSize = text.size(attributes: attributes)

    // Draw text in the current context
    text.draw(at: CGPoint(x: imageSize.width/2 - textSize.width/2, y: imageSize.height/2 - textSize.height/2), withAttributes: attributes)

    if let image = UIGraphicsGetImageFromCurrentImageContext() {
        return image
    }
    return nil
}

and apply the image to the sphere with

    let sphereGeometry = SCNSphere(radius: 1)
    let sphereNode = SCNNode(geometry: sphereGeometry)
    sphereNode.position = SCNVector3(x: 0, y: 0, z: 0)

    if let image = imageWithText(text: "Hello, World!", imageSize: CGSize(width:1024,height:1024), backgroundColor: .cyan) {
        sphereGeometry.firstMaterial?.diffuse.contents = image
    }

    scene.rootNode.addChildNode(sphereNode)