หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>โค้ดแหล่งที่มา AI
ดาวน์โหลด

สามแพลตฟอร์ม

โครงการสร้าง THREE ให้เป็นแพลตฟอร์ม

การบำรุงรักษาครั้งต่อไปจะดำเนินต่อไปบนแพลตฟอร์ม

  1. ปัจจุบันปรับให้เข้ากับโปรแกรมขนาดเล็กของ WeChat, Taobao และ Byte
  2. รองรับการสั่นของต้นไม้ (ต้องใช้ webpack, rollup และเครื่องมือสร้างอื่น ๆ )
  3. ประเภท VSCode เป็นเรื่องปกติและสามารถเข้าถึงคำจำกัดความของแต่ละคลาสได้ตามปกติ
  4. ปรับให้เข้ากับ examples/jsm/**/*.js ประเภทเป็นเรื่องปกติ
  5. สามารถอัปเกรด ดาวน์เกรดเวอร์ชัน หรือใช้ THREE แบบกำหนดเองได้
  6. มินิโปรแกรม WeChat การเพิ่มประสิทธิภาพหน่วยความจำ IOS ลดข้อขัดข้องที่เกิดจากการสลับหน้า
  7. รองรับการปรับแพลตฟอร์มใหม่ที่กำหนดเอง เพียงอ้างอิง WechatPlatform เพื่อเขียนอะแดปเตอร์
  8. three-platformize-plugin-wechat รองรับการใช้ปลั๊กอิน WeChat แบบข้ามปลั๊กอินซ้ำ

ผู้สนับสนุนพิเศษ


ซอฟต์แวร์ออกแบบ Yuntu 3D-Online 3D CAD
Auburn Future ผู้บุกเบิกด้าน AR/VR

สถานการณ์การปรับตัว

วีแชท เถาเป่า ไบต์
มินิโปรแกรมเครื่องจริง
โปรแกรมจำลองขนาดเล็ก
มินิเกมเครื่องจริง
มินิเกมจำลอง

Auburn กำลังรับสมัครส่วนหน้า, WebGL และอัลกอริธึมกราฟิกในอนาคต คุณสามารถส่งเรซูเม่ของคุณได้

สาธิต

หมายเหตุ: เมื่อใช้งาน DEMO อย่าลืมเปิดโหมดแก้ไขข้อบกพร่อง ยกเลิกการตรวจสอบชื่อโดเมน และใช้เครื่องมือพัฒนา WeChat เวอร์ชันล่าสุด เพื่อเปิด

การสาธิตการใช้งาน Loader เฉพาะอยู่ในพื้นที่เก็บข้อมูลนี้ภายใต้ three-platformize-demo

การสาธิตโปรแกรม WeChat Mini
WeChat mini program เวอร์ชันพื้นฐาน DEMO
การสาธิตมินิเกม WeChat		 การสาธิตโปรแกรมขนาดเล็กของ Taobao ไบต์แอปเพล็ต DEMO

โมดูลที่ทดสอบแล้ว

คุณสมบัติ

  1. VSMShadow (r131 และเวอร์ชันก่อนหน้าใช้ได้ ดูดัชนีลูปไม่สามารถเปรียบเทียบกับนิพจน์ที่ไม่คงที่)

รถตักดิน

  1. GLTFLoader (รองรับ GLB แบบพื้นผิว) && (EXT_meshopt_compression, WASM พร้อมใช้งานสำหรับ Android, เวอร์ชัน ASM พร้อมใช้งานสำหรับ ios ดูเครื่องมือ) && (KHR_mesh_quantization พร้อมใช้งานสำหรับโปรแกรมขนาดเล็ก) [การประเมินการบีบอัดตาข่าย] MeshQuan, MeshOpt, Draco (WebAssembly API ไม่ใช่ ใช้งานได้นานขึ้นหลังจาก WeChat 8.0 การใช้งานต้องใช้ WXWebAssembly และรองรับเฉพาะ wasm ในแพ็คเกจเท่านั้น เพิ่ม Meshopt_decoder.wasm.module แล้ว ดูการใช้งาน)
  2. TextureLoader
  3. RGBELoader & PMREMGenerator (มินิโปรแกรมบางรุ่นอาจสร้างข้อผิดพลาด envMap เป็นครั้งคราว ซึ่งสามารถหลีกเลี่ยงได้ด้วย HDRPrefilter)
  4. SVGLoader
  5. OBJLoader
  6. EXRLoader (ต้องรองรับส่วนขยาย OES_texture_float_linear, GPU มือถือบางตัวไม่รองรับ)
  7. MTLLoader (แอปเพล็ตสามารถใช้พื้นผิว JPG)
  8. DDSLoader (ต้องรองรับส่วนขยาย WEBGL_compressed_texture_s3tc ไม่รองรับโดย GPU มือถือ)
  9. LWOLoader (ต้องรองรับส่วนขยาย EXT_blend_minmax เอฟเฟกต์ครึ่งหนึ่งของมินิโปรแกรมถูกดึงออกมาอย่างไม่ถูกต้อง)
  10. FBXLoader
  11. BVHLoader
  12. ColladaLoader (ตัวเลือกแบบสอบถาม DOMParser ไม่ได้ถูกดัดแปลง)
  13. TTFLoader
  14. STLLoader
  15. PDBLoader
  16. TGALoader (ใช้ DataTextureLoader แทน PR ที่ผสานแล้ว มี r127)
  17. VTKLoader

