ThingJS如何完成第一人稱視角的場景巡檢功能

在資料可視化領域利用webgl來建立三維場景或VR已經越來越普遍，各種開發架構也應運而生。ThingJS如何完成第一人稱視角的場景巡檢功能？

目前 ThingJS 内置了「第一人稱行走」控件，實作第一人稱人物動作：走、跑、跳、移動視角，可供開發者使用。

“第一人稱行走”互動模式會讓人想到遊戲射擊遊戲，給玩家一定的空間來讓他們來真正感受處于每個位置的感覺。而實作人物動畫，例如行走步伐，就需要一定的互動，包括周圍的環境、重力或撞擊影響。

ThingJS實作第一人稱控制移動，主要通過js腳本讓滑鼠控制任務或者錄影機的旋轉。官方添加「第一人稱行走」控件後，滑鼠按住左鍵拖拽方向，預設的互動為鍵盤按鍵來控制行走方向：

• A：左移

• D：右移

• W：前進

• S：後退

• 空格：跳躍（當開啟重力時生效）

• 滑鼠：按下左鍵旋轉場景

用于物體移動的控制器支援js開發，提供GUI（圖形使用者界面）手動調整參數。不懂開發？動動手也可以調整空間參數啦！

視角移動的起始位置是錄影機位置，實時代碼示例如下：

var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/storehouse'
});

// 加載場景後執行
app.on('load', function () {
    // 建立按鈕
    new THING.widget.Button('添加控件', add_control);
    new THING.widget.Button('删除控件', remove_control);
});

// 添加控件
var ctrl = null;
var gui = null;
function add_control() {
    if (ctrl) {
        return;
    }

    app.camera.position = [0, 10, 0];// 起始位置 就是錄影機位置, 不設定就會在錄影機位置直接開始
    ctrl = app.addControl(
        new THING.WalkControl({ // 參數可以動态修改
            walkSpeed: 0.02, // 行走速度
            turnSpeed: 0.25, // 右鍵旋轉速度
            gravity: 29.8, // 物體重量
            eyeHeight: 1.6, // 人高度
            jumpSpeed: 10, // 按空格鍵 跳躍的速度
            enableKeyRotate: false, // 預設不開啟鍵盤控制旋轉
            useCollision: false, // 預設不開啟碰撞檢測
            useGravity: true // 預設開啟重力
        })
    );
    // GUI
    gui = new THING.widget.Panel({ 'titleText': '第一人稱行走', 'hasTitle': true });

    gui.position = [10, 200];

    gui.addBoolean(ctrl, 'enableKeyRotate').caption('鍵盤控制旋轉');
    gui.addBoolean(ctrl, 'useCollision').caption('碰撞檢測');
    gui.addBoolean(ctrl, 'useGravity').caption('重力檢測');

    gui.addNumberSlider(ctrl, 'gravity').caption('重力').step(1).min(0).max(50).isChangeValue(true);
    gui.addNumberSlider(ctrl, 'jumpSpeed').caption('跳起速度').step(1).min(0).max(30).isChangeValue(true);
}

// 删除控件
function remove_control() {
    if (ctrl) {
        app.removeControl(ctrl);
        ctrl = null;
        gui.destroy();
    }
}           

ThingJS，讓場景巡檢3D可視化更加強大