How can i add a 2dView having text in ARkit scene iOS

Developer picture Developer · Jul 26, 2017 · Viewed 8.1k times · Source

How can i add a 2dView having text in ARkit scene iOS.How can i add that view in top of a node that won't rotate when we rotate the node.enter image description here

Answer

jlsiewert picture jlsiewert · Jul 26, 2017

You can add a SCNPlane and use a SCNLookAtConstraint to so that the plane always looks at the camera.

You can create a custom material and set it's material properties to:

  • A color (UIColor or CGColor), specifying a constant color across the material’s surface A number (

  • An image (UIImage or CGImage), specifying a texture to be mapped across the material’s surface

  • A Core Animation layer (CALayer)
  • A texture (SKTexture, MDLTexture, MTLTexture, or GLKTextureInfo)
  • A SpriteKit scene (SKScene)

You can also display animated contents using CoreAnimation or SpriteKit but

SceneKit cannot use a layer that is already being displayed elsewhere (for example, the backing layer of a UIView object)


Here is an example using SpriteKit:

  1. Create your SpriteKit Scene:

e.g.:

let skScene = SKScene(size: CGSize(width: 200, height: 200))
skScene.backgroundColor = UIColor.clear

let rectangle = SKShapeNode(rect: CGRect(x: 0, y: 0, width: 200, height: 200), cornerRadius: 10)
rectangle.fillColor = #colorLiteral(red: 0.807843148708344, green: 0.0274509806185961, blue: 0.333333343267441, alpha: 1.0)
rectangle.strokeColor = #colorLiteral(red: 0.439215689897537, green: 0.0117647061124444, blue: 0.192156866192818, alpha: 1.0)
rectangle.lineWidth = 5
rectangle.alpha = 0.4
let labelNode = SKLabelNode(text: "Hello World")
labelNode.fontSize = 20
labelNode.fontName = "San Fransisco"
labelNode.position = CGPoint(x:100,y:100)
skScene.addChild(rectangle)
skScene.addChild(labelNode)
  1. Create your plane and set the scene as your material property

e.g.

let plane = SCNPlane(width: 20, height: 20)
let material = SCNMaterial()
material.isDoubleSided = true
material.diffuse.contents = skScene
plane.materials = [material]
let node = SCNNode(geometry: plane)
scene.rootNode.addChildNode(node)
  1. Animate your scene

e.g.

labelNode.run(SKAction.repeatForever(SKAction.rotate(byAngle: .pi, duration: 2)))

enter image description here