การควบคุม

  1. การควบคุมวงโคจรและการควบคุมแผนที่
  2. DeviceOrientationControls (onDeviceMotionChange ภายใต้โปรแกรมขนาดเล็กของ WeChat และ Taobao คุณภาพของข้อมูลที่ส่งคืนภายใต้ Android นั้นต่ำมากและใช้งานไม่ได้โดยทั่วไป ความคิดเห็นเกี่ยวกับข้อบกพร่องของชุมชนมีมานานกว่า 3 ปีแล้ว และเจ้าหน้าที่ไม่มีความตั้งใจที่จะแก้ไข)

ไม่รองรับโมดูล

  1. ImageBitmapLoader (แอปเพล็ต WeChat ไม่เปิด ImageBitmap)

เครื่องมือ

  1. กำจัดสาม (ทำลายโหนด
  2. พลิก (ภาพหน้าจอต้องใช้ flipY
  3. ภาพหน้าจอ
  4. worker-pool.module (ยังไม่ได้ปรับให้เข้ากับแอปเพล็ต WeChat
  5. zstddec.worker.module (ยังไม่ได้ปรับให้เข้ากับแอปเพล็ต WeChat
  6. zstddec.module (ยังไม่ได้ปรับให้เข้ากับแอปเพล็ต WeChat
  7. toEnvMap (สำหรับตัวกรองล่วงหน้า hdr
  8. meshopt_decoder.asm.module (มีอยู่ในแอปเพล็ต WeChat
  9. meshopt_decoder.wasm.module (มีอยู่ในแอปเพล็ต WeChat

ส่วนขยาย

  1. GLTFGPUCompressedTexture (ทางเลือกแทน BasisTextureLoader) เครื่องมือสร้างได้มาจาก gltf-gpu-compressed-texture (ยังไม่ได้ปรับให้เข้ากับแอปเพล็ต WeChat

ใช้ 

 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 } })

ประสบการณ์

  1. แอพเพล็ต WeChat ไม่รองรับภาพพื้นผิวที่สูงกว่า 2048
  2. มีปัญหากับแอปเพล็ต Taobao ที่แสดงพื้นผิวรูปแบบ RGB (JPG) หลังจากโหลดพื้นผิวผ่าน TextureLoader แล้ว ให้ตั้งค่า texture.format เป็น RGBAFromat (Taobao เวอร์ชัน 9.20.0) สาเหตุอาจเป็นเพราะเซิร์ฟเวอร์ปรับภาพขนาดใหญ่ให้เหมาะสมและบีบอัดไฟล์ ภาพทำให้รูปแบบเปลี่ยนจาก RGB เป็น RGBA
  3. r126 ไม่สามารถตั้งค่า full pixelRatio ได้ สามารถตั้งค่าเป็นครึ่งหรือ 2 ไม่ใช่ 3 ได้
  4. แม้ว่าจะรองรับการโหลด GLB แต่รูปภาพจะถูกแปลงเป็น base64 โดยใช้ ArrayBuffer เวอร์ชัน js ซึ่งใช้เวลานานและใช้หน่วยความจำ แม้ว่าจะสามารถบรรเทาได้ด้วยตัวเข้ารหัสของ wasm (https://github.com/marcosc90/encoding- wasm) wasm ไม่ประมวลผลสตริง ประสิทธิภาพไม่ดีเท่ากับ js ทดสอบด้วย wasm ที่คอมไพล์ด้วย AssemblyScript
  5. การแครชของ IOS ก่อนและหลังการเข้าและออกจากเพจสามารถลด pixelRatio และบรรเทาลงได้
  6. IOS WeChat readPixels ไม่รองรับการป้องกันนามแฝง หากบัฟเฟอร์ของ direct canvas จำเป็นต้องปิดการป้องกันนามแฝง (antialias: false) ก็สามารถเปิดใช้งานวิธีอื่นได้คือ WebglRenderTarget แต่ขนาดพื้นผิวจะถูกจำกัด (ความกว้าง/ความสูงของพื้นผิวภายใต้ Xiaomi 8 จะต้องไม่เกิน 4096 คุณต้องใส่ใจกับ setSize ก่อน จากนั้นจึง setPixelRatio) (สำหรับการสาธิตภาพหน้าจอ โปรดดูการสาธิตแอพเพล็ต WeChat)
  7. โปรแกรมขนาดเล็กของ Taobao มีการตรวจสอบชื่อโดเมนที่เข้มงวดและสามารถใช้ที่เก็บข้อมูลบนคลาวด์เพื่อจัดเก็บโมเดลได้ อย่างไรก็ตาม หากโมเดลและพื้นผิวถูกแยกออกจากกัน จำเป็นต้องมีการเชื่อมโยงด้วยตนเอง
  8. URL polyfill สามารถใช้ fileSystemManager เพื่อรับไฟล์ชั่วคราวเพื่อหลีกเลี่ยงการแปลง arraybuffer เป็น base64 แต่ต้องมีการจัดการไฟล์ชั่วคราวด้วยตนเอง
  9. นักเรียนบางคนในกลุ่ม QQ รายงานว่าเส้นทางไฟล์โมเดลบนแอปเพล็ต iOS Taobao ไม่รองรับภาษาจีน

ทำให้สำเร็จ

แทนที่การเรียก API เฉพาะแพลตฟอร์มในขณะสร้าง ส่งต่อการอ้างอิงไปยัง PLATFORM และอัปเดตผ่าน PLATFORM.set

บำรุงรักษา

จะอัพเดต/ดาวน์เกรดเวอร์ชันของ 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包

จะปรับแต่งแพลตฟอร์มสามได้อย่างไร? 

 # 把自定义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

จะเขียนแพลตฟอร์มที่กำหนดเองได้อย่างไร?

โปรดดูที่ src/WechatPlatform หรือ 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 ( ) {
    // 释放资源
  }
}

สิ่งที่ต้องทำ

  1. กำจัดให้ละเอียดมากขึ้น ลดการรั่วไหลของหน่วยความจำ เพิ่มกรณีทดสอบเว็บแล้ว เพิ่มแอปเพล็ต WeChat แล้ว iOS ยังคงมีปัญหาหน่วยความจำ หน้าจะยังคงหยุดทำงานหลังจากสลับหลายครั้ง iPhone7 รุ่น 3MB เปิด 30 ครั้ง
  2. ปรับให้เข้ากับแอปเพล็ต Toutiao เสร็จแล้ว
  3. สร้างปลั๊กอิน WeChat และตระหนักถึงการใช้โค้ดสามแบบซ้ำในมินิโปรแกรมและปลั๊กอินข้ามมินิโปรแกรมผ่านปลั๊กอินที่ทำสามแพลตฟอร์มปลั๊กอิน-wechat
  4. ปรับให้เข้ากับมินิเกม WeChat เรียบร้อยแล้ว
  5. ปรับให้เข้ากับ ReactNative

หารือ

คุณสามารถติดต่อฉันได้ผ่านกลุ่ม DeepKolos

บันทึกการเปลี่ยนแปลง

สปอนเซอร์

หากโครงการนี้เป็นประโยชน์กับคุณหรือมีความต้องการในการปรับตัว โปรดให้ทิป

ขอบคุณสำหรับการสนับสนุนของคุณ~~

เวลา เจ้านาย
2021/11/10 พระเจ้า พระเจ้า
2021/09/27 อาบู
2021/08/10 ออเบิร์นอนาคต
28/07/2021 ไม่มีอะไร1ng
2021/07/09 ไม่ระบุชื่อ
2021/07/07 คลาวด์ CAD-หลิวซิน
2021/06/23 ฟง
2021/06/23 หลิว ซิฉี
2021/06/23 โจสัน
2021/06/03 ไบโอนิค วอลแตร์
2021/04/28 ไม่มีอะไร1ng
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด