ThingJS官方示例（八）：3D多邊形區域交互開發之5個註冊事件

前言

若是要在數字場景中劃定一個虛擬範圍，能夠建立多邊形區域（圓形、方形、不規則形狀），定義範圍接口；而建立區域範圍並設置了其位置以後，能夠針對範圍的內容執行不少種操做，從而實現對數字孿生對象更精細的交互控制, 更多demo能夠點擊這裏註冊查看!

建立區域範圍

ThingJS使用button屬性建立區域範圍，不管是圓形、方形或者多邊形，都須要定義區域的世界座標，來構成區域形狀的點位置，同時加入區域顏色、邊框顏色、透明程度，開啓拖拽模式，不到15行代碼，就可以輕鬆生成！

new THING.widget.Button('建立方形區域', function () {
        // 構成多邊形的點（取世界座標系下的座標）
        var points = [[0, 0, 0], [10, 0, 0], [10, 0, 10], [0, 0, 10]];
        if (region02 != null) return;
        // 建立方形區域
        region02 = app.create({
            type: 'PolygonRegion',
            id: 'polygonRegion02',
            points: points,  // 傳入世界座標系下點座標
            style: {
                regionColor: '#9F35FF',  // 區域顏色
                lineColor: '#9F35FF',  // 邊框顏色
                regionOpacity: 0.3  // 不透明度 (默認是 0.5 半透明)
            },
        })
        region02.draggable = true;  // 開啓拖拽
    })

註冊事件開發

ThingJS利用鼠標註冊事件，包括鼠標移動事件mousemove、鼠標鍵按下事件mousedown、鼠標鍵擡起mouseup、鼠標鍵離開mouseleave、鼠標鍵劃入mouseenter等等5個屬性完成以註冊時間爲主的開發方式。
以建立圓形爲示例，鼠標的交互開發更加直觀，有效提高開發效率。

拉伸前

拉伸後

從上圖能夠看到，鼠標的標誌在區域內、區域外、區域邊緣都是不同的，區域內能夠進行拾取等操做，區域邊緣則能夠利用鼠標鍵擡起mouseup進行範圍拉伸。

// 註冊鼠標劃入區域後鼠標鍵擡起事件
        app.on('mouseup', function (ev) {
            if (ev.button == 0) {
                app.resumeEvent('mousemove', null, '監聽鼠標位置事件');
                app.resumeEvent('mouseenter', '.PolygonRegion', '鼠標劃入區域事件');
                if(stretchState == true){
                    app.off('mousemove', null, '圓形區域拉伸事件');
                    $(document.body).css('cursor', 'default');
                }else{
                    $(document.body).css('cursor', 'grab');
                }
            }
        }, '鼠標劃入區域後鼠標鍵擡起事件');
    }, '鼠標劃入區域事件');

不一樣的區域範圍由一個Button類型的示例表示，其實展示的都是差很少的屬性和方法，包括點座標、style屬性和鼠標註冊事件，複製建立更簡單！

總結

以上就是這篇文章的所有內容了，但願本文的內容對你們的學習或者工做能帶來必定的幫助，若是有疑問你們能夠留言交流。

關於ThingJS

優鍩ThingJS平臺提供物聯網3D可視化組件，讓3D開發更輕鬆！直接Javascript調用3D腳本，基於200個3D開發源碼示例，讓你全面瞭解物聯網可視化開發邏輯，一站式項目開發服務（場景搭建-3D腳本開發-數據對接-項目部署）更是吸引了20萬開發者入駐，成爲數字孿生技術創新者！魔豆花花活動ing，歡迎點擊進入官網>>