WeChat MiniProgram AR 3D herunterladen - WeChat MiniProgram AR 3D Quellcode herunterladen

WeChat MiniProgram AR 3D

AI-Quellcode

1.0.0

Herunterladen

Chinesische README

Aktualisiert

Datum	Aktualisieren
02.01.2022	Neu: Gamma-Farbraumkorrektur.
07.09.2021	Neu: Eine Kompass- und Kartendemo hinzugefügt. Update: Der Wert der Geräteausrichtungssteuerung unter Android ist im Gegensatz zum Wert unter iOS behoben.
25.02.2021	Neu: Scannen Sie einen QR-Code, um die URL des gltf-Modells zu aktualisieren. Update: 1. Fügen Sie ein gerichtetes Licht für den Modellbetrachter hinzu, damit das Modell Schatten aufweist. 2. Fügen Sie das Pixelverhältnis des Geräts für den Panorama-Viewer hinzu, um das Bild klarer zu machen.
31.10.2019	Aktualisiert: Verwenden Sie einen neuen Gltf-Loader, der von „wechat-miniprogram“ geändert wurde. Unterstützt das .glb-Format ohne Texturen und das .gltf-Format.
17.09.2019	Neu: Ein WeChat MiniProgram 3D, das einen Panorama-Viewer und einen 3D-Viewer mit der Geräteausrichtungssteuerung enthält.

Einführung in WeChat MiniProgram 3D

Three.js ist eine JavaScript-3D-Bibliothek.

Three.js

Es gibt eine an WeChat MiniProgram angepasste Version von Three.js.

ThreeJS-Miniprogramm

Indexseite

Avatar

3D-Viewer

Avatar

Wenn Sie auf die Schaltfläche „Modell-Viewer“ klicken, wird ein 3D-Viewer angezeigt.

Avatar

Wir können den Bildschirm durch eine Steuerung der Geräteausrichtung oder mithilfe von Bewegungen drehen.

Avatar

Panorama-Viewer

Wenn Sie auf die Schaltfläche „Panorama-Viewer“ klicken, wird ein Panorama-Viewer angezeigt.

Hochformatbildschirm

Avatar

Bildschirm im Querformat

Avatar

Wenn Sie eine Gerätebewegung starten, dreht die Geräteausrichtungssteuerung den Bildschirm.

Wenn Sie die Bewegung eines Geräts stoppen, verwenden Sie Bewegungen, um den Bildschirm zu drehen.

Kompass und Kartenbetrachter

Wenn Sie auf die Schaltfläche „Kompass-Viewer“ klicken, werden ein Kompass und eine Karte angezeigt.

Avatar

Durch Klicken auf das Kartensteuerelement wird nach Gebäuden in der Nähe der angeklickten Position gesucht.

Durch die Eingabe von Tickets, Straßen und Sehenswürdigkeiten in das Eingabefeld wird die Suchposition auf der Kartensteuerung lokalisiert.

Wie baut man

Das Miniprogramm hängt von einem „ThreeJS-Miniprogram“-NPM-Paket ab.

Schritt 1: NPM-Installation

Schritt 2: Führen Sie „微信开发者工具--工具--构建npm“ aus. Ein Ordner „miniprogram_npm“ wird aktualisiert.

Das Projekt enthält einen vorkompilierten Ordner „miniprogram_npm“.

Datei: /package.json

  "dependencies" : {
    "threejs-miniprogram" : "0.0.2"
  }

Was ändert sich an GLTFLoader.js?

Sie können in GLTFLoader.js nach dem Schlüsselwort „2019.9.11 geändert“ suchen. Das Suchergebnis ist ein geänderter Code.

Beispielsweise wurde ein Export der Funktion „GLTF_Loader“ hinzugefügt. Verwenden Sie die Funktion, um das Objekt „THREE“ im Modul „GLTFLoader.js“ festzulegen.

Datei: /utils/GLTFLoader.js

   // 2019.9.11 modified
   // THREE.GLTFLoader = ( function () {
   export function GLTF_Loader ( THREE ) {

Legen Sie die URL Ihrer Website für Modelle fest

Das Projekt umfasst ein GLTF-Modell, das auf einer Website bereitgestellt wird. Der Standardwert des Parameters „modelUrl“ ist eine Website-URL, die in Ihrem Netzwerk möglicherweise sehr langsam ist. Sie können die Standard-URL durch eine Website-URL ersetzen.

Modelle herunterladen: https://github.com/sanyuered/sanyuered.github.io/tree/master/gltf

    // set your site url of a gltf model
    const modelUrl = 'https://sanyuered.github.io/gltf/robot.glb' ;
    //const modelUrl = 'http://127.0.0.1/robot.glb';

Expandieren

Zusätzliche Informationen