Startseite>Programmierbezogen>AI-Quellcode
Herunterladen

dreiplattformig

Ein Projekt, um THREE zu einer Plattform zu machen

Nachfolgende Wartungsarbeiten werden auf platformize fortgesetzt

  1. Derzeit angepasst an die Miniprogramme WeChat, Taobao und Byte
  2. Unterstützt Tree Shaking (erfordert Webpack, Rollup und andere Build-Tools)
  3. VSCode-Typen sind normal und auf die Definitionen jeder Klasse kann normal zugegriffen werden.
  4. Passen Sie sich an examples/jsm/**/*.js an, der Typ ist normal
  5. Kann die Version upgraden, downgraden oder benutzerdefinierte DREI verwenden
  6. WeChat Mini-Programm IOS-Speicheroptimierung, weniger Abstürze durch Seitenwechsel
  7. Unterstützt die angepasste Anpassung neuer Plattformen. Wenden Sie sich einfach an WechatPlatform, um den Adapter zu schreiben
  8. three-platformize-plugin-wechat unterstützt die Plugin-übergreifende Wiederverwendung von WeChat-Plug-Ins

Besondere Sponsoren


Yuntu 3D-Online 3D-CAD-Designsoftware
Auburn Future – ein Pionier im Bereich AR/VR

Anpassungssituation

WeChat Taobao Byte
Mini-Programm echte Maschine ✔️ ✔️ ✔️
Mini-Programmsimulator ✔️ ✔️
Minispiel echte Maschine ✔️
Minispielsimulator ✔️

Auburn rekrutiert in Zukunft Frontend-, WebGL- und Grafikalgorithmen. Sie können gerne Ihren Lebenslauf einreichen.

DEMO

Hinweis: Denken Sie beim Ausführen von DEMO daran, den Debugging-Modus zu aktivieren, die Überprüfung des Domänennamens abzubrechen und zum Öffnen die neueste Version der WeChat-Entwicklungstools zu verwenden.

Eine Demo der spezifischen Loader-Nutzung finden Sie in diesem Repository unter three-platformize-demo

WeChat Mini-Programm DEMO
Basisversion des WeChat-Miniprogramms DEMO
WeChat-Minispiel DEMO		 Taobao Mini-Programm DEMO Byte-Applet DEMO

Getestetes Modul

Merkmale

  1. VSMShadow (r131 und frühere Versionen sind in Ordnung, siehe Schleifenindex kann nicht mit nicht konstantem Ausdruck verglichen werden)

Lader

  1. GLTFLoader (unterstützt texturiertes GLB) && (EXT_meshopt_compression, WASM ist für Android verfügbar, ASM-Version ist für iOS verfügbar, siehe Tools) && (KHR_mesh_quantization, verfügbar für kleine Programme) [Mesh-Komprimierungsbewertung] MeshQuan, MeshOpt, Draco (WebAssembly-API ist Nr Nach WeChat 8.0 nicht mehr verfügbar. Die Verwendung erfordert WXWebAssembly und unterstützt nur wasm im Paket. Meshopt_decoder.wasm.module wurde hinzugefügt, siehe Verwendung)
  2. TextureLoader
  3. RGBELoader & PMREMGenerator (einige Modelle des Miniprogramms können gelegentlich envMap-Fehler erzeugen, die mit HDRPrefilter vermieden werden können)
  4. SVGLoader
  5. OBJLoader
  6. EXRLoader (muss die Erweiterung OES_texture_float_linear unterstützen, einige mobile GPUs unterstützen sie nicht)
  7. MTLLoader (das Applet kann JPG-Textur verwenden)
  8. DDSLoader (muss die Erweiterung WEBGL_compressed_texture_s3tc unterstützen, wird von der mobilen GPU nicht unterstützt)
  9. LWOLoader (muss die Erweiterung EXT_blend_minmax unterstützen, die Hälfte der Effekte des Miniprogramms wird falsch gezeichnet)
  10. FBCLoader
  11. BVHLader
  12. ColladaLoader (DOMParser querySelector nicht angepasst)
  13. TTFLoader
  14. STLLoader
  15. PDBLoader
  16. TGALoader (verwenden Sie DataTextureLoader anstelle von PR zusammengeführt, r127 verfügbar)
  17. VTKLoader

Kontrollen

  1. OrbitControls & MapControls
  2. DeviceOrientationControls (onDeviceMotionChange unter WeChat und Taobao-Miniprogrammen, die Qualität der zurückgegebenen Daten unter Android ist extrem niedrig und grundsätzlich unbrauchbar. Das Community-Bug-Feedback gibt es schon seit mehr als 3 Jahren, und der Beamte hat nicht die Absicht, es zu beheben)

Module werden nicht unterstützt

  1. ImageBitmapLoader (WeChat-Applet öffnet ImageBitmap nicht)

Werkzeuge

  1. entsorgen-drei (Knoten zerstören
  2. flip (Screenshot erfordert flipY
  3. Screenshot
  4. worker-pool.module (noch nicht an das WeChat-Applet angepasst
  5. zstddec.worker.module (noch nicht an das WeChat-Applet angepasst
  6. zstddec.module (noch nicht an das WeChat-Applet angepasst
  7. toEnvMap (für HDR-Vorfilter
  8. meshopt_decoder.asm.module (verfügbar im WeChat-Applet
  9. meshopt_decoder.wasm.module (verfügbar im WeChat-Applet

Erweiterungen

  1. GLTFGPUCompressedTexture (eine Alternative zu BasisTextureLoader) Das Generierungstool wird über gltf-gpu-compressed-texture erhalten (noch nicht an das WeChat-Applet angepasst).

verwenden 

 import * as THREE from 'three-platformize' ;
import WechatPlatform from 'three-platformize/src/WechatPlatform' ;

const platform = new WechatPlatform ( canvas ) ; // webgl canvas

platform . enableDeviceOrientation ( 'game' ) ; // 开启DeviceOrientation
THREE . PLATFORM . set ( platform ) ;

// 使用完毕后释放资源
THREE . PLATFORM . dispose ( ) ;

// 正常使用three即可
// DEMO 代码示例见 https://github.com/deepkolos/three-platformize-demo
// 基础的使用DEMO见 https://github.com/deepkolos/three-platformize-demo-wechat-simple
// 生产环境时rollup.config.js里请开启teser压缩, 即plugins末尾增加 terser({ output: { comments: false } })

Erfahrung

  1. Das WeChat-Applet unterstützt keine Texturbilder über 2048
  2. Es gibt ein Problem mit der Anzeige von Texturen im RGB-Format (JPG). Stellen Sie „texture.format“ auf „RGBAFromat“ (Taobao-Version 9.20.0). Der Grund dafür kann sein, dass der Server große Bilder optimiert und komprimiert Bilder Bewirkt, dass das Format von RGB zu RGBA geändert wird
  3. r126 kann nicht das volle Pixelverhältnis einstellen, es kann auf die Hälfte oder 2, nicht 3, eingestellt werden
  4. Obwohl das Laden von GLB unterstützt wird, wird das Bild mithilfe der js-Version von ArrayBuffer in Base64 konvertiert, was zeitaufwändig ist und Speicher beansprucht. Dies kann jedoch durch den Encoder von wasm gemildert werden (https://github.com/marcosc90/encoding-). wasm), wasm verarbeitet keine Zeichenfolgen. Die Leistung ist nicht so gut wie bei js, getestet mit wasm, kompiliert mit AssemblyScript
  5. Der Absturz von IOS vor und nach dem Betreten und Verlassen der Seite kann das PixelRatio verringern und lindern
  6. IOS WeChat readPixels unterstützt kein Anti-Aliasing (Antialias: false), eine andere Methode ist WebglRenderTarget, aber die Texturgröße ist begrenzt (Texturbreite/-höhe unter Xiaomi 8 Es darf 4096 nicht überschreiten, Sie müssen zuerst auf setSize und dann auf setPixelRatio achten) (für Screenshot-Demo siehe WeChat-Applet-DEMO)
  7. Das Taobao Mini-Programm verfügt über eine strikte Domänennamenüberprüfung und kann Cloud-Speicher zum Speichern von Modellen verwenden. Wenn Modell und Textur jedoch getrennt sind, ist eine manuelle Zuordnung erforderlich.
  8. URL-Polyfill kann fileSystemManager verwenden, um temporäre Dateien abzurufen, um die Konvertierung von Arraybuffer in Base64 zu vermeiden, erfordert jedoch eine manuelle Verwaltung temporärer Dateien.
  9. Einige Schüler der QQ-Gruppe berichteten, dass der Modelldateipfad im iOS-Taobao-Applet kein Chinesisch unterstützt.

erreichen

Ersetzen Sie plattformspezifische API-Aufrufe zur Erstellungszeit, leiten Sie Referenzen an PLATFORM weiter und aktualisieren Sie sie über PLATFORM.set

pflegen

Wie aktualisiere/downgrade ich die Version von Three? 

 # 拉取源码
> git clone https://github.com/deepkolos/three-platformize

# 安装依赖
> npm i

# 更新到最新的three版本
> npm i -S three@latest
# 或者指定three版本
> npm i -S [email protected]
# 需要把目标three的构建`utils/build/rollup.config.js`同步到本项目的构建`config/rollup.config.three-origin.js`

# 建立软链接
> npm run link

# 构建
> npm run build

# 使用
> npm link

# 到使用的项目目录，并链接
> cd your-project
> npm link three-platformize

# 或者自行发NPM包

Wie kann man drei Plattformen anpassen? 

 # 把自定义Three link 到./three
> npx symlink-dir yourthree ./three

# 不使用软链接直接复制或者git submodule也可以
> cp yourthree ./three

# 复制对应版本three构建配置替换到rollup.config.three-origin.js
> cp yourthree/utils/build/rollup.config.js ./config/rollup.config.three-origin.js

# 构建
> npm run build

Wie schreibe ich eine benutzerdefinierte Plattform?

Bitte beachten Sie src/WechatPlatform oder src/TaobaoPlatform 

 class CustomPlatform {
  getGlobals ( ) {
    // 自定义的polyfill
    return {
      atob ,
      Blob ,
      window ,
      document ,
      XMLHttpRequest ,
      OffscreenCanvas ,
      HTMLCanvasElement ,
      createImageBitmap ,
    } ;
  }

  setWebGLExtensions ( ) {
    return {
      // 可覆盖gl返回值，比如淘宝小程序IOS返回值不为null，但是扩展不可用的bug
      EXT_blend_minmax : null ,
    } ;
  }

  dispose ( ) {
    // 释放资源
  }
}

TODO

  1. Gründlicher entsorgen, Speicherlecks reduzieren, Webtestfälle wurden hinzugefügt, WeChat-Applet wurde hinzugefügt, IOS hat immer noch Speicherprobleme, die Seite stürzt nach mehrmaligem Wechsel immer noch ab, das 3-MB-Modell iPhone7 wird 30 Mal geöffnet
  2. Anpassung an das Toutiao-Applet abgeschlossen
  3. Generieren Sie WeChat-Plug-Ins und realisieren Sie die Wiederverwendung von Three-Code über Miniprogramme hinweg und über Miniprogramm-Plug-Ins hinweg durch Plug-Ins, die Three-Platformize-Plugin-Wechat erstellt haben
  4. Anpassung an das WeChat-Minispiel abgeschlossen
  5. An ReactNative anpassen

diskutieren

Sie können mich über die Gruppe DeepKolos kontaktieren

CHANGELOG

Sponsor

Wenn das Projekt für Sie hilfreich ist oder Anpassungsbedarf besteht, geben Sie gerne ein Trinkgeld.

Vielen Dank für Ihre Unterstützung~~

Zeit Chef
10.11.2021 Gott Gott
27.09.2021 Abu
10.08.2021 Auburn Zukunft
28.07.2021 Nichts1ng
09.07.2021 anonym
07.07.2021 Cloud CAD-Liu Xin
23.06.2021 Fong
23.06.2021 Liu Ziqi
23.06.2021 Joson
03.06.2021 Bionischer Voltaire
28.04.2021 Nichts1ng
Expandieren
Zusätzliche Informationen
Ähnliche Anwendungen
Empfohlen für Sie
Ähnliche Nachrichten Alle