近日，需要在網頁上做一個純H5的、基於三維場景的應用，網上搜了下，發現ThingJS平臺（https://www.thingjs.com/）是個不錯的選擇......

ThingJS 是一個物聯網3D可視化PaaS平臺，基於WebGL，相容各種瀏覽器及移動設備，零門檻、高效率、低成本開發各類3D應用。開發看起來也挺簡單，網站還提供了三維場景搭建工具，叫模模搭的，很方便。

不過呢，在3D場景構建過程中，總是需要各種3D模型，雖然ThingJS網站提供了很多模型，但總還有不夠用的。又搜了一下，發現Sketchfab網站( https://sketchfab.com/ )是個不錯的選擇，能免費下載的好像有10多萬呢，而且該網站提供gltf模型格式下載，是純H5的，正好能在ThingJS網站使用，於是嘗試了一下，果然可用！而且效果不錯！過程也很簡單，記錄如下：

下載模型

首先，在Sketchfab網站上找一個需要的模型資源。

找到一個汽車模型，如下圖位置，點擊下載gltf格式。（來源：https://sketchfab.com/3d-models/triumph-tr4-0e249864d1df49818ef2c03c336a934c 作者：freeReef）

註意：下載模型時，需認真閱讀使用說明，這裡有作品的版權說明

Creative Commons

Creative Commons，簡稱CC，中國大陸正式名稱為知識共用，臺灣正式名稱為創用CC。是一個非營利組織，也是一種創作的授權方式。此組織的主要宗旨是增加創意作品的流通可及性，作為其他人據以創作及共用的基礎，並尋找適當的法律以確保上述理念。

Creative Commons（知識共用）是一個相對寬鬆的版權協議。它只保留了幾種權利（some rights reserved）。使用者可以明確知道所有者的權利，不容易侵犯對方的版權，作品可以得到有效傳播。

作為作者，你可以選擇以下1~4種權利組合:

1. 署名（Attribution，簡寫為BY）：必須提到原作者。

2. 非商業用途（Noncommercial，簡寫為NC）：不得用於盈利性目的。

3. 禁止演繹（No Derivative Works，簡寫為ND）：不得修改原作品, 不得再創作。

4. 相同方式共用（Share Alike，簡寫為SA）：允許修改原作品，但必須使用相同的許可證發佈。

下載的gltf模型資源是一個zip壓縮包，把它解壓到文件夾里，如下圖，是這個汽車模型的文件目錄結構。

上傳模型到ThingJS網站

接下來，讓我們把模型上傳到ThingJS 網站上。在控制台里，找到項目資源，並選擇一個我們要進行開發的項目，開始上傳剛纔的模型資源文件夾

開發應用

上傳成功後，我們就可以進行開發了。進入到線上開發頁面，打開項目，我們可以看到，剛纔上傳的模型資源已經出現在了該項目下。

ThingJS線上開發提供非常便捷的代碼塊工具，首先我們需要引入模型，可以在這裡直接點擊生成代碼塊，在模型地址處，點擊左邊gltf文件，即可生成模型引用地址，執行後就可以看到效果了。

接下來，我們可以對模型進行開發應用，這裡將模型載入到ThingJS官方示例場景中，並讓小車移動起來。

示例代碼

複製代碼到ThingJS平臺，即可預覽效果。

/**
* 說明：使用上傳的gltf模型進行應用開發
* 註意：下載他人模型時需仔細閱讀使用說明，保護作者版權，
* 此示例中的模型來源 https://sketchfab.com/3d-models/triumph-tr4-0e249864d1df49818ef2c03c336a934c 
* 操作：點擊按鈕
* 難度：★★★☆☆
*/

// 創建App 
var app = new THING.App({ 
url: "models/storehouse" ,
skyBox: 'White' 
}); 

app.on('load',function(){
// 設置攝像機位置和目標點
app.camera.position=[22.936453704722485,18.04447171101539, 17.25607980689213];
app.camera.target=[4.691186527881011,-0.8306817706834637, 4.836893685611984];

// 創建Thing 
var car = app.create({ 
type: 'Thing', 
name: 'triumph',
// 上傳的gltf模型地址 (來源：https://sketchfab.com/3d-models/triumph-tr4-0e249864d1df49818ef2c03c336a934c 作者：freeReef)
url: '/uploads/wechat/oLX7p0099om8KZbI6F96lQK_40l0/file/%E6%96%B0%E5%BB%BA%E9%A1%B9%E7%9B%AE1/triumph/scene.gltf', 
position: [ 0, 0.85, 0], // 模型位置 
scale: [0.35, 0.35, 0.35],// 設置模型縮放
complete: function () {
console.log('thing created: ' + this.id);
}
});

// 創建按鈕
new THING.widget.Button('方形路徑', function () {
// 世界坐標系下坐標點構成的數組 關於坐標的獲取 可利用「工具」——>「拾取場景坐標」
var path = [[0, 0.85, 0],[ 11.556, 0.85, 1.011], [ 11.556, 0.85, 14.111]];
car.movePath({
orientToPath: true, // 物體移動時沿向路徑方向
path: path, // 路徑坐標點數組
time: 5 * 1000, // 路徑總時間 毫秒
delayTime: 1000, // 延時 1s 執行
lerpType: null, // 插值類型（預設為線性插值）此處設置為不插值
// 僅當無迴圈時 有回調函數
complete: function (ev) {
console.log(ev.object.name + "移動結束")
}
});
})

new THING.widget.Button('停止移動', function () {
car.stopMoving();
});
})