tres plataformas
Un proyecto para hacer de TRES una plataforma
El mantenimiento posterior continuará en platformize.
- Actualmente adaptado a los miniprogramas WeChat, Taobao y Byte
- Admite sacudidas de árboles (requiere paquete web, resumen y otras herramientas de compilación)
- Los tipos de VSCode son normales y se puede acceder normalmente a las definiciones de cada clase.
- Adaptarse a ejemplos/jsm/**/*.js, el tipo es normal
- Puede actualizar, degradar la versión o usar TRES personalizados
- Optimización de la memoria de IOS del mini programa WeChat, menos fallas causadas por el cambio de página
- Admite adaptación personalizada de nueva plataforma, solo consulte WechatPlatform para escribir el adaptador
- three-platformize-plugin-wechat admite la reutilización cruzada de complementos de WeChat
Patrocinadores especiales
Yuntu 3D-Software de diseño CAD 3D en línea |
Auburn Future: pionero en el campo de AR/VR |
|
Situación de adaptación
| WeChat | taobao | byte |
|---|
| Mini programa máquina real. | ✔️ | ✔️ | ✔️ |
| Simulador de mini programa | ✔️ | ✔️ | |
| Máquina real de minijuegos. | ✔️ | | |
| Simulador de minijuegos | ✔️ | | |
Auburn está contratando algoritmos de front-end, WebGL y gráficos en el futuro. Le invitamos a enviar su currículum.
MANIFESTACIÓN
Nota: Cuando ejecute la DEMO, recuerde activar el modo de depuración, cancelar la verificación del nombre de dominio y utilizar la última versión de las herramientas de desarrollo de WeChat para abrirlo.
La demostración del uso específico del cargador se encuentra en este repositorio en la demostración de tres plataformas.
DEMOSTRACIÓN del miniprograma WeChat
DEMOSTRACIÓN de la versión básica del mini programa WeChat
DEMOSTRACIÓN del minijuego WeChat | DEMOSTRACIÓN del Mini Programa Taobao | DEMOSTRACIÓN del subprograma de bytes |
|---|
| | |
Módulo probado
Características
- VSMShadow (r131 y versiones anteriores están bien, consulte El índice de bucle no se puede comparar con una expresión no constante)
Cargador
- GLTFLoader (admite GLB texturizado) && (EXT_meshopt_compression, WASM está disponible para Android, la versión ASM está disponible para ios, consulte herramientas) && (KHR_mesh_quantization, disponible para programas pequeños) [Evaluación de compresión de malla] MeshQuan, MeshOpt, Draco (WebAssembly API no Ya no estará disponible después de WeChat 8.0. El uso requiere WXWebAssembly y solo admite wasm en el paquete. Se ha agregado Meshopt_decoder.wasm.module, ver uso)
- Cargador de texturas
- RGBELoader y PMREMGenerator (algunos modelos del miniprograma pueden generar ocasionalmente errores de envMap, que se pueden evitar con HDRPrefilter)
- Cargador SVG
- OBJLoader
- EXRLoader (debe ser compatible con la extensión OES_texture_float_linear, algunas GPU móviles no la admiten)
- MTLLoader (el subprograma puede usar textura JPG)
- DDSLoader (debe ser compatible con la extensión WEBGL_compressed_texture_s3tc, no compatible con GPU móvil)
- LWOLoader (debe ser compatible con la extensión EXT_blend_minmax, la mitad de los efectos del miniprograma se dibujan incorrectamente)
- FBXLoader
- BVHLoder
- ColladaLoader (DOMParser querySelector no adaptado)
- Cargador TTF
- Cargador STLL
- PDBLoader
- TGALoader (use DataTextureLoader en lugar de PR fusionado, r127 disponible)
- VTKLoader
Controles
- Controles de órbita y controles de mapa
- DeviceOrientationControls (onDeviceMotionChange en los miniprogramas WeChat y Taobao, la calidad de los datos devueltos en Android es extremadamente baja y básicamente inutilizable. La comunidad ha recibido comentarios sobre errores durante más de 3 años y el funcionario no tiene intención de solucionarlos)
Módulos no compatibles
- ImageBitmapLoader (el subprograma WeChat no abre ImageBitmap)
Herramientas
- disponer-tres (destruir el nodo
- flip (la captura de pantalla requiere flipY
- captura de pantalla
- trabajador-pool.module (aún no adaptado al subprograma WeChat
- zstddec.worker.module (aún no adaptado al subprograma WeChat
- zstddec.module (aún no adaptado al subprograma WeChat
- toEnvMap (para prefiltro hdr
- meshopt_decoder.asm.module (disponible en el subprograma WeChat
- meshopt_decoder.wasm.module (disponible en el subprograma WeChat
Extensiones
- GLTFGPUCompressedTexture (una alternativa a BasisTextureLoader) La herramienta de generación se obtiene a través de gltf-gpu-compressed-texture (aún no adaptado al subprograma WeChat)
usar
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 } }) experiencia
- El subprograma WeChat no admite imágenes de textura superiores a 2048
- Hay un problema con el subprograma de Taobao que muestra texturas en formato RGB (JPG). Después de cargar la textura a través de TextureLoader, configure textura.format en RGBAFromat (Taobao versión 9.20.0). La razón puede ser que el servidor optimiza imágenes grandes y las comprime. imágenes Hace que el formato cambie de RGB a RGBA.
- r126 no puede configurar la proporción de píxeles completa, se puede configurar a la mitad, o 2, no 3
- Aunque admite la carga de GLB, la imagen se convierte a base64 usando la versión js de ArrayBuffer, lo que requiere mucho tiempo y memoria, aunque puede aliviarse con el codificador de wasm (https://github.com/marcosc90/encoding-. wasm), wasm no procesa cadenas. El rendimiento no es tan bueno como js, probado con wasm compilado con AssemblyScript.
- El bloqueo de IOS antes y después de entrar y salir de la página puede reducir el pixelRatio y aliviarlo.
- IOS WeChat readPixels no admite el suavizado. Si el búfer del lienzo directo necesita desactivar el suavizado (antialias: falso), otro método es WebglRenderTarget. También se puede activar el suavizado, pero el tamaño de la textura es limitado. (El ancho/alto de la textura en Xiaomi 8 no puede exceder 4096, primero debe prestar atención a setSize y luego a setPixelRatio) (para una demostración de captura de pantalla, consulte la DEMOSTRACIÓN del subprograma WeChat)
- El mini programa Taobao tiene una estricta verificación de nombre de dominio y puede usar almacenamiento en la nube para almacenar modelos. Sin embargo, si el modelo y la textura están separados, se recomienda la asociación manual.
- URL polyfill puede usar fileSystemManager para obtener archivos temporales y evitar la conversión de arraybuffer a base64, pero requiere la administración manual de archivos temporales.
- Algunos estudiantes del grupo QQ informaron que la ruta del archivo modelo en el subprograma Taobao de iOS no es compatible con el chino.
lograr
Reemplace las llamadas a la API específicas de la plataforma en el momento de la compilación, reenvíe las referencias a PLATFORM y actualice a través de PLATFORM.set
mantener
¿Cómo actualizar/degradar la versión de 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包
¿Cómo personalizar la plataforma Three?
# 把自定义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
¿Cómo escribir una plataforma personalizada?
Consulte src/WechatPlatform o 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 ( ) {
// 释放资源
}
} HACER
- Deseche más a fondo, reduzca las pérdidas de memoria, se agregaron casos de prueba web, se agregó el subprograma WeChat, IOS todavía tiene problemas de memoria, la página aún fallará después de cambiar varias veces, el modelo iPhone7 de 3 MB se abre 30 veces
- Adaptarse al subprograma Toutiao hecho
- Genere complementos de WeChat y realice la reutilización de códigos de tres en mini programas y complementos de mini programas cruzados a través de complementos realizados en tres plataformas-plugin-wechat
- Adaptarse al minijuego de WeChat hecho
- Adaptarse a ReactNative
conversar
Puedes contactarme a través del grupo DeepKolos
REGISTRO DE CAMBIOS
patrocinador
Si el proyecto le resulta útil o tiene necesidades de adaptación, no dude en darnos una propina.
Gracias por su apoyo~~
| tiempo | Jefe |
|---|
| 2021/11/10 | dios dios |
| 2021/09/27 | Abu |
| 2021/08/10 | Futuro castaño |
| 2021/07/28 | Nada |
| 2021/07/09 | anónimo |
| 2021/07/07 | Nube CAD-Liu Xin |
| 2021/06/23 | Fong |
| 2021/06/23 | Liu Ziqi |
| 2021/06/23 | josón |
| 2021/06/03 | Voltaire biónico |
| 2021/04/28 | Nada |
