NEXT.JS + Reagieren Sie drei Faser + Reagieren Sie drei XR + Variante, um eine webxr -kompatible AR -App auf iOS zu entwickeln!

Ich habe darüber nachgedacht, eine AR -App mit webXR zu erstellen, aber die aktuelle Situation ist, dass iOS webXR nicht offiziell unterstützt

Also habe ich den Variante -Start verwendet, der auch im offiziellen React Three XR vorgestellt wurde, um WebXR AR auf iOS zu unterstützen.

Funktioniert es auf iOS?
WebXR für VR -Erlebnisse wird auf Safari für Apple Vision Pro unterstützt. WebXR wird noch nicht auf iOS safari unterstützt. Die Alternative besteht darin, Produkte wie Variantenstart zu verwenden, mit denen WebXR -Erlebnisse für iOS erstellt werden können.

-Übersetzung

Funktioniert es auf iOS?
WebXR für VR -Erlebnisse wird in Safari über Apple Vision Pro unterstützt. WebXR wird nicht auf iOS safari unterstützt. Stattdessen können Sie Produkte wie Variantenstart verwenden, mit denen Sie ein WebxR -Erlebnis für iOS erstellen können.

Obwohl es einige Beispiele für Implementierungen gibt, die nur drei.Js unter Verwendung von React Three Faser mit drei Fasern unter Verwendung von React gefunden haben, wurden nicht viele Beispiele für Konfigurationen mit Next.js vorhanden, also werde ich sie hier zusammenfassen.

Während der Implementierung gab es ein paar Dinge, auf die man sich ansetzen musste, daher hoffe ich, dass dies hilfreich sein wird.

Was ist der Variantenstart?

Der Variante -Start ist eine Lösung für die Implementierung von WebXR auf iOS, obwohl iOS safari nicht offiziell WebXR unterstützt.

Der Schlüssel zum Mechanismus ist, dass er App Clip Anstatt WebXR auf iOS Safari als reguläre Web -App auszuführen, starten wir eine dedizierte native Komponente über den App -Clip und stellen die WebXR -API darüber an. Auf diese Weise können Sie Informationen zu Zugangs- und Sensorinformationen für Kamera erhalten, die nicht mit normalen iOS -Beschränkungen verwendet werden können und im Web als Standard -WebXR -kompatible API verwendet werden können.

App Clip ist eine vorinstallierte Funktion auf iOS, und Benutzer müssen die App nicht im Voraus herunterladen. Der App -Clip wird direkt von der Webseite aufgerufen und die WebXR -Sitzung beginnt sofort.

Wenn die Ziel -App (spezielle App für den Variantenstart) bereits installiert ist, wird WebXR in dieser App und nicht in der App -Clip ausgeführt.

Möglicherweise möchten Sie auch lesen

Variante Start-Webar auf iOS und Android ohne App Starten Sie Ihr AR-Erlebnis im Browser von einem beliebigen Link oder QR-Code. Keine App -Installation. Keine Kosten pro View.

Liste der verwendeten Bibliotheken

Die in diesem Projekt verwendeten Bibliotheken sind wie folgt:
Bibliotheksversionen und Bibliotheken, die für Entwicklungszwecke als WebXR verwendet werden, sind ebenfalls in package.json

Für andere Bibliotheken und Versionen lesen Sie bitte Package.json.
*Die neueste Version hat nicht gut funktioniert, also habe ich die Version ein wenig gesenkt.

{"Name": "GLB-Ar-Viewer", "Version": "0.1.0", "privat": wahr, "Skripte": {"Dev": "Next Dev--Turbopack", "Build": "Next Build", "Start": "Nächster Start", "Lint": "Nächste Lint"}, "Depells": ":": "@@@@@@@"@@@@@","@@@@@","@@@@@","@@@@@","@@@@","@@@@@","@@@@","@@@@","@@@@@"," | "@react-three/fiber": "^9.1.2", "@react-three/xr": "^6.6.17", "next": "15.3.3", "react": "^19.0.0", "react-dom": "^19.0.0", "three": "^0.171.0" }, "devDependencies": { "@eslint/eslintrc": "^3", "@tailwindcss/postcss": "^4", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", "eslint": "^9", "eslint-config-next": "15.3.3", "tailwindcss": "^4", "TypeScript": "^5"}}

Umweltkonstruktion

In Bezug auf Umgebungskonstruktionen habe ich eine Vorlage mit Create-Next-App

NPX erstellen-next-App @neueste GLB-AR-Viewer NPM.

Grundsätzlich sollte dieser Befehl in Ordnung sein, aber wenn bei der Anzeige von AR ein Fehler auftritt, ist es eine gute Idee, die drei Version zu senken.

Implementierung einer WebXR-AR-App für iOS

Sobald die Umgebung erstellt wurde, möchte ich tatsächlich eine iOS-kompatible WebxR-AR-App implementieren.
Die Ordnerstruktur lautet wie folgt:

glb-ar-viewer/ ├── .next/ ├── node_modules/ ├── public/ ├── src/ ├── app/ │ ├── favicon.ico │ ├── globals.css │ │ ├── layout.tsx │ │ └── pages.tsx │ └── components/ │ └── Arcanvas.tsx ├── .gitignore ├── Eslint.config.mjs ├── Next-ENV.D.TS ├wort.Config.TS ├── Package-Lock.json

Wenn es andere Orte gibt, die Sie sehen möchten, überprüfen Sie bitte GitHub.

Github

Github-Aazutaku/GLB-AR-Viewer: Reagieren Sie drei Faser x Reagieren Sie drei XR React drei Faser x Reagieren Sie drei xr. Tragen Sie zur Entwicklung von Aazutaku/GLB-AR-AR-Viewer bei, indem Sie ein Konto auf GitHub erstellen.

App/Globals.css: Konfigurieren von Hintergrundtransparenz

In WebXR AR muss der Hintergrund transparent sein und das Kamerabild wird hinter den Kulissen angezeigt.
Dieses Mal habe ich Rückenwindcss verwendet und das CSS wie folgt eingerichtet:

Wenn es als nächstes ist.js, denke ich, dass es in Ordnung ist, wenn Sie "Global.css" wie folgt angeben könnten.

@import "Tailwindcss"; : root { -Background: transparent; -Feurground: #171717; } @TheMe Inline {-Color-Background: var (-Hintergrund); -Farbton-Forder: var (-Vordergrund); --font-sans: var (-font-geistsans); --font-mono: var (-font-geist-mono); } @media (bevorzugt Farben-Scheme: dunkel) {: root {-Background: #0a0a0a; -vorgüre: #Eded; }} body {Hintergrund: var (-Hintergrund); Farbe: var (-Vordergrund); Schriftfamilie: Arial, Helvetica, Sans-Serif; }

App/layout.tsx: Variante Vorladung SDK mit Skript -Tag starten

Um den Variantenstart zu verwenden, laden Sie den Varianten -Start -SDK mit einem Skript -Tag in layout.tsx vor.

Importtyp {metadata} aus "next"; importieren {Geist, Geist_Mono} aus "Next/Font/Google"; import "./globals.css"; Skript aus "Next/Skript" importieren; const flesansans = Geist ({variable: "--font-ges-sans", Untergruppen: ["latein"],}); const geistmono = Geist_Mono ({variable: "--font-ges-mono", Untergruppen: ["latein"],}); exportieren const metadata: metadata = {title: "GLB AR Viewer", Beschreibung: "Anwendung zur Anzeige von GLB -Modellen in AR",}; Export -Standardfunktion RootLayout ({Kinder,}: readonly <{childhes: react.reactnode;}>) {return (return (<html lang="en"><body className={`${geistSans.variable} ${geistMono.variable} antialiased`}> {Kinder}</body> {/ * Ladevariante Start SDK */}<Script src="https://launchar.app/sdk/v1?key=xxxxxx&redirect=true" strategy="beforeInteractive" /> </html> ); }

Die Punkte lauten wie folgt: Wenn Sie es richtig einstellen können, wird es automatisch zum Variantenstart auf iOS weitergeleitet.

App/Page.tsx: Leinwand mit Dynamic Import anzeigen

des dynamischen Imports geladen, um zu verhindern, dass WebxR-bezogene Code während der SSR (Server-Side-Rendering) bewertet wird

"Client verwenden"; Dynamik von "Next/Dynamic" importieren; const arcanvas = dynamic (() => import ("@/components/arcanvas"), {ssr: false,}); Standardfunktion exportieren<ARCanvas /> ; }

Durch das Einstellen
von SSR: Falsch Wenn es zu einer SSR wird, funktioniert es nicht im Variantenstart. Seien Sie also vorsichtig.

Komponenten/Arcanvas.tsx: Implementierung des AR -Anzeigeteils

Das WebXR Session Management CreatexRStore lokal , Hit-Test und Dom-Overlay nach Bedarf angegeben, die beim Starten einer Sitzung erforderlich sind Leinwand reagiert drei Faser Zeichnen Sie mit einer Komponente.

"Client verwenden"; importieren {canvas} aus "@react-drei/faser"; importieren {xr, createxrstore} aus "@react-three/xr"; importieren {usestate} aus "react"; Export -Standardfunktion exportieren arcanvas () {const [rot, setRed] = usustate (false); const [store] = usestate (() => createExrstore ({CustomSessionInit: {fordereFeatures: ["Lokal", "Hit-Test", "Dom-Overlay"], OptionalFeatures: ["Anchors"], Domoverlay: {root: Dokument.body},},},}); const handleterar = async () => {if (store) {act store.enterar (); }}; zurückkehren (<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" >Geben Sie AR ein</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 (! rot)} Position = {[0, 1, -1]}><boxGeometry /><meshBasicMaterial color={red ? "red" : "blue"} /></mesh></XR></Canvas></div> ); }

Sie müssen nur den SDK -Handbuch für den Start von Varianten befolgen. Es gibt jedoch keine Prozedur mit React Three XRs createxrstore. Lesen Sie sie also einfach und es ist in Ordnung.

Möglicherweise möchten Sie auch lesen

Variante Startdocs-Webar on iOS und Android ohne App Starten Sie Ihr AR-Erlebnis im Browser von einem beliebigen Link oder QR-Code. Keine App -Installation. Keine Kosten pro View.

Zusammenfassung der Notizen

Ich denke, das Verhalten wird je nach Version variieren, aber als Memo werde ich die Punkte organisieren, in die ich geworden bin.

Fehler aufgrund von SSR (serverseitiges Rendering)

Next.js führt standardmäßig SSR durch. Wenn Sie ein Dokument oder ein Fenster führt dies zu
einem ReferenzError WebXR ist im Grunde eine clientseitige API, sodass alle Zeichnungsteile "Client verwenden" angegeben werden den dynamischen Import , um SSR zu deaktivieren.

*Android arbeitet auch mit SSR zusammen. Wenn es also nicht auf iOS funktioniert, sollten Sie es sich ansehen.

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

GL.XR.SetReferencesPacetype ("Lokal") ist explizit spezifiziert

den Referenzspacetyp in createxrstore indirekt angeben er kann jedoch nicht automatisch auf der GL.xr Dies ist ausdrücklich für die Stabilität im iOS und die Variantenstart spezifiziert.

Ich kenne den genauen Grund nicht, aber ich konnte es auf iOS nicht sehen, es sei denn, ich habe dies angegeben.

gl.xr.setReferencesPacetype ("local");

Hintergrundtransparenzeinstellungen

Bei der Durchführung von AR mit WebXR ist das Kameraaufnahmen nicht sichtbar, es sei denn, der Hintergrund ist transparent. Der Körper in CSS auf transparent eingestellt der Hintergrund: "transparent" in Leinwand angegeben.

: root { -Background: transparent; } Body {Hintergrund: var (-Hintergrund); }

Vorladung des Varianten -Start -SDK

Um die webXR -kompatible API auf iOS zu verwenden, habe ich den Varianten -Start -SDK vorgeladen. Schreiben Sie es in
Next.js RootLayout Schreiben Sie dies einfach und es wird Sie automatisch zum Variantenstart umleiten.

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

Überprüfen Sie schließlich den Vorgang (bestätigt mit iPhone 16)

Ich habe den Vorgang auf meinem Lieblings -iPhone 16 überprüft. (Wir haben bestätigt, dass es auch bei Android gut funktioniert.)

Die AR -Anzeige wird erfolgreich wie unten gezeigt angezeigt! Natürlich habe ich es schon abgebrochen!

iOS unterstützt noch nicht webXR, aber ich habe herausgefunden, dass Sie mit Variantenstart WebXR auf iOS-Pseudo-Nur-Tarif verwenden können.
Es ist ein bisschen mühsam, aber Variante -Start bietet kostenlos 3.000 Aufrufe. Probieren Sie es also aus!

Es wäre großartig, wenn iOS auch WebXR unterstützen könnte. . .