ThingJS不起眼功能介紹

在ThingJS中有許多的官方示例，這個是很直白也很容易被使用者查看和使用的，但是在開發的過程中卻有一個非常有用的功能一直被忽視，更多的人只是快速瀏覽了一遍這些官方示例，有時候並沒有瀏覽完整就開始嘗試開發，結果就在使用ThingJS過程中遇到了各種困難，實際上，除了官方示例，ThingJS的快捷代碼功能更加方便！功能相比於官方示例也是各有千秋~=！

ThingJS快捷代碼功能

ThingJS擁有一個快捷代碼功能，從新建APP到綜合，每個快捷代碼都能簡化我們的開發，尤其是快捷代碼中的綜合這一欄，其中有一個場景預覽的快捷代碼，只需要引入這個快捷代碼，就能非常迅速的讓你的場景出現預覽選項啦！

ThingJS快捷代碼中場景預覽擁有擁有以下六個主要功能：分享、自動旋轉、第一人稱、地圖背景、視點動畫、設置，還有一個全屏功能，這個作爲ThingJS的快捷代碼，而不是在官方示例中存在，所以很少有人使用過這個功能呢，在這裏給大家分享ThingJS的這個快捷代碼~

   /**
     * 引入場景預覽腳本
     * 說明：引用該腳本需要傳遞參數，參數爲創建的app對象、類型type，type的值有兩種，scene和city，
     *    用於區分園區和地圖、如果type值爲city，需要額外傳遞參數，參數值爲創建的map對象。
     * 注：
     *     1. 如果引入該腳本是預覽園區，初始化方法示例爲：init(app, 'scene', null)
     *     2. 如果引入該腳本是預覽地圖，則應在引用地圖組件腳本complete回調中引用，初始化方法示例爲：init(app, 'city', event.object)
     */
    THING.Utils.dynamicLoad(['/uploads/wechat/5oiR5pyJ5pyA6ZW/55qE572R5ZCN5LiN5L+h5L2g5pWw5pWw/file/ScenePreview/AppPreview.js'],
        function () {
            init(app, 'scene', null);  // 執行初始化
        }
    )

接下來我們要分享的就是ThingJS中的官方示例了，以下腳本則是ThingJS創建幾何體的官方示例，這個官方示例在快捷代碼中，使用這個功能可以從快捷代碼引用，也可以直接去複製這個然後放到ThingJS的項目中去喲

/**
 * 說明：創建多種幾何體
 * 教程：ThingJS教程——>對象創建——>創建物體
 * 難度：★★☆☆☆
 */
var app = new THING.App();

// 創建平面
var plane = app.create({
    type: 'Plane',
    width: 8,
    height: 8,
    position: [0, 0, 0]
});
// 平面旋轉90度
plane.rotateX(-90);

// 創建箱子
var box = app.create({
    type: 'Box',
    position: [2, 2, 0], // 箱子座標
});

// 創建球體
var sphere = app.create({
    type: 'Sphere',
    radius: 0.5, // 半徑
    widthSegments: 16, // 節數
    heightSegments: 16,
    position: [4, 4, 0], // 球體座標
});

// 創建圓柱體
var cylinder = app.create({
    type: 'Cylinder',
    radius: 0.3,
    height: 1.6,
    position: [0, 2, 2]
});

// 創建四面體
var tetrahedron = app.create({
    type: 'Tetrahedron',
    radius: 1,
    position: [0, 2, 0]
});

// update事件
app.on('update', function () {
    // 箱子自轉
    box.rotateY(app.deltaTime * 30 * 0.001);

    // 移動球體（上下移動）
    sphere.y = Math.cos(app.elapsedTime * 0.001) * 2;

    // 移動圓柱體(左右移動)
    cylinder.x = Math.cos(app.elapsedTime * 0.001) * 2;
});

// 設置最佳觀看位置
app.camera.fit();

// 設置主燈光 開啓陰影
var mainLight = {
    shadow: true
};
app.lighting = { mainLight };

ThingJS需要JavaScript開發經驗

作爲新一代的物聯網可視化平臺，ThingJS也有一個門檻。雖然ThingJS作爲一個簡化物聯網可視化開發的平臺，是大衆邁向物聯網可視化方向的一條捷徑。然而，即使是一個以簡化物聯網可視化開發的平臺，在使用ThingJS進行開發的時候也需要javaScript開發經驗。通過thingjs庫，ThingJS平臺將開發難度降低到只需要javaScript語言基礎就能開發三維場景，而開發人員則專注於編寫代碼。建模者專注於建模。程序員不需要過於瞭解模型知識，也能使用thingjs庫來簡化3D視覺場景的開發。

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.

ThingJS不起眼功能介紹