How to show texture inside USDZ model's frame?

Question

I'm using below code to show image in .usdz model image frame

var imageMaterial = UnlitMaterial()
imageMaterial.color = .init(tint: .white, texture: .init(texture))
modelEntity.model?.materials = [imageMaterial]        
anchorEntity.addChild(modelEntity)

The issue is that image is showing on frame border as well but we need to show in image inside frame not on frame border.

Frame.usdz file:

Frame after adding image:

Answer 1

If the frame and its canvas is a single object (so called mono-model), then you cannot apply a texture to just the surface of the canvas. You need the canvas to be a separate part. The simplest solution in this case would be to create a Plane primitive and apply a texture to it. Then transform the plane as needed and attach it to the same anchor.

import UIKit
import RealityKit

class ViewController: UIViewController {
    
    @IBOutlet var arView: ARView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let frameEntity = try! Entity.loadModel(named: "frame.usdz")
        
        let canvas: MeshResource = .generatePlane(width: 0.3, height: 0.4)
        var material = SimpleMaterial()
        material.color = try! .init(texture: .init(.load(named: "canvas")))
        
        let canvasEntity = ModelEntity(mesh: canvas, materials: [material])
        canvasEntity.position = [0.3, 0.1, 0.0]
        canvasEntity.scale *= 1.25
        
        let anchorEntity = AnchorEntity()
        anchorEntity.addChild(frameEntity)
        anchorEntity.addChild(canvasEntity)
        arView.scene.anchors.append(anchorEntity)
    }
}