De Reality Composer vers XCode et au-delà !

Maintenant que vous avez un début de scène dans Reality Composer qui fonctionne, il est intéressant de transformer tout ça en une vraie application.
Xcode automatise l'ensemble du processus et génère le code requis. Tout ce que vous avez à faire est de créer un nouveau projet Xcode en utilisant le template d'application de réalité augmentée et d'importer le fichier votre fichier .rcproject
de Reality Composer dans le projet.
Passez sur Xcode et créez un nouveau projet.

Choisissez le template Augmented Reality App et nommez le projet ARPlayground par exemple.

Sélectionnez RealityKit et choisissez SwiftUI pour l'interface.

Par défaut, Xcode génère le fichier Experience.rcproject, qui contient uniquement une boîte 3D. Nous allons remplacer ce fichier par notre propre fichier .rcproject. Par conséquent, sélectionnez Experience.rcproject et appuyez sur Supprimer pour le mettre à la corbeille (pas la peine de supprimer les références).

Faites maintenant glisser le fichier votre .rcproject
que vous avez créé avec Reality Composer vers le navigateur du projet. Xcode va générer automatiquement le code dont vous avez besoin pour manipuler la scène et les objets virtuels.
Il ne manque plus que d'éditer quelques lignes de code pour ouvrir la scène. Ouvrez ContentView.swift et faites défiler jusqu'à la structure ARViewContainer
. Remplacez la fonction makeUIView(context :)
comme ceci :
func makeUIView(context: Context) -> ARView {
let arView = ARView(frame: .zero)
let anchor = try! votre_fichier.loadScène()
// Add the box anchor to the scene
arView.scene.anchors.append(anchor)
return arView
}
Dans le code ci-dessus, vous appelez la méthode loadScene pour obtenir l'ancre de la scène de Reality Composer. Vous ajoutez ensuite cette ancre à la liste d'ancres de votre scène AR.
Il est temps de build le projet et de le tester sur un véritable iPhone !

Source (en anglais) :

Pour aller plus loin

Une fois le projet exporté vous pourrez toujours le modifier dans Reality Composer avec le bouton ci-dessous :

Attention, n'oubliez pas de nommer vos objets dans Reality Composer :

Comme ça, par exemple :

Ensuite si vous voulez récupérer spécifiquement l'objet pour lui appliquer une animation ou tout autres choses en faites, il suffit de faire :
// Add the anchor to the scene
arView.scene.anchors.append(anchor)
let rotation = Transform(pitch: 0, yaw: 0, roll: .pi)
anchor.cherry?.move(to: rotation,
relativeTo: anchor.cherry,
duration: 60.0,
timingFunction: .linear)
Dans mon cas, cela fait tourner l'objet cherry
sur elle-même pendant une minute. Ce lien StackOverflow détail un peu plus le processus notamment pour charger des animations importer directement depuis l'objet 3D.
Sachez que vous pouvez appliquer toutes sortes d'interactions avec tous les objets de votre scène. Comme des effets d'apparition, de déplacement, des gestes, des changements de taille, etc. Pour faire tout ça et aller encore plus loin dans la customisation d'expérience AR avec RealityKit je vous conseille cet article :


Enfin, si vous préférez repartir de zéro (Ce que ne je ne vous conseille pas) et faire tout vous-même vous pouvez suivre ce tutoriel :

Récupérer une interaction de Reality Composer depuis XCode
Dans Reality Composer créez votre comportement personnalisé avec comme interaction une notification et nommez-la (ici onCherryTapped) :

Depuis XCode définissez une fonction qui défini le code à exécuter quand la notification est reçue :
func handleTapOnEntity(_ entity: Entity?) {
guard let entity = entity else { return }
print("onTap!")
}
Puis abonnez-vous à la notification comme cela dans la fonction makeUIView
:
anchor.actions.onCherryTapped.onAction = handleTapOnEntity(_:)
Charger plusieurs ancres dans la même scène
Dans un premier temps il suffit de créer autant de projet que d'ancre voulue puis des glissés les .rcproject
dans le projet XCode :

Puis dans la fonction makeUIView
:
let noelFlantierAnchor = try! NoelFlantier.loadScène()
let oss117Anchor = try! OSS117.loadScène()
// Add the anchor to the scene
arView.scene.anchors.append(noelFlantierAnchor)
arView.scene.anchors.append(oss117Anchor)
Et voila !