Next.js + React Three Fibre + React Three Three XR + Variant Launch pour développer une application AR compatible WebXR sur iOS!

Je pensais à créer une application AR à l'aide de WebXR, mais la situation actuelle est qu'iOS ne prend pas officiellement en charge Webxr

J'ai donc utilisé Variant Launch, qui a également été présenté dans la réaction officielle React Three, pour prendre également en charge Webxr AR sur iOS.

Cela fonctionne-t-il sur iOS?
WebXR for VR Experiences est pris en charge sur Safari pour Apple Vision Pro. WebXR n'est pas encore pris en charge sur iOS Safari. L'alternative est d'utiliser des produits tels que Variant Launch, qui permettent de créer des expériences WebXR pour iOS.

-traduction

Cela fonctionne-t-il sur iOS?
WebXR for VR Experiences est pris en charge dans Safari sur Apple Vision Pro. WebXR n'est pas pris en charge sur iOS Safari. Au lieu de cela, vous pouvez utiliser des produits tels que Variant Launch, qui vous permet de créer une expérience WebXR pour iOS.

Bien qu'il existe quelques exemples d'implémentations utilisant trois.js seuls, quelques implémentations utilisant React Three ont été trouvées, et il n'y avait pas beaucoup d'exemples de configurations utilisant Next.js, donc je les résume ici.

Il y avait quelques éléments pour se connecter pendant la mise en œuvre, donc j'espère que cela sera utile.

Qu'est-ce que le lancement des variantes?

Variant Launch est une solution pour implémenter WebXR sur iOS, même si iOS Safari ne prend pas officiellement en charge WebXR.

La clé du mécanisme est qu'il utilise clip d'application Plutôt que d'exécuter WebXR sur iOS Safari en tant qu'application Web ordinaire, nous lançons un composant natif dédié via l'application Clip et fournissons l'API WebXR en plus. Cela vous permet d'obtenir des informations sur l'accès à la caméra et les capteurs qui ne peuvent pas être utilisées avec des restrictions iOS normales, et peuvent être utilisées à partir du Web en tant qu'API compatible Webxr standard.

L'application Clip est une fonctionnalité préinstallée sur iOS, et les utilisateurs n'ont pas besoin de télécharger l'application à l'avance. Le clip de l'application sera appelé directement à partir de la page Web et la session Webxr démarre immédiatement.

Si l'application cible (application spéciale pour le lancement de variantes) est déjà installée, WebXR s'exécutera sur cette application plutôt que sur le clip de l'application.

Vous pouvez également lire

Lancement des variantes - Webar sur iOS et Android sans application Lancez votre expérience AR dans le navigateur à partir d'un lien ou d'un code QR. pas d'installation d'application. Aucun coût par vue.

Liste des bibliothèques utilisées

Les bibliothèques utilisées dans ce projet sont les suivantes:
les versions de bibliothèque et les bibliothèques utilisées à des fins de développement autres que WebXR sont également répertoriées dans package.json

Pour d'autres bibliothèques et versions, veuillez lire Package.json.
* La dernière version n'a pas bien fonctionné, j'ai donc un peu abaissé la version.

{"Name": "Glb-ar-Viewer", "Version": "0.1.0", "Private": True, "Scripts": {"Dev": "Next Dev --TurboPack", "Build": "Next Build", "Start": "Next Start", "Lint": "Next Lint": ",", "," @ react-three / drei ":" ". "@ react-trois / fibre": "^ 9.1.2", "@ react-trois / xr": "^ 6.6.17", "Next": "15.3.3", "react": "^ 19.0.0", "react-dom": "^ 19.0.0", "trois": "^ 0.171.0"} " "@ eslint / eslintrc": "^ 3", "@ tailwindcss / postcss": "^ 4", "@ types / nœud": "^ 20", "@ types / react": "^ 19", "@ types / react-dom": "^ 19", "eslint": "^ 9", "Eslint-Cong-NEXT": "15.3", "Tailwindcs" "^ 4", "TypeScript": "^ 5"}}

Construction environnementale

En ce qui concerne la construction de l'environnement, j'ai créé un modèle à l'aide de Create-Next-App

NPX CREATE-NEXT-APP @ DERNIER GLB-AR-VOVIEY NPM Installer trois @ React-Three / Fiber @ React-Three / XR @ React-Three / Drei

Fondamentalement, cette commande devrait être bien, mais si une erreur se produit lors de l'affichage de l'AR, c'est une bonne idée de réduire la version trois.

Implémentation d'une application webxr-ar pour iOS

Une fois l'environnement construit, je voudrais réellement implémenter une application Webxr-AR compatible iOS.
La structure du dossier est la suivante:

GLB-AR-VOIEUR / ├fique Arcanvas.tsx ├sé

S'il y a d'autres endroits que vous souhaitez voir, veuillez consulter Github.

Github

GitHub - Aazutaku / GLB-AR-Viewer: réagir trois fibres x réagir trois xr réagir trois fibres x réagir trois xr. Contribuez au développement Aazutaku / GLB-AR-Viewer en créant un compte sur GitHub.

app / globals.css: configurer la transparence des arrière-plans

Dans WebXR AR, l'arrière-plan doit être transparent et l'image de la caméra s'affiche dans les coulisses.
Cette fois, j'ai utilisé TailwindCSS et configuré le CSS comme suit:

Si c'est NEXT.js, je pense que c'est bien si vous pouviez spécifier "Globals.css" comme suit.

@Import "TailwindCSS"; : root {--background: transparent; --Foreground: # 171717; } @TheMe Inline {--Color-Background: var (- Background); --Color-Foredground: var (- premier plan); --FONT-SANS: var (- font-geist-san); --FONT-MONO: VAR (- FONT-GEIST-MONO); } @media (préfère-Color-Scheme: Dark) {: root {--Background: # 0A0A0A; --Foreground: #eded; }} body {background: var (- background); couleur: var (- premier plan); Font-Family: Arial, Helvetica, Sans-Serif; }

app / Layout.TSX: Préload Variant Lance SDK avec balise de script

Pour utiliser le lancement des variantes, préchargez le SDK de lancement de la variante avec une balise de script dans Layout.TSX.

Importer Type {Metadata} depuis "Suivant"; import {geist, geist_mono} à partir de "suivant / font / google"; import "./globals.css"; Importer le script à partir de "Suivant / Script"; const geistSans = geist ({variable: "--font-geist-san", subset: ["latin"],}); const geistmono = geist_mono ({variable: "--font-geist-mono", subset: ["latin"],}); Exportation const Metadata: Metadata = {Title: "GLB AR Viewer", Description: "Application pour afficher les modèles GLB dans AR",}; Exporter la fonction default rootLayout ({enfants,}: readonly <{enfants: react.reactnode;}>) {return (<html lang="en"><body className={`${geistSans.variable} ${geistMono.variable} antialiased`}> {enfants}</body> {/ * Charging Variant Launch Sdk * /}<Script src="https://launchar.app/sdk/v1?key=xxxxxx&redirect=true" strategy="beforeInteractive" /> </html> ); }

Les points sont les suivants: Si vous pouvez le définir correctement, il redirigera automatiquement vers le lancement des variantes sur iOS.

app / page.tsx: afficher le canevas en utilisant une importation dynamique

la pièce Canvas est chargée uniquement du côté client en utilisant une importation dynamique pour empêcher l'évaluation du code lié à WebXR pendant la SSR (rendu côté serveur)

"Utiliser le client"; importer dynamique à partir de "Suivant / Dynamic"; const arcanvas = dynamic (() => import ("@ / composants / arcanvas"), {ssr: false,}); Exporter la page de fonction par défaut () {return<ARCanvas /> ; }

En définissant
SSR: False S'il devient un SSR, il ne fonctionnera pas dans le lancement des variantes, alors soyez prudent.

composants / arcanvas.tsx: implémentation de la pièce d'affichage AR

Webxr Session Management CreateExrStore local , hit-test et Dom-Overlay sont spécifiés selon lesquels requis les obligations requis lors du démarrage d'une session La toile réagit trois fibres Dessinez avec un composant.

"Utiliser le client"; import {canvas} de "@ react-trois / fibre"; import {xr, createExrStore} à partir de "@ react-trois / xr"; import {UseState} de "réact"; Exporter la fonction default arcanvas () {const [red, setRed] = useState (false); const [store] = useState (() => CreateExrStore ({CustomSessionInit: {requiredFeatures: ["local", "hit-test", "dom-overlay"], facultatifFeatures: ["ancre"], domoverlay: {root: document.body},},})); const handleenterar = async () => {if (store) {attend store.enterar (); }}; retour (<div className="w-screen h-screen relative"><div className="absolute top-4 left-4 z-10 flex gap-4"> <button onClick={handleEnterAR} className="p-3 bg-white text-black rounded" >Entrer AR</button></div><Canvas style={{ backgroundColor: "transparent" }} onCreated={({ gl }) => {gl.xr.enabled = true; gl.xr.setReferencesPaceType ("local"); }}> <XR store={store}><ambientLight /><directionalLight position={[1, 2, 3]} /><mesh pointerEventsType={{ deny: "grab" }} onClick={() => setRed (! Red)} position = {[0, 1, -1]}><boxGeometry /><meshBasicMaterial color={red ? "red" : "blue"} /></mesh></XR></Canvas></div> )); }

Il vous suffit de suivre le guide SDK pour le lancement des variantes, mais il n'y a pas de procédure utilisant React Three's CreateExrStore, alors lisez-le et c'est bien.

Vous pouvez également lire

Variants Docs de lancement - Webar sur iOS et Android sans application Lancez votre expérience AR dans le navigateur à partir d'un lien ou d'un code QR. pas d'installation d'application. Aucun coût par vue.

Résumé des notes

Je pense que le comportement variera en fonction de la version, mais en tant que mémo, j'organiserai les points dans lesquels je me suis fait.

Erreurs dues à SSR (rendu côté serveur)

Next.js effectue SSR par défaut, de sorte que la référence d'un document ou d'une fenêtre entraînera
une référence WebXR est essentiellement une API côté client, de sorte que toutes les parties de dessin sont spécifiées comme "utiliser le client" l'importation dynamique pour désactiver la SSR.

* Android fonctionne également avec SSR, donc si cela ne fonctionne pas sur iOS, vous devriez le vérifier.

const arcanvas = dynamic (() => import ("@ / composants / arcanvas"), {ssr: false,});

gl.xr.setReferencesPacetype ("local") est explicitement spécifié

Vous pouvez indirectement spécifier les références PACETYPE dans CreateExrStore il peut ne pas être automatiquement reflété du gl.xr Ceci est explicitement spécifié pour la stabilité dans iOS et le lancement des variantes.

Je ne connais pas la raison exacte, mais je ne pouvais pas le voir sur iOS à moins que je le spécifie.

gl.xr.setReferencesPaceType ("local");

Paramètres de transparence de fond

Lors de l'exécution de AR avec webxr, les images de la caméra ne seront pas visibles à moins que l'arrière-plan soit transparent. Le corps est réglé sur transparent dans CSS BackgroundColor: "Transparent" spécifié dans Canvas.

: root {--background: transparent; } body {background: var (- background); }

Préchargement du SDK de lancement de la variante

Pour utiliser l'API compatible WebXR sur iOS, j'ai préchargé le SDK de lancement de la variante. Écrivez-le dans
Next.js RootLayout Écrivez simplement ceci et il vous redirigera automatiquement vers le lancement des variantes.

<Script src="https://launchar.app/sdk/v1?key=..." strategy="beforeInteractive" />

Enfin, vérifiez l'opération (confirmée avec iPhone 16)

J'ai vérifié l'opération sur mon iPhone 16 préféré. (Nous avons confirmé qu'il fonctionne également bien sur Android.)

L'affichage AR est affiché avec succès comme indiqué ci-dessous! Bien sûr, je l'ai déjà tapé!

iOS ne prend pas encore en charge WebXR, mais j'ai découvert que l'utilisation du lancement de variantes vous permet d'utiliser webxr sur iOS pseudo uniquement.
C'est un peu des tracas, mais Variant Launch offre 3 000 vues gratuitement, alors assurez-vous de l'essayer!

Ce serait formidable si iOS pouvait également prendre en charge Webxr. . .