WeChat MiniProgram AR 3D

中文自述文件

已更新

日期	更新
2022-01-02	新功能：伽瑪色彩空間校正。
2021-09-07	新增內容：新增了指南針和地圖示範。更新：修正了Android上裝置方向控制的值與iOS相反​​的問題。
2021-02-25	新增：掃描二維碼更新gltf模型的url。更新：1.為模型檢視器添加定向光，使模型有陰影。 2.為全景檢視器加入裝置像素比例，讓圖片清晰。
2019-10-31	更新：使用由「微信小程式」修改的新Gltf載入器。支援無紋理的.glb 格式和.gltf 格式。
2019-09-17	新功能：微信小程式 3D，包括全景檢視器和使用裝置方向控制的 3D 檢視器。

微信小程式3D介紹

Three.js 是一個 JavaScript 3D 函式庫。

三.js

Three.js 有一個微信小程式適配版本。

Threejs-小程式

索引頁

3D檢視器

當按一下「模型檢視器」按鈕時，將顯示 3D 檢視器。

我們可以透過裝置方向控製或使用手勢來旋轉螢幕。

全景瀏覽器

當點擊「全景檢視器」按鈕時，將顯示全景檢視器。

垂直螢幕

橫向螢幕

當開始設備移動時，設備方向控制將旋轉螢幕。

當停止設備運動時，使用手勢旋轉螢幕。

指南針和地圖檢視器

當點擊「指南針檢視器」按鈕時，將顯示指南針和地圖。

點擊地圖控制將搜尋點擊位置附近的建築物。

在輸入框中輸入門票、道路和地標，即可在地圖控制項上找到搜尋位置。

如何建造

小程式依賴“twojs-miniprogram”npm 套件。

第1步：npm安裝

第二步：執行“微信開發者工具--工具--建置npm”，會更新一個資料夾“miniprogram_npm”。

此專案包含一個預先編譯的資料夾「miniprogram_npm」。

檔案：/package.json

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

GLTFLoader.js 有何變化

您可以在GLTFLoader.js中搜尋關鍵字「2019.9.11修改」。搜尋結果是修改後的程式碼。

例如，新增了函數“GLTF_Loader”的匯出。使用該函數將“THREE”物件設定到“GLTFLoader.js”模組中。

檔案：/utils/GLTFLoader.js

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

設定模型的網站 URL

該專案包括一個在網站上部署的 gltf 模型。參數「modelUrl」的預設值是一個網站 URL，在您的網路上可能會非常慢。您可以將預設 url 替換為網站 url。

下載模型：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';