ThreeJS(javascript 3D库) 一些常用的功能

"use strict";

var __emptyPoint = null, __emptyContext = null, __emptyPointA = null;

const ColorRefTable = {
    "aliceblue": "#f0f8ff",
    "antiquewhite": "#faebd7",
    "aqua": "#00ffff",
    "aquamarine": "#7fffd4",
    "azure": "#f0ffff",
    "beige": "#f5f5dc",
    "bisque": "#ffe4c4",
    "black": "#000000",
    "blanchedalmond": "#ffebcd",
    "blue": "#0000ff",
    "blueviolet": "#8a2be2",
    "brown": "#a52a2a",
    "burlywood": "#deb887",
    "cadetblue": "#5f9ea0",
    "chartreuse": "#7fff00",
    "chocolate": "#d2691e",
    "coral": "#ff7f50",
    "cornsilk": "#fff8dc",
    "crimson": "#dc143c",
    "cyan": "#00ffff",
    "darkblue": "#00008b",
    "darkcyan": "#008b8b",
    "darkgoldenrod": "#b8860b",
    "darkgray": "#a9a9a9",
    "darkgreen": "#006400",
    "darkgrey": "#a9a9a9",
    "darkkhaki": "#bdb76b",
    "darkmagenta": "#8b008b",
    "firebrick": "#b22222",
    "darkolivegreen": "#556b2f",
    "darkorange": "#ff8c00",
    "darkorchid": "#9932cc",
    "darkred": "#8b0000",
    "darksalmon": "#e9967a",
    "darkseagreen": "#8fbc8f",
    "darkslateblue": "#483d8b",
    "darkslategray": "#2f4f4f",
    "darkslategrey": "#2f4f4f",
    "darkturquoise": "#00ced1",
    "darkviolet": "#9400d3",
    "deeppink": "#ff1493",
    "deepskyblue": "#00bfff",
    "dimgray": "#696969",
    "dimgrey": "#696969",
    "dodgerblue": "#1e90ff",
    "floralwhite": "#fffaf0",
    "forestgreen": "#228b22",
    "fuchsia": "#ff00ff",
    "gainsboro": "#dcdcdc",
    "ghostwhite": "#f8f8ff",
    "gold": "#ffd700",
    "goldenrod": "#daa520",
    "gray": "#808080",
    "green": "#008000",
    "greenyellow": "#adff2f",
    "grey": "#808080",
    "honeydew": "#f0fff0",
    "hotpink": "#ff69b4",
    "indianred": "#cd5c5c",
    "indigo": "#4b0082",
    "ivory": "#fffff0",
    "khaki": "#f0e68c",
    "lavender": "#e6e6fa",
    "lavenderblush": "#fff0f5",
    "lawngreen": "#7cfc00",
    "lemonchiffon": "#fffacd",
    "lightblue": "#add8e6",
    "lightcoral": "#f08080",
    "lightcyan": "#e0ffff",
    "lightgoldenrodyellow": "#fafad2",
    "lightgray": "#d3d3d3",
    "lightgreen": "#90ee90",
    "lightgrey": "#d3d3d3",
    "lightpink": "#ffb6c1",
    "lightsalmon": "#ffa07a",
    "lightseagreen": "#20b2aa",
    "lightskyblue": "#87cefa",
    "lightslategray": "#778899",
    "lightslategrey": "#778899",
    "lightsteelblue": "#b0c4de",
    "lightyellow": "#ffffe0",
    "lime": "#00ff00",
    "limegreen": "#32cd32",
    "linen": "#faf0e6",
    "magenta": "#ff00ff",
    "maroon": "#800000",
    "mediumaquamarine": "#66cdaa",
    "mediumblue": "#0000cd",
    "mediumorchid": "#ba55d3",
    "mediumpurple": "#9370db",
    "mediumseagreen": "#3cb371",
    "mediumslateblue": "#7b68ee",
    "mediumspringgreen": "#00fa9a",
    "mediumturquoise": "#48d1cc",
    "mediumvioletred": "#c71585",
    "midnightblue": "#191970",
    "mintcream": "#f5fffa",
    "mistyrose": "#ffe4e1",
    "moccasin": "#ffe4b5",
    "navajowhite": "#ffdead",
    "navy": "#000080",
    "oldlace": "#fdf5e6",
    "olive": "#808000",
    "olivedrab": "#6b8e23",
    "orange": "#ffa500",
    "orangered": "#ff4500",
    "orchid": "#da70d6",
    "palegoldenrod": "#eee8aa",
    "palegreen": "#98fb98",
    "paleturquoise": "#afeeee",
    "palevioletred": "#db7093",
    "papayawhip": "#ffefd5",
    "peachpuff": "#ffdab9",
    "peru": "#cd853f",
    "pink": "#ffc0cb",
    "plum": "#dda0dd",
    "powderblue": "#b0e0e6",
    "purple": "#800080",
    "red": "#ff0000",
    "rosybrown": "#bc8f8f",
    "royalblue": "#4169e1",
    "saddlebrown": "#8b4513",
    "salmon": "#fa8072",
    "sandybrown": "#f4a460",
    "seagreen": "#2e8b57",
    "seashell": "#fff5ee",
    "sienna": "#a0522d",
    "silver": "#c0c0c0",
    "skyblue": "#87ceeb",
    "slateblue": "#6a5acd",
    "slategray": "#708090",
    "slategrey": "#708090",
    "snow": "#fffafa",
    "springgreen": "#00ff7f",
    "steelblue": "#4682b4",
    "tan": "#d2b48c",
    "teal": "#008080",
    "thistle": "#d8bfd8",
    "tomato": "#ff6347",
    "turquoise": "#40e0d0",
    "violet": "#ee82ee",
    "wheat": "#f5deb3",
    "white": "#ffffff",
    "whitesmoke": "#f5f5f5",
    "yellow": "#ffff00",
    "yellowgreen": "#9acd32"
},

UTILS = {

    get isMobile(){
        return /Android|webOS|iPhone|iPod|BlackBerry|SymbianOS|Windows Phone|iPad/i.test(navigator.userAgent);
    },
    
    emptyArray(arr){
        return !Array.isArray(arr) || arr.length === 0;
    },

    createContext(w = 1, h = 1){
        const canvas = document.createElement("canvas"),
        context = canvas.getContext("2d");
        canvas.width = w;
        canvas.height = h;
        return context;
    },

    createElem(tagName, className = "", textContent = ""){
        const elem = document.createElement(tagName);
        if(className !== "") elem.className = className;
        if(textContent !== "") elem.textContent = textContent;
        return elem;
    },

    createInput(type, className = ""){
        const input = document.createElement("input");
        input.type = type;
        if(className !== "") input.className = className;
        return input;
    },

    appendChilds(parentElem, ...nodes){
        const msgContainer = document.createDocumentFragment();
        for(let k = 0, len = nodes.length; k < len; k++) msgContainer.appendChild(nodes[k]);
        parentElem.appendChild(msgContainer);
    },

    isObject(obj){
        
        return obj !== null && typeof obj === "object" && Array.isArray(obj) === false;
        
    },
    
    isNumber(num){

        return typeof num === "number" && isNaN(num) === false;

    },

    //获取最后一个点后面的字符
    getFileType(string){
        let type = "", str = string.split('').reverse().join('');
        for(let k = 0, len = str.length; k < len; k++){
            if(str[k] === ".") break;
            type += str[k];
        }
        return type.split('').reverse().join('');
    },

    //删除 string 所有的空格
    deleteSpaceAll(str){
        const len = str.length;
        var result = '';
        for(let i = 0; i < len; i++){
            if(str[i] !== '') result += str[i]
        }

        return result
    },

    //删除 string 两边空格
    removeSpaceSides(string){

        return string.replace(/(^\s*)|(\s*$)/g, "");

    },

    //返回 num 与 num1 之间的随机数
    random(num, num1){
        
        if(num < num1) return Math.random() * (num1 - num) + num;

        else if(num > num1) return Math.random() * (num - num1) + num1;

        else return num;
        
    },

    //生成 UUID
    generateUUID: function (){
        const _lut = [];
    
        for ( let i = 0; i < 256; i ++ ) {
    
            _lut[ i ] = ( i < 16 ? '0' : '' ) + ( i ).toString( 16 );
    
        }
    
        return function (){
            const d0 = Math.random() * 0xffffffff | 0;
            const d1 = Math.random() * 0xffffffff | 0;
            const d2 = Math.random() * 0xffffffff | 0;
            const d3 = Math.random() * 0xffffffff | 0;
            const uuid = _lut[ d0 & 0xff ] + _lut[ d0 >> 8 & 0xff ] + _lut[ d0 >> 16 & 0xff ] + _lut[ d0 >> 24 & 0xff ] + '-' +
            _lut[ d1 & 0xff ] + _lut[ d1 >> 8 & 0xff ] + '-' + _lut[ d1 >> 16 & 0x0f | 0x40 ] + _lut[ d1 >> 24 & 0xff ] + '-' +
            _lut[ d2 & 0x3f | 0x80 ] + _lut[ d2 >> 8 & 0xff ] + '-' + _lut[ d2 >> 16 & 0xff ] + _lut[ d2 >> 24 & 0xff ] +
            _lut[ d3 & 0xff ] + _lut[ d3 >> 8 & 0xff ] + _lut[ d3 >> 16 & 0xff ] + _lut[ d3 >> 24 & 0xff ];
    
            return uuid.toLowerCase(); //toLowerCase() 这里展平连接的字符串以节省堆内存空间
        }
    }(),

    //欧几里得距离(两点的直线距离)
    distance(x, y, x1, y1){
        
        return Math.sqrt(Math.pow(x - x1, 2) + Math.pow(y - y1, 2));

    },

    downloadFile(blob, fileName){
        const link = document.createElement("a");
        link.href = URL.createObjectURL(blob);
        link.download = fileName;
        link.click();
    },

    loadFileJSON(callback){
        const input = document.createElement("input");
        input.type = "file";
        input.accept = ".json";
        
        input.onchange = a => {
            if(a.target.files.length === 0) return;
            const fr = new FileReader();
            fr.onloadend = b => callback(b.target.result);
            fr.readAsText(a.target.files[0]); //fr.readAsDataURL(a.target.files[0]);
        }
        
        input.click();
    },

    get emptyPoint(){
        if(__emptyPoint === null) __emptyPoint = new Point();
        return __emptyPoint;
    },

    get emptyPointA(){
        if(__emptyPointA === null) __emptyPointA = new Point();
        return __emptyPointA;
    },

    get emptyContext(){
        if(__emptyContext === null) __emptyContext = document.createElement("canvas").getContext('2d')
        return __emptyContext;
    },

    /* 把 target 以相等的比例缩放至 result 大小
        target, result: Object{width, height}; //也可以是img元素
    */
    setSizeToSameScale(target, result = {width: 100, height: 100}){
        if(!target) return result;

        const width = target.width,
        height = target.height,
        ratio = width / height,
        scale = ratio < 1 ? ratio * result.width / width : result.width / width;

        result.width = width * scale;
        result.height = height * scale;

        return result;
    },

    //小数保留 count 位
    floatKeep(float, count = 3){
        count = Math.pow(10, count);
        return Math.ceil(float * count) / count;
    },

}




/* SecurityDoor 安检门
作用: 有时候我们要给一个功能加一个启禁用锁, 就比如用一个.enable属性表示此功能是否启用, 
a, b是两个使用此功能的人; a 需要把此功能禁用(.enable = false), 
过了一会b也要禁用此功能(.enable = false), 又过了一会a又要在次启用此功能,
此时a让此功能启用了(.enable = true), 很显然这违背了b, 对于b来说此功能还在禁用状态,
实际并非如b所想, 所以当多个人使用此功能时一个.enable满足不了它们;
或许还有其它解决方法就比如让所有使用此功能的人(a,b)加一个属性表示自己是否可以使用此功能,
但我更希望用一个专门的数组去装载它们, 而不是在某个使用者身上都添加一个属性;

parameter:
    list: Array[];

attribute:
    list: Array; //私有, 默认 null
    empty: Bool; //只读, 列表是否为空

method:
    clear()
    equals(v)
    add(v)
    remove(v)
*/
class SecurityDoor{

    #list = null;
    #onchange = null;

    get empty(){
        return this.#list === null;
    }

    constructor(list, onchange){
        if(UTILS.emptyArray(list) === false) this.#list = list;
        if(typeof onchange === "function") this.#onchange = onchange;
    }

    add(sign){
        if(this.#list !== null){
            if(this.#list.includes(sign) === false) this.#list.push(sign);
        }
        else{
            this.#list = [sign];
            if(this.#onchange !== null) this.#onchange(false);
        }
    }
    
    clear(){
        this.#list = null;
    }

    equals(sign){
        return this.#list !== null && this.#list.includes(sign);
    }

    remove(sign){
        if(this.#list !== null){
            sign = this.#list.indexOf(sign);
            if(sign !== -1){
                if(this.#list.length > 1) this.#list.splice(sign, 1);
                else{
                    this.#list = null;
                    if(this.#onchange !== null) this.#onchange(true);
                }
            }
        }
    }

}




/* RunningList

*/
class RunningList{

    #runName = "";
    #running = false;
    #list = [];
    #disabls = [];

    constructor(runName = 'update'){
        this.#runName = runName;
    }

    clear(){
        this.#list.length = 0;
        this.#disabls.length = 0;
    }

    add(v){
        if(this.#list.includes(v) === false) this.#list.push(v);
        else{
            const i = this.#disabls.indexOf(v);
            if(i !== -1) this.#disabls.splice(i, 1);
        }
    }

    remove(v){
        if(this.#running) this.#disabls.push(v);
        else{
            const i = this.#list.indexOf(v);
            if(i !== -1) this.#list.splice(i, 1);
        }
    }

    update(){
        var len = this.#list.length;
        if(len === 0) return;

        var k;
        this.#running = true;
        if(this.#runName !== ''){
            for(k = 0; k < len; k++) this.#list[k][this.#runName]();
        }else{
            for(k = 0; k < len; k++) this.#list[k]();
        }
        this.#running = false;

        var i;
        len = this.#disabls.length;
        for(k = 0; k < len; k++){
            i = this.#list.indexOf(this.#disabls[k]);
            if(i !== -1) this.#list.splice(i, 1);
        }
        this.#disabls.length = 0;
    }

}




/* AnimateLoop 动画循环
attributes:
    onupdate: Func;
    //只读:
    running: Bool;
    
method:
    play(onupdate: Func): this; //onupdate 可选
    stop(): this;
    update(): undefined; //使用前必须已定义.onupdate 属性
*/
class AnimateLoop{

    #id = -1;
    #animate = null;

    get running(){
        return this.#id !== -1;
    }

    constructor(onupdate = null){
        const animate = () => {
            this.#id = requestAnimationFrame(animate);
            this.onupdate();
        }

        this.#animate = animate;
        this.onupdate = onupdate;
    }

    stop(){
        if(this.#id !== -1){
            cancelAnimationFrame(this.#id);
            this.#id = -1;
        }
        return this;
    }

    play(onupdate){
        if(typeof onupdate === "function") this.onupdate = onupdate;
        if(this.onupdate !== null){
            this.stop();
            this.#animate();
        }
        return this;
    }

    update(){
        if(this.#id === -1){
            this.onupdate();
        }
    }

}




/** Ajax
parameter:
    option = {
        url:        可选, 默认 ''
        method:        可选, post 或 get请求， 默认 post
        asy:        可选, 是否异步执行, 默认 true
        success:    可选, 成功回调, 默认 null
        error:        可选, 超时或失败调用, 默认 null
        change:        可选, 请求状态改变时调用, 默认 null
        data:        可选, 如果定义则在初始化时自动执行.send(data)方法
    }

demo:
    const data = `email=${email}&password=${password}`,

    //默认 post 请求:
    ajax = new Ajax({
        url: './login',
        data: data,
        success: mes => console.log(mes),
    });
    
    //get 请求:
    ajax.method = "get";
    ajax.send(data);
*/
class Ajax{
    
    constructor(option = {}){
        this.url = option.url || "";
        this.method = option.method || "post";
        this.asy = typeof option.asy === "boolean" ? option.asy : true;
        this.success = option.success || null;
        this.error = option.error || null;
        this.change = option.change || null;

        //init XML
        this.xhr = new XMLHttpRequest();

        this.xhr.onerror = this.xhr.ontimeout = option.error || null;

        this.xhr.onreadystatechange = event => {
        
            if(event.target.readyState === 4 && event.target.status === 200){

                if(this.success !== null) this.success(event.target.responseText, event);
                
            }

            else if(this.change !== null) this.change(event);

        }

        if(option.data) this.send(option.data);
    }

    send(data = ""){
        if(this.method === "get"){
            this.xhr.open(this.method, this.url+"?"+data, this.asy);
            this.xhr.send();
        }
        
        else if(this.method === "post"){
            this.xhr.open(this.method, this.url, this.asy);
            this.xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            this.xhr.send(data);
        }
    }
    
}




/* IndexedDB 本地数据库

parameter:
    name: String;                //需要打开的数据库名称(如果不存在则会新建一个) 必须
    done: Function(IndexedDB);    //链接数据库成功时的回调 默认 null
    version: Number;             //数据库版本(高版本数据库将覆盖低版本的数据库) 默认 1 

attribute:
    database: IndexedDB;            //链接完成的数据库对象
    transaction: IDBTransaction;    //事务管理(读和写)
    objectStore: IDBObjectStore;    //当前的事务

method:
    set(data, key, callback)        //添加或更新
    get(key, callback)                //获取
    delete(key, callback)            //删除

    traverse(callback)                //遍历
    getAll(callback)                //获取全部
    clear(callback)                    //清理所以数据
    close()                         //关闭数据库链接

readOnly:

static:
    indexedDB: Object;

demo:
    
    new IndexedDB('TEST', db => {

        conosle.log(db);

    });

*/
class IndexedDB{

    static indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

    get objectStore(){ //每个事务只能使用一次, 所以每次都需要重新创建
        return this.database.transaction(this.name, 'readwrite').objectStore(this.name);
    }

    constructor(name, done = null, version = 1){

        if(IndexedDB.indexedDB === undefined) return console.error("IndexedDB: 不支持IndexedDB");
        
        if(typeof name !== 'string') return console.warn('IndexedDB: 参数错误');

        this.name = name;
        this.database = null;

        const request = IndexedDB.indexedDB.open(name, version);
        
        request.onupgradeneeded = (e)=>{ //数据库不存在 或 版本号不同时 触发
            if(!this.database) this.database = e.target.result;
            if(this.database.objectStoreNames.contains(name) === false) this.database.createObjectStore(name);
        }
        
        request.onsuccess = (e)=>{
            this.database = e.target.result;
            if(typeof done === 'function') done(this);
        }
        
        request.onerror = (e)=>{
            console.error(e);
        }
        
    }

    close(){

        return this.database.close();

    }

    clear(callback){
        
        this.objectStore.clear().onsuccess = callback;
        
    }

    traverse(callback){
        
        this.objectStore.openCursor().onsuccess = callback;

    }

    set(data, key = 0, callback){
        
        this.objectStore.put(data, key).onsuccess = callback;

    }
    
    get(key = 0, callback){

        this.objectStore.get(key).onsuccess = callback;
        
    }

    del(key = 0, callback){

        this.objectStore.delete(key).onsuccess = callback;

    }
    
    getAll(callback){

        this.objectStore.getAll().onsuccess = callback;

    }

}




/* TreeStruct 树结构基类

attribute:
    parent: TreeStruct;
    children: Array[TreeStruct];

method:
    add(v: TreeStruct): v;         //v添加到自己的子集
    remove(v: TreeStruct): v;     //删除v, 前提v必须是自己的子集
    export(): Array[Object];    //TreeStruct 转为 可导出的结构, 包括其所有的后代

    getPath(v: TreeStruct): Array[TreeStruct];     //获取自己到v的路径

    traverse(callback: Function): undefined;  //迭代自己的每一个后代, 包括自己
        callback(value: TreeStruct); //如返回 "continue" 则不在迭代其后代(不是结束迭代, 而是只结束当前节点的后代);

    traverseUp(callback): undefined; //向上遍历每一个父, 包括自己
        callback(value: TreeStruct); //如返回 "break" 立即停止遍历;

static:
    import(arr: Array[Object]): TreeStruct; //.export() 返回的 arr 转为 TreeStruct

*/
class TreeStruct{

    static import(arr){

        //json = JSON.parse(json);
        const len = arr.length;

        for(let k = 0, v; k < len; k++){
            v = Object.assign(new TreeStruct(), arr[k]);
            v.parent = arr[arr[k].parent] || null;
            if(v.parent !== null) v.parent.add(v);
            arr[k] = v;
        }

        return arr[0];

    }

    constructor(){
        this.parent = null;
        this.children = [];
    }

    getPath(v){

        var path;

        const pathA = [];
        this.traverseUp(tar => {
            if(v === tar){
                path = pathA;
                return "break";
            }
            pathA.push(tar);
        });

        if(path) return path;

        const pathB = [];
        v.traverseUp(tar => {
            if(this === tar){
                path = pathB.reverse();
                return "break";
            }
            else{
                let i = pathA.indexOf(tar);
                if(i !== -1){
                    pathA.splice(i);
                    pathA.push(tar);
                    path = pathA.concat(pathB.reverse());
                    return "break";
                }
            }
            pathB.push(tar);
        });

        return path;
        
    }

    add(v){
        v.parent = this;
        if(this.children.includes(v) === false) this.children.push(v);
        
        return v;
    }

    remove(v){
        const i = this.children.indexOf(v);
        if(i !== -1) this.children.splice(i, 1);
        v.parent = null;

        return v;
    }

    traverse(callback, key = 0){

        if(callback(this, key) !== "continue"){

            for(let k = 0, len = this.children.length; k < len; k++){

                this.children[k].traverse(callback, k);
    
            }

        }

    }

    traverseUp(callback){

        var par = this.parent;

        while(par !== null){
            if(callback(par) === "break") return;
            par = par.parent;
        }

    }

    export(){

        const result = [], arr = [];
        var obj = null;

        this.traverse(v => {
            obj = Object.assign({}, v);
            obj.parent = arr.indexOf(v.parent);
            delete obj.children;
            result.push(obj);
            arr.push(v);
        });
        
        return result; //JSON.stringify(result);

    }

}




/* Point
parameter: 
    x = 0, y = 0;

attribute
    x, y: Number;

method:
    set(x, y): this;
    angle(origin): Number;
    copy(point): this;
    clone(): Point;
    distance(point): Number;            //获取欧几里得距离
    distanceMHD(point): Number;            //获取曼哈顿距离
    distanceCompare(point): Number;        //获取用于比较的距离(相对于.distance() 效率更高)
    equals(point): Bool;                //是否恒等
    reverse(): this;                    //取反值
    rotate(origin: Object{x,y}, angle): this;    //旋转点
    normalize(): this;                    //归一
*/
class Point{

    constructor(x = 0, y = 0){
        this.x = x;
        this.y = y;
    }

    set(x = 0, y = 0){
        this.x = x;
        this.y = y;

        return this;
    }

    angle(origin){

        return Math.atan2(this.y - origin.y, this.x - origin.x);

    }

    copy(point){
        
        this.x = point.x;
        this.y = point.y;
        return this;
        //return Object.assign(this, point);

    }
    
    clone(){

        return new this.constructor().copy(this);
        //return Object.assign(new this.constructor(), this);
        
    }

    distance(point){
        
        return Math.sqrt(Math.pow(point.x - this.x, 2) + Math.pow(point.y - this.y, 2));

    }

    distanceMHD(point){

        return Math.abs(this.x - point.x) + Math.abs(this.y - point.y);

    }

    distanceCompare(point){
    
        return Math.pow(this.x - point.x, 2) + Math.pow(this.y - point.y, 2);

    }

    equals(point){

        return point.x === this.x && point.y === this.y;

    }

    reverse(){
        this.x = -this.x;
        this.y = -this.y;

        return this;
    }

    rotate(origin, angle){
        const c = Math.cos(angle), s = Math.sin(angle), 
        x = this.x - origin.x, y = this.y - origin.y;

        this.x = x * c - y * s + origin.x;
        this.y = x * s + y * c + origin.y;

        return this;
    }

    normalize(){
        const len = 1 / (Math.sqrt(this.x * this.x + this.y * this.y) || 1);
        this.x *= len;
        this.y *= len;

        return this;
    }

/*     add(point){
        this.x += point.x;
        this.y += point.y;
        return this;
    }

    sub(point){
        this.x -= point.x;
        this.y -= point.y;
        return this;
    }

    multiply(point){
        this.x *= point.x;
        this.y *= point.y;
        return this;
    }

    divide(point){
        this.x /= point.x;
        this.y /= point.y;
        return this;
    } */

}




/* Rotate
parameter:
    x, y, a = 0

attribute:
    angle: Number;
    origin: Point;

method:
    set(x, y, a): this;
*/
class Rotate{

    constructor(x, y, a = 0){
        this.angle = a;
        this.origin = new Point(x, y);
    }

    set(x, y, a){
        this.origin.x = x;
        this.origin.y = y;
        this.angle = a;
        return this;
    }

    pos(x, y){
        this.origin.x = x;
        this.origin.y = y;
        return this;
    }

    copy(rotate){
        this.angle = rotate.angle;
        this.origin.copy(rotate.origin);
        return this;
    }
    
    clone(){
        return new this.constructor().copy(this);
    }

    toAngle(v){
        this.angle = v / 180 * Math.PI;
        return this;
    }

}




/* Line
parameter: x, y, x1, y1: Number;
attribute: x, y, x1, y1: Number;
method:
    set(x, y, x1, y1): this;                    
    copy(line): this;
    clone(): Line;
    containsPoint(x, y): Bool;                             //点是否在线上
    intersectPoint(line: Line, point: Point): Point;    //如果不相交则返回null, 否则返回交点Point
    isIntersect(line): Bool;                             //this与line是否相交
*/
class Line{

    constructor(x = 0, y = 0, x1 = 0, y1 = 0){
        this.x = x;
        this.y = y;
        this.x1 = x1;
        this.y1 = y1;
    }

    set(x = 0, y = 0, x1 = 0, y1 = 0){
        this.x = x;
        this.y = y;
        this.x1 = x1;
        this.y1 = y1;
        return this;
    }

    copy(line){
        this.x = line.x;
        this.y = line.y;
        this.x1 = line.x1;
        this.y1 = line.y1;
        return this;
        //return Object.assign(this, line);
    }
    
    clone(){
        return new this.constructor().copy(this);
        //return Object.assign(new this.constructor(), this);
    }

    containsPoint(x, y){
        return (x - this.x) * (x - this.x1) <= 0 && (y - this.y) * (y - this.y1) <= 0;
    }

    intersectPoint(line, point){
        //解线性方程组, 求线段交点
        //如果分母为0则平行或共线, 不相交
        var denominator = (this.y1 - this.y) * (line.x1 - line.x) - (this.x - this.x1) * (line.y - line.y1);
        if(denominator === 0) return null;

        //线段所在直线的交点坐标 (x , y)
        const x = ((this.x1 - this.x) * (line.x1 - line.x) * (line.y - this.y) 
        + (this.y1 - this.y) * (line.x1 - line.x) * this.x 
        - (line.y1 - line.y) * (this.x1 - this.x) * line.x) / denominator;

        const y = -((this.y1 - this.y) * (line.y1 - line.y) * (line.x - this.x) 
        + (this.x1 - this.x) * (line.y1 - line.y) * this.y 
        - (line.x1 - line.x) * (this.y1 - this.y) * line.y) / denominator;

        //判断交点是否在两条线段上
        if(this.containsPoint(x, y) && line.containsPoint(x, y)){
            point.x = x;
            point.y = y;
            return point;
        }

        return null;
    }

    isIntersect(line){
        //快速排斥：
        //两个线段为对角线组成的矩形，如果这两个矩形没有重叠的部分，那么两条线段是不可能出现重叠的

        //这里的确如此，这一步是判定两矩形是否相交
        //1.线段ab的低点低于cd的最高点（可能重合）
        //2.cd的最左端小于ab的最右端（可能重合）
        //3.cd的最低点低于ab的最高点（加上条件1，两线段在竖直方向上重合）
        //4.ab的最左端小于cd的最右端（加上条件2，两直线在水平方向上重合）
        //综上4个条件，两条线段组成的矩形是重合的
        //特别要注意一个矩形含于另一个矩形之内的情况
        if(!(Math.min(this.x,this.x1)<=Math.max(line.x,line.x1) && Math.min(line.y,line.y1)<=Math.max(this.y,this.y1) && Math.min(line.x,line.x1)<=Math.max(this.x,this.x1) && Math.min(this.y,this.y1)<=Math.max(line.y,line.y1))) return false;

        //跨立实验：
        //如果两条线段相交，那么必须跨立，就是以一条线段为标准，另一条线段的两端点一定在这条线段的两段
        //也就是说a b两点在线段cd的两端，c d两点在线段ab的两端
        var u=(line.x-this.x)*(this.y1-this.y)-(this.x1-this.x)*(line.y-this.y),
        v = (line.x1-this.x)*(this.y1-this.y)-(this.x1-this.x)*(line.y1-this.y),
        w = (this.x-line.x)*(line.y1-line.y)-(line.x1-line.x)*(this.y-line.y),
        z = (this.x1-line.x)*(line.y1-line.y)-(line.x1-line.x)*(this.y1-line.y);
        
        return u*v <= 0.00000001 && w*z <= 0.00000001;
    }

}




/* Box 矩形
parameter: 
    x = 0, y = 0, w = 0, h = 0;

attribute:
    x,y: Number; 位置
    w,h: Number; 大小

    只读
    mx, my: Number; //

method:
    set(x, y, w, h): this;
    pos(x, y): this; //设置位置
    size(w, h): this; //设置大小
    setFromRotate(rotate: Rotate): this;        //根据 rotate 旋转自己
    setFromShapeRect(shapeRect): this;            //ShapeRect 转为 Box (忽略 ShapeRect 的旋转和缩放)
    setFromCircle(circle, inner: Bool): this;    //
    setFromPolygon(polygon, inner = true): this;//
    toArray(array: Array, index: Integer): this;
    copy(box): this;                             //复制
    clone(): Box;                                  //克隆
    center(box): this;                            //设置位置在box居中
    distance(x, y): Number;                     //左上角原点 与 x,y 的直线距离
    isEmpty(): Boolean;                         //.w.h是否小于等于零
    maxX(): Number;                             //返回 max x(this.x+this.w);
    maxY(): Number;                             //返回 max y(this.y+this.h);
    expand(box): undefined;                     //扩容; 把box合并到this
    equals(box): Boolean;                         //this与box是否恒等
    intersectsBox(box): Boolean;                 //box与this是否相交(box在this内部也会返回true)
    containsPoint(x, y): Boolean;                 //x,y点是否在this内
    containsBox(box): Boolean;                    //box是否在this内(只是相交返回fasle)
    computeOverflow(b: Box, r: Box): undefined;    //this相对b超出的部分赋值到r; r的size小于或等于0的话说明完全超出
*/
class Box{

    get mx(){
        return this.x + this.w;
    }

    get my(){
        return this.y + this.h;
    }

    get cx(){
        return this.w / 2 + this.x;
    }

    get cy(){
        return this.h / 2 + this.y;
    }

    constructor(x = 0, y = 0, w = 0, h = 0){
        //this.set(x, y, w, h);
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
    }
    
    set(x, y, w, h){
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        return this;
    }

    pos(x, y){
        this.x = x;
        this.y = y;
        return this;
    }
    
    size(w, h){
        this.w = w;
        this.h = h;
        return this;
    }

    setFromRotate(rotate){
        var minX = this.x, minY = this.y, maxX = 0, maxY = 0;
        const point = UTILS.emptyPoint,
        run = function (){
            if(point.x < minX) minX = point.x;
            else if(point.x > maxX) maxX = point.x;
            if(point.y < minY) minY = point.y;
            else if(point.y > maxY) maxY = point.y;
        }

        point.set(this.x, this.y).rotate(rotate.origin, rotate.angle); run();
        point.set(this.mx, this.y).rotate(rotate.origin, rotate.angle); run();
        point.set(this.mx, this.my).rotate(rotate.origin, rotate.angle); run();
        point.set(this.x, this.my).rotate(rotate.origin, rotate.angle); run();

        this.x = minX;
        this.y = minY;
        this.w = maxX - minX;
        this.h = maxY - minY;

        return this;
    }

    setFromShapeRect(shapeRect){
        this.width = shapeRect.width;
        this.height = shapeRect.height;
        this.x = shapeRect.position.x - this.width / 2;
        this.y = shapeRect.position.y - this.height / 2;
        return this;
    }

    setFromCircle(circle, inner = true){
        if(inner === true){
            this.x = Math.sin(-135 / 180 * Math.PI) * circle.r + circle.x;
            this.y = Math.cos(-135 / 180 * Math.PI) * circle.r + circle.y;
            this.w = this.h = Math.sin(135 / 180 * Math.PI) * circle.r + circle.x - this.x;
        }

        else{
            this.x = circle.x - circle.r;
            this.y = circle.y - circle.r;
            this.w = this.h = circle.r * 2;
        }
        return this;
    }

    setFromPolygon(polygon, inner = true){
        if(inner === true){
            console.warn('Box: 暂不支持第二个参数为true');
        }

        else{
            const len = polygon.path.length;
            let x = Infinity, y = Infinity, mx = 0, my = 0;
            for(let k = 0, v; k < len; k+=2){
                v = polygon.path[k];
                if(v < x) x = v;
                else if(v > mx) mx = v;

                v = polygon.path[k+1];
                if(v < y) y = v;
                else if(v > my) my = v;

            }

            this.set(x, y, mx - x, my - y);

        }
        return this;
    }

    toArray(array, index){
        array[index] = this.x;
        array[index+1] = this.y;
        array[index+2] = this.w;
        array[index+3] = this.h;

        return this;
    }

    copy(box){
        this.x = box.x;
        this.y = box.y;
        this.w = box.w;
        this.h = box.h;
        return this;
        //return Object.assign(this, box); //this.set(box.x, box.y, box.w, box.h);
    }
    
    clone(){
        return new this.constructor().copy(this);
        //return Object.assign(new this.constructor(), this);
    }

    center(box){
        this.x = (box.w - this.w) / 2 + box.x;
        this.y = (box.h - this.h) / 2 + box.y;
        return this;
    }

    distance(x, y){
        return Math.sqrt(Math.pow(this.x - x, 2) + Math.pow(this.y - y, 2));
    }

    isEmpty(){
        return this.w <= 0 || this.h <= 0;
    }

    maxX(){
        return this.x + this.w;
    }

    maxY(){
        return this.y + this.h;
    }

    equals(box){
        return this.x === box.x && this.w === box.w && this.y === box.y && this.h === box.h;
    }

    expand(box){
        var v = Math.min(this.x, box.x);
        this.w = Math.max(this.x + this.w - v, box.x + box.w - v);
        this.x = v;

        v = Math.min(this.y, box.y);
        this.h = Math.max(this.y + this.h - v, box.y + box.h - v);
        this.y = v;
    }

    intersectsBox(box){
        return box.x + box.w < this.x || box.x > this.x + this.w || box.y + box.h < this.y || box.y > this.y + this.h ? false : true;
    }

    containsPoint(x, y){
        return x < this.x || x > this.x + this.w || y < this.y || y > this.y + this.h ? false : true;
    }

    containsBox(box){
        return this.x <= box.x && box.x + box.w <= this.x + this.w && this.y <= box.y && box.y + box.h <= this.y + this.h;
    }

    computeOverflow(p, r){
        r["copy"](this);
        
        if(this["x"] < p["x"]){
            r["x"] = p["x"];
            r["w"] -= p["x"] - this["x"];
        }

        if(this["y"] < p["y"]){
            r["y"] = p["y"];
            r["h"] -= p["y"] - this["y"];
        }

        var m = p["x"] + p["w"];
        if(r["x"] + r["w"] > m) r["w"] = m - r["x"];

        m = p["y"] + p["h"];
        if(r["y"] + r["h"] > m) r["h"] = m - r["y"];
    }
    
}




/* Circle 圆形
parameter:
attribute:
    x,y: Number; 中心点
    r: Number; 半径

    //只读
    r2: Number; //返回直径 r*2

method:
    set(x, y, r): this;
    pos(x, y): this;
    copy(circle: Circle): this;
    clone(): Circle;
    distance(x, y): Number;
    equals(circle: Circle): Bool;
    expand(circle: Circle): undefined;                     //扩容; 把circle合并到this
    containsPoint(x, y): Bool; 
    intersectsCircle(circle: Circle): Bool;
    intersectsBox(box: Box): Bool;
    setFromBox(box, inner = true): this;

*/
class Circle{

    get r2(){
        return this.r * 2;
    }

    constructor(x = 0, y = 0, r = -1){
        //this.set(0, 0, -1);
        this.x = x;
        this.y = y;
        this.r = r;
    }

    set(x, y, r){
        this.x = x;
        this.y = y;
        this.r = r;

        return this;
    }

    setFromBox(box, world = true, inner = true){
        this.x = box.w / 2 + (world === true ? box.x : 0);
        this.y = box.h / 2 + (world === true ? box.y : 0);
        this.r = inner === true ? Math.min(box.w, box.h) / 2 : UTILS.distance(0, 0, box.w, box.h) / 2;
    
        return this;
    }

    toArray(array, index){
        array[index] = this.x;
        array[index+1] = this.y;
        array[index+2] = this.r;
        
        return this;
    }

    pos(x, y){
        this.x = x;
        this.y = y;

        return this;
    }

    copy(circle){
        this.r = circle.r;
        this.x = circle.x;
        this.y = circle.y;

        return this;
    }

    clone(){

        return new this.constructor().copy(this);

    }

    distance(x, y){
        
        return Math.sqrt(Math.pow(this.x - x, 2) + Math.pow(this.y - y, 2));

    }

    expand(circle){

    }

    equals(circle){

        return circle.x === this.x && circle.y === this.y && circle.r === this.r;

    }

    containsPoint(x, y){

        return (Math.pow(x - this.x, 2) + Math.pow(y - this.y, 2) <= Math.pow(this.r, 2));

    }

    intersectsCircle(circle){

        return (Math.pow(circle.x - this.x, 2) + Math.pow(circle.y - this.y, 2) <= Math.pow(circle.r + this.r, 2));

    }

    intersectsBox(box){
        
        return (Math.pow(Math.max(box.x, Math.min(box.x + box.w, this.x)) - this.x, 2) + Math.pow(Math.max(box.y, Math.min(box.y + box.h, this.y)) - this.y, 2) <= Math.pow(this.r, 2));
    
    }

}




/* Polygon 多边形

parameter: 
    path: Array[x, y];

attribute:

    //只读属性
    path: Array[x, y]; 

method:
    add(x, y): this;             //x,y添加至path;
    containsPoint(x, y): Bool;    //x,y是否在多边形的内部(注意: 在路径上也返回 true)
    
*/
class Polygon{

    #position = null;
    #path2D = null;

    get path(){
        
        return this.#position;

    }

    constructor(path = []){
        this.#position = path;

        this.#path2D = new Path2D();
        
        var len = path.length;
        if(len >= 2){
            if(len % 2 !== 0){
                len -= 1;
                path.splice(len, 1);
            }

            const con = this.#path2D;
            con.moveTo(path[0], path[1]);
            for(let k = 2; k < len; k+=2) con.lineTo(path[k], path[k+1]);
            
        }

    }

    add(x, y){
        this.#position.push(x, y);
        this.#path2D.lineTo(x, y);
        return this;
    }

    containsPoint(x, y){
        
        return UTILS.emptyContext.isPointInPath(this.#path2D, x, y);

    }

    isInPolygon(checkPoint, polygonPoints) {
        var counter = 0;
        var i;
        var xinters;
        var p1, p2;
        var pointCount = polygonPoints.length;
        p1 = polygonPoints[0];
        for (i = 1; i <= pointCount; i++) {
            p2 = polygonPoints[i % pointCount];
            if (
                checkPoint[0] > Math.min(p1[0], p2[0]) &&
                checkPoint[0] <= Math.max(p1[0], p2[0])
            ) {
                if (checkPoint[1] <= Math.max(p1[1], p2[1])) {
                    if (p1[0] != p2[0]) {
                        xinters =
                            (checkPoint[0] - p1[0]) *
                                (p2[1] - p1[1]) /
                                (p2[0] - p1[0]) +
                            p1[1];
                        if (p1[1] == p2[1] || checkPoint[1] <= xinters) {
                            counter++;
                        }
                    }
                }
            }
            p1 = p2;
        }
        if (counter % 2 == 0) {
            return false;
        } else {
            return true;
        }
    }

    containsPolygon(polygon){
        const path = polygon.path, len = path.length;
        for(let k = 0; k < len; k += 2){
            if(this.containsPoint(path[k], path[k+1]) === false) return false;
        }

        return true;
    }

    toPoints(){
        const path = this.path, len = path.length, result = [];
        
        for(let k = 0; k < len; k += 2) result.push(new Point(path[k], path[k+1]));

        return result;
    }

    toLines(){
        const path = this.path, len = path.length, result = [];
        
        for(let k = 0, x = NaN, y; k < len; k += 2){

            if(isNaN(x)){
                x = path[k];
                y = path[k+1];
                continue;
            }

            const line = new Line(x, y, path[k], path[k+1]);
            
            x = line.x1;
            y = line.y1;

            result.push(line);

        }

        return result;
    }

    merge(polygon){

        const linesA = this.toLines(), linesB = polygon.toLines(), nodes = [], newLines = [],
        
        pointA = new Point(), pointB = new Point(),

        forEachNodes = (pathA, pathB, funcA = null, funcB = null) => {
            for(let k = 0, lenA = pathA.length, lenB = pathB.length; k < lenA; k++){
                if(funcA !== null) funcA(pathA[k]);

                for(let i = 0; i < lenB; i++){
                    if(funcB !== null) funcB(pathB[i], pathA[k]);
                }
    
            }
        }

        if(this.containsPolygon(polygon)){console.log('this -> polygon');
            forEachNodes(linesA, linesB, lineA => newLines.push(lineA), (lineB, lineA) => {
                if(lineA.intersectPoint(lineB, pointA) === pointA) newLines.push(pointA.clone());
            });

            return newLines;
        }

        //收集所有的交点 (保存至 line)
        forEachNodes(linesA, linesB, lineA => lineA.nodes = [], (lineB, lineA) => {
            if(lineB.nodes === undefined) lineB.nodes = [];
            if(lineA.intersectPoint(lineB, pointA) === pointA){
                const node = {
                    lineA: lineA, 
                    lineB: lineB, 
                    point: pointA.clone(),
                    disA: pointA.distanceCompare(pointB.set(lineA.x, lineA.y)),
                    disB: pointA.distanceCompare(pointB.set(lineB.x, lineB.y)),
                }
                lineA.nodes.push(node);
                lineB.nodes.push(node);
                nodes.push(node);
            }
        });

        //交点以原点为目标排序
        for(let k = 0, sotr = function (a,b){return a.disA - b.disA;}, countA = linesA.length; k < countA; k++) linesA[k].nodes.sort(sotr);
        for(let k = 0, sotr = function (a,b){return a.disB - b.disB;}, countB = linesB.length; k < countB; k++) linesB[k].nodes.sort(sotr);

        var _loopTypeA, _loopTypeB;
        const result_loop = {
            lines: null,
            loopType: '',
            line: null,
            count: 0,
            indexed: 0,
        },
        
        //遍历某条线
        loop = (lines, index, loopType) => {
            const length = lines.length, indexed = lines.length, model = lines === linesA ? polygon : this;
        
            var line, i = 1;
            while(true){
                if(loopType === 'next') index = index === length - 1 ? 0 : index + 1;
                else if(loopType === 'back') index = index === 0 ? length - 1 : index - 1;
                line = lines[index];

                result_loop.count = line.nodes.length;
                if(result_loop.count !== 0){
                    result_loop.lines = lines;
                    result_loop.loopType = loopType;
                    result_loop.line = line;
                    result_loop.indexed = index;
                    if(loopType === 'next') addLine(line, model);

                    return result_loop;
                }
                
                addLine(line, model);
                if(indexed === i++) break;

            }
            
        },

        //更新或创建交点的索引
        setNodeIndex = (lines, index, loopType) => {
            const line = lines[index], count = line.nodes.length;
            if(loopType === undefined) loopType = lines === linesA ? _loopTypeA : _loopTypeB;

            if(loopType === undefined) return;
            
            if(line.nodeIndex === undefined){
                line.nodeIndex = loopType === 'next' ? 0 : count - 1;
                line.nodeState = count === 1 ? 'end' : 'start';
            
            }

            else{
                if(line.nodeState === 'end' || line.nodeState === ''){
                    line.nodeState = '';
                    return;
                }

                if(loopType === 'next'){
                    line.nodeIndex += 1;

                    if(line.nodeIndex === count - 1) line.nodeState = 'end';
                    else line.nodeState = 'run';
                }

                else if(loopType === 'back'){
                    line.nodeIndex -= 1;

                    if(line.nodeIndex === 0) line.nodeState = 'end';
                    else line.nodeState = 'run';
                }

            }

        },

        //只有在跳线的时候才执行此方法, 如果跳线的话: 某条线上的交点必然在两端;
        getLoopType = (lines, index, nodePoint) => {
            const line = lines[index], lineNext = lines[index === lines.length - 1 ? 0 : index + 1],

            model = lines === linesA ? polygon : this,
            isLineBack = newLines.includes(line) === false && model.containsPoint(line.x, line.y) === false,
            isLineNext = newLines.includes(lineNext) === false && model.containsPoint(lineNext.x, lineNext.y) === false;
            
            if(isLineBack && isLineNext){
                const len = line.nodes.length;
                if(len >= 2){
                    if(line.nodes[len - 1].point.equals(nodePoint)) return 'next';
                    else if(line.nodes[0].point.equals(nodePoint)) return 'back';
                }
                
                else console.warn('路径复杂', line);
                
            }

            else if(isLineNext){
                return 'next';
            }

            else if(isLineBack){
                return 'back';
            }

            return '';
        },

        //添加线至新的形状数组
        addLine = (line, model) => {
            //if(newLines.includes(line) === false && model.containsPoint(line.x, line.y) === false) newLines.push(line);
            if(line.nodes.length === 0) newLines.push(line);
            else if(model.containsPoint(line.x, line.y) === false) newLines.push(line);
            
        },

        //处理拥有交点的线
        computeNodes = v => {
            if(v === undefined || v.count === 0) return;
            
            setNodeIndex(v.lines, v.indexed, v.loopType);
        
            //添加交点
            const node = v.line.nodes[v.line.nodeIndex];
            if(newLines.includes(node.point) === false) newLines.push(node.point);
            else return;

            var lines = v.lines === linesA ? linesB : linesA, 
            line = lines === linesA ? node.lineA : node.lineB, 
            index = lines.indexOf(line);

            setNodeIndex(lines, index);
        
            //选择交点状态
            var nodeState = line.nodeState !== undefined ? line.nodeState : v.line.nodeState;
            if((v.count <= 2 && line.nodes.length > 2) || (v.count > 2 && line.nodes.length <= 2)){
                if(line.nodeState === 'start'){
                    const backLine = v.loopType === 'next' ? v.lines[v.indexed === 0 ? v.lines.length-1 : v.indexed-1] : v.lines[v.indexed === v.lines.length-1 ? 0 : v.indexed+1];
                    
                    if(newLines.includes(backLine) && backLine.nodes.length === 0){
                        nodeState = 'run';
                    }

                }
                else if(line.nodeState === 'end'){
                    const nextLine = v.loopType === 'next' ? v.lines[v.indexed === v.lines.length-1 ? 0 : v.indexed+1] : v.lines[v.indexed === 0 ? v.lines.length-1 : v.indexed-1];
                    const model = v.lines === linesA ? polygon : this;
                    if(model.containsPoint(nextLine.x, nextLine.y) === false && nextLine.nodes.length === 0){
                        nodeState = 'run';
                    }
                    
                }
            }

            switch(nodeState){

                //不跳线
                case 'run': 
                    if(v.loopType === 'back') addLine(v.line, v.lines === linesA ? polygon : this);
                    return computeNodes(loop(v.lines, v.indexed, v.loopType));

                //跳线
                case 'start': 
                case 'end': 
                    const loopType = getLoopType(lines, index, node.point);
                    if(loopType !== ''){
                        if(lines === linesA) _loopTypeA = loopType;
                        else _loopTypeB = loopType;
                        if(loopType === 'back') addLine(line, v.lines === linesA ? this : polygon);
                        return computeNodes(loop(lines, index, loopType));
                    }
                    break;

            }

        }
        
        //获取介入点
        var startLine = null;
        for(let k = 0, len = nodes.length, node; k < len; k++){
            node = nodes[k];
            if(node.lineA.nodes.length !== 0){
                startLine = node.lineA;
                if(node.lineA.nodes.length === 1 && node.lineB.nodes.length > 1){
                    startLine = node.lineB.nodes[0].lineB;
                    result_loop.lines = linesB;
                    result_loop.loopType = _loopTypeB = 'next';
                }
                else{
                    result_loop.lines = linesA;
                    result_loop.loopType = _loopTypeA = 'next';
                }
                result_loop.line = startLine;
                result_loop.count = startLine.nodes.length;
                result_loop.indexed = result_loop.lines.indexOf(startLine);
                break;
            }
        }

        if(startLine === null){
            console.warn('Polygon: 找不到介入点, 终止了合并');
            return newLines;
        }

        computeNodes(result_loop);
    
        return newLines;
    }

}




/* ShapeRect (一般2d矩形的原点在左上, 此矩形类的原点在中间)
parameter: 
    width = 0, height = 0

attribute: 
    width, height: Number;     //矩形的宽高
    position: Point;        //位置(是旋转和缩放的中心点)
    rotation: Number;        //旋转(绕 Z 轴旋转的弧度)
    scale: Point;            //缩放

method:
    setFromBox(box): this;                //Box 转为 ShapeRect
    compute(): undefined;                //计算出矩形
    applyCanvas(context): undefined;    //矩形应用到画布的上下文中

demo:
    const canvasRect = new ShapeRect(100, 150); console.log(canvasRect);

    const canvas = document.createElement("canvas");
    canvas.width = WORLD.width;
    canvas.height = WORLD.height;
    canvas.style = `
        position: absolute;
        z-index: 9999;
        background: rgb(127,127,127);
    `;
    document.body.appendChild(canvas);

    canvasRect.position.set(300, 300);
    canvasRect.rotation = UTILS.toAngle(45);
    canvasRect.scale.set(1.5, 1.5);
    canvasRect.compute();

    const context = canvas.getContext("2d");
    canvasRect.applyCanvas(context);

    context.strokeStyle = "red";
    context.stroke();
*/
class ShapeRect{

    #dots = [];
    #size = new Point();
    #min = new Point();
    #max = new Point();

    constructor(width = 0, height = 0){
        this.width = width;
        this.height = height;
        this.position = new Point();
        this.rotation = 0;
        this.scale = new Point(1, 1);
    }

    setFromBox(box){
        this.width = box.w;
        this.height = box.h;
        this.position.set(box.cx, box.cy);
        return this;
    }

    compute(){
        //scale
        this.#size.set(this.width * this.scale.x, this.height * this.scale.y);
        
        //position
        this.#min.set(this.position.x - this.#size.x / 2, this.position.y - this.#size.y / 2);
        this.#max.set(this.#min.x + this.#size.x, this.#min.y + this.#size.y);
        
        //rotation
        const point = UTILS.emptyPoint;
        this.#dots.length = 0;
        
        point.set(this.#min.x, this.#min.y).rotate(this.position, this.rotation);
        this.#dots.push(point.x, point.y);

        point.set(this.#max.x, this.#min.y).rotate(this.position, this.rotation);
        this.#dots.push(point.x, point.y);

        point.set(this.#max.x, this.#max.y).rotate(this.position, this.rotation);
        this.#dots.push(point.x, point.y);

        point.set(this.#min.x, this.#max.y).rotate(this.position, this.rotation);
        this.#dots.push(point.x, point.y);

        //缩放旋转后的 min 与 max
        //this.#min.set(Math.min(this.#dots[0], this.#dots[2], this.#dots[4], this.#dots[6]), Math.min(this.#dots[1], this.#dots[3], this.#dots[5], this.#dots[7]));
        //this.#max.set(Math.max(this.#dots[0], this.#dots[2], this.#dots[4], this.#dots[6]), Math.max(this.#dots[1], this.#dots[3], this.#dots[5], this.#dots[7]))
    }

    drawImage(img, context){
        UTILS.emptyContext.canvas.width = this.#size.x;
        UTILS.emptyContext.canvas.height = this.#size.y;
        UTILS.emptyContext.drawImage(img, 0, 0, this.#size.x, this.#size.y);

        const imageData = UTILS.emptyContext.getImageData(0, 0, this.#size.x, this.#size.y),
        width = imageData.width, height = imageData.height,
        len = width * height, point = UTILS.emptyPoint, center = UTILS.emptyPointA.set(width/2, height/2),

        newImageData = UTILS.emptyContext.createImageData(width, height);
        
        for(let k = 0; k < len; k++){
            point.set(k % width, Math.floor(k / width)).rotate(center, this.rotation);
            if(point.x < 0 || point.y < 0 || point.x > newImageData.width-1 || point.y > newImageData.height-1) continue;

            point.set((width * Math.round(point.y) + Math.round(point.x)) * 4, k * 4);
            newImageData.data[point.x] = imageData.data[point.y];
            newImageData.data[point.x + 1] = imageData.data[point.y + 1];
            newImageData.data[point.x + 2] = imageData.data[point.y + 2];
            newImageData.data[point.x + 3] = imageData.data[point.y + 3];
        }

        context.putImageData(newImageData, 20, 20);
    }

    applyCanvas(context){
        context.beginPath();
        context.moveTo(this.#dots[0], this.#dots[1]);

        for(let k = 2, len = this.#dots.length; k < len; k += 2){
            context.lineTo(this.#dots[k], this.#dots[k + 1]);
        }

        context.closePath();
    }

}




/* RGBColor
parameter: 
    r, g, b

method:
    set(r, g, b: Number): this;            //rgb: 0 - 255; 第一个参数可以为 css color
    setFormHex(hex: Number): this;         //
    setFormHSV(h, s, v: Number): this;    //h:0-360; s,v:0-100; 颜色, 明度, 暗度
    setFormString(str: String): Number;    //str: 英文|css color; 返回的是透明度 (如果为 rgba 则返回a; 否则总是返回1)

    copy(v: RGBColor): this;
    clone(): RGBColor;

    getHex(): Number;
    getHexString(): String;
    getHSV(result: Object{h, s, v}): result;    //result: 默认是一个新的Object
    getRGBA(alpha: Number): String;             //alpha: 0 - 1; 默认 1
    getStyle()                                     //.getRGBA()别名

    stringToColor(str: String): String; //str 转为 css color; 如果str不是color格式则返回 ""

*/
class RGBColor{

    constructor(r = 255, g = 255, b = 255){
        this.r = r;
        this.g = g;
        this.b = b;
    }

    copy(v){
        this.r = v.r;
        this.g = v.g;
        this.b = v.b;
        return this;
    }

    clone(){
        return new this.constructor().copy(this);
    }

    set(r, g, b){
        if(typeof r !== "string"){
            this.r = r || 255;
            this.g = g || 255;
            this.b = b || 255;
        }

        else this.setFormString(r);
        
        return this;
    }

    setFormHex(hex){
        hex = Math.floor( hex );

        this.r = hex >> 16 & 255;
        this.g = hex >> 8 & 255;
        this.b = hex & 255;
        return this;
    }

    setFormHSV(h, s, v){
        h = h >= 360 ? 0 : h;
        var s=s/100;
        var v=v/100;
        var h1=Math.floor(h/60) % 6;
        var f=h/60-h1;
        var p=v*(1-s);
        var q=v*(1-f*s);
        var t=v*(1-(1-f)*s);
        var r,g,b;
        switch(h1){
            case 0:
                r=v;
                g=t;
                b=p;
                break;
            case 1:
                r=q;
                g=v;
                b=p;
                break;
            case 2:
                r=p;
                g=v;
                b=t;
                break;
            case 3:
                r=p;
                g=q;
                b=v;
                break;
            case 4:
                r=t;
                g=p;
                b=v;
                break;
            case 5:
                r=v;
                g=p;
                b=q;
                break;
        }

        this.r = Math.round(r*255);
        this.g = Math.round(g*255);
        this.b = Math.round(b*255);
        return this;
    }

    setFormString(color){
        if(typeof color !== "string") return 1;
        var _color = this.stringToColor(color);
        
        if(_color[0] === "#"){
            const len = _color.length;
            if(len === 4){
                _color = _color.slice(1);
                this.setFormHex(parseInt("0x"+_color + "" + _color));
            }
            else if(len === 7) this.setFormHex(parseInt("0x"+_color.slice(1)));
        }

        else if(_color[0] === "r" && _color[1] === "g" && _color[2] === "b"){
            const arr = [];
            for(let k = 0, len = _color.length, v = "", is = false; k < len; k++){
                
                if(is === true){
                    if(_color[k] === "," || _color[k] === ")"){
                        arr.push(parseFloat(v));
                        v = "";
                    }
                    else v += _color[k];
                    
                }

                else if(_color[k] === "(") is = true;
                
            }

            this.set(arr[0], arr[1], arr[2]);
            return arr[3] === undefined ? 1 : arr[3];
        }
        
        return 1;
    }

    getHex(){

        return Math.max( 0, Math.min( 255, this.r ) ) << 16 ^ Math.max( 0, Math.min( 255, this.g ) ) << 8 ^ Math.max( 0, Math.min( 255, this.b ) ) << 0;

    }

    getHexString(){

        return '#' + ( '000000' + this.getHex().toString( 16 ) ).slice( - 6 );

    }

    getHSV(result){
        result = result || {}
        var r=this.r/255;
        var g=this.g/255;
        var b=this.b/255;
        var h,s,v;
        var min=Math.min(r,g,b);
        var max=v=Math.max(r,g,b);
        var l=(min+max)/2;
        var difference = max-min;
        
        if(max==min){
            h=0;
        }else{
            switch(max){
                case r: h=(g-b)/difference+(g < b ? 6 : 0);break;
                case g: h=2.0+(b-r)/difference;break;
                case b: h=4.0+(r-g)/difference;break;
            }
            h=Math.round(h*60);
        }
        if(max==0){
            s=0;
        }else{
            s=1-min/max;
        }
        s=Math.round(s*100);
        v=Math.round(v*100);
        result.h = h;
        result.s = s;
        result.v = v;
        return result;
    }

    getStyle(){
        return this.getRGBA(1);
    }

    getRGBA(alpha = 1){
        return `rgba(${this.r},${this.g},${this.b},${alpha})`;
    }

    stringToColor(str){
        var _color = "";
        for(let k = 0, len = str.length; k < len; k++){
            if(str[k] === " ") continue;
            _color += str[k];
        }
        
        if(_color[0] === "#" || (_color[0] === "r" && _color[1] === "g" && _color[2] === "b")) return _color;

        return ColorRefTable[_color] || "";
    }

}




/* Timer 定时器 

parameter:
    func: Function; //定时器运行时的回调; 默认 null, 如果定义构造器将自动调用一次.restart()方法
    speed: Number; //延迟多少毫秒执行一次 func; 默认 3000;
    step: Integer; //执行多少次: 延迟speed毫秒执行一次 func; 默认 Infinity;
    
attribute:
    func, speed, step;    //这些属性可以随时更改;

    //只读属性
    readyState: String;    //定时器状态; 可能值: '', 'start', 'running', 'done'; ''表示定时器从未启动
    number: Number;        //运行的次数

method:
    start(func, speed): this;    //启动定时器 (如果定时器正在运行则什么都不会做)
    restart(): undefined;        //重启定时器
    stop(): undefined;            //停止定时器

demo:
    //每 3000 毫秒 打印一次 timer.number
    new Timer(timer => {
        console.log(timer.number);
    }, 3000);

*/
class Timer{

    #restart = -1;
    #speed = 0;
    #isRun = false;
    #i = 0;
    #readyState = ''; //start|running

    get number(){
        return this.#i;
    }
    
    get readyState(){
        return this.#i >= this.step ? 'done' : this.#readyState;
    }

    get running(){
        return this.#isRun;
    }

    constructor(func = null, speed = 3000, step = Infinity){
        this.func = func;
        this.speed = speed;
        this.step = step;
        //this.onDone = null;
    
        if(typeof this.func === "function") this.restart();

    }

    start(func, time){
        if(typeof func === 'function') this.func = func;
        if(UTILS.isNumber(time) === true) this.speed = time;
        this.restart();

        return this;
    }

    restart(){
        if(this.#isRun === false){
            setTimeout(this._loop, this.speed);
            this.#isRun = true;
            this.#restart = -1;
            this.#i = 0;
            this.#readyState = 'start';
            
        }

        else{
            this.#restart = Date.now();
            this.#speed = this.speed;

        }

    }

    stop(){
        if(this.#isRun === true){
            this.#restart = -1;
            this.#i = this.step;
        }

    }

    _loop = () => {

        //重启计时器
        if(this.#restart !== -1){
            
            let gone = Date.now() - this.#restart;
            this.#restart = -1;
            
            if(gone >= this.#speed) gone = this.speed;
            else{
                if(this.#speed === this.speed) gone = this.#speed - gone;
                else gone = (this.#speed - gone) / this.#speed * this.speed;
            }
            
            setTimeout(this._loop, gone);
            
            this.#i = 1;
            if(this.func !== null) this.func(this);

        }

        //正在运行
        else if(this.#i < this.step){

            setTimeout(this._loop, this.speed);

            this.#i++;
            if(this.#readyState !== 'running') this.#readyState = 'running';
            if(this.func !== null) this.func(this);

        }

        //完成
        else this.#isRun = false;

    }

}




/* SeekPath A*寻路

parameter: 
    option: Object{
        angle: Number,         //8 || 16
        timeout: Number,     //单位为毫秒
        size: Number,         //每格的宽高
        lenX, lenY: Number,    //长度
        disables: Array[0||1],
        heights: Array[Number],
        path: Array[], //存放寻路结果 默认创建一个空数组
    }

attribute:
    size: Number;     //每个索引的大小
    lenX: Number;     //最大长度x (设置此属性时, 你需要重新.initMap(heights);)
    lenY: Number;     //最大长度y (设置此属性时, 你需要重新.initMap(heights);)

    //此属性已废弃 range: Box;            //本次的搜索范围, 默认: 0,0,lenX,lenY
    angle: Number;         //8四方向 或 16八方向 默认 16
    timeout: Number;     //超时毫秒 默认 500
    mapRange: Box;        //地图box
    //此属性已废弃(run函数不在检测相邻的高) maxHeight: Number;     //相邻可走的最大高 默认 6

    //只读属性
    success: Bool;            //只读; 本次搜索是否成功找到终点; (如果为false说明.run()返回的是 距终点最近的路径; 超时也会被判定为false)
    path: Array[x, y, z];    //存放.run()返回的路径
    map: Map;                 //地图的缓存数据

method:
    initMap(heights: Array[Number]): undefiend;     //初始化类时自动调用一次; heights:如果你的场景存在高请定义此参数
    run(x, y, x1, y1: Number): Array[x, y, z];         //参数索引坐标
    getDots(x, y, a, r): Array[ix, iy];             //获取周围的点 x,y, a:8|16, r:存放结果数组
    getLegalPoints(ix, iy, count): Array[x, y, z];    //获取 ix, iy 周围 合法的, 相邻的 count 个点

demo:
    const sp = new SeekPath({
        angle: 16,
        timeout: 500,
        //maxHeight: 6,
        size: 10,
        lenX: 1000,
        lenY: 1000,
    }),

    path = sp.run(0, 0, 1000, 1000);

    console.log(sp);

*/
class SeekPath{

    static _open = []
    static _dots = [] //.run() .getLegalPoints()
    static dots4 = []; //._check()
    static _sort = function (a, b){return a["f"] - b["f"];}

    #map = null;
    #path = null;
    #success = true;
    #halfX = 50;
    #halfY = 50;

    #size = 10;
    #lenX = 10;
    #lenY = 10;

    constructor(option = {}){
        this.angle = (option.angle === 8 || option.angle === 16) ? option.angle : 16; //8四方向 或 16八方向
        this.timeout = option.timeout || 500; //超时毫秒
        //this.maxHeight = option.maxHeight || 6;
        this.mapRange = new Box();
        this.size = option.size || 10;
        this.lenX = option.lenX || 10;
        this.lenY = option.lenY || 10;
        this.#path = Array.isArray(option.path) ? option.path : [];
        this.initMap(option.disable, option.height);
        option = undefined
    }

    //this.#map[x][y] = Object{height: 此点的高,默认0, is: 此点是否可走,默认1(disable)};
    get map(){
        return this.#map;
    }

    //this.#path = Array[x,y,z]
    get path(){
        return this.#path;
    }

    get success(){
        return this.#success;
    }

    get size(){
        return this.#size;
    }

    set size(v){
        this.#size = v;
        v = v / 2;
        this.#halfX = v * this.#lenX;
        this.#halfY = v * this.#lenY;
    }

    get lenX(){
        return this.#lenX;
    }

    set lenX(v){
        this.#lenX = v;
        v = this.#size / 2;
        this.#halfX = v * this.#lenX;
        this.#halfY = v * this.#lenY;
        
    }

    get lenY(){
        return this.#lenY;
    }

    set lenY(v){
        this.#lenY = v;
        v = this.#size / 2;
        this.#halfX = v * this.#lenX;
        this.#halfY = v * this.#lenY;
        
    }

    toScene(n, v){ //n = "x|y"
        //n = n === "y" ? "lenY" : "lenX";
        if(n === "y" || n === "z") return v * this.#size - this.#halfY;
        return v * this.#size - this.#halfX;
    }
    
    toIndex(n, v){
        //n = n === "y" ? "lenY" : "lenX";
        if(n === "y" || n === "z") return Math.round((this.#halfY + v) / this.#size);
        return Math.round((this.#halfX + v) / this.#size);
    }

    initMap(disable, height){
        
        disable = Array.isArray(disable) === true ? disable : null;
        height = Array.isArray(height) === true ? height : null;
        
        const lenX = this.lenX, lenY = this.lenY;
        var getHeight = (ix, iy) => {
            if(height === null) return 0;
            ix = height[ix * lenY + iy];
            if(ix === undefined) return 0;
            return ix;
        },
        getDisable = (ix, iy) => {
            if(disable === null) return 1;
            ix = disable[ix * lenY + iy];
            if(ix === undefined) return 0;
            return ix;
        },

        map = []//new Map();

        for(let x = 0, y, m; x < lenX; x++){
            m = []//new Map();
            for(y = 0; y < lenY; y++) m[y] = {x:x, y:y, height:getHeight(x, y), is:getDisable(x, y),  g:0, h:0, f:0, p:null, id:""}//m.set(y, {x:x, y:y, height:getHeight(x, y),   g:0, h:0, f:0, p:null, id:""});
            map[x] = m;//map.set(x, m);
        }
        
        this.#map = map;
        this._id = -1;
        this._updateID();
        this.mapRange.set(0, 0, this.#lenX-1, this.#lenY-1);

        map = disable = height = getHeight = undefined;

    }

    getLegalPoints(ix, iy, count, result = []){  //不包括 ix, iy
        const _dots = SeekPath._dots;
        result.length = 0;
        result[0] = this.#map[ix][iy];
        count += 1;
        
        while(result.length < count){
            for(let k = 0, i, n, d, len = result.length; k < len; k++){
                n = result[k];
                this.getDots(n.x, n.y, this.angle, _dots);
                for(i = 0; i < this.angle; i += 2){
                    d = this.#map[_dots[i]][_dots[i+1]];
                    if(d.is === 1 && this.mapRange.containsPoint(d.x, d.y) && !result.includes(d)){
                        if(Math.abs(n.x - d.x) + Math.abs(n.y - d.y) === 2 && this._check(n, d)){
                            result.push(d);
                        }
                    }
                }
            }
        }
    
        result.splice(0, 1);
        return result;
    }

    getLinePoints(now, next, count, result = []){ //不包括 now 
        if(count % 2 !== 0) count += 1;

        const len = count / 2, angle90 = 90/180*Math.PI;

        var i, ix, iy, n, nn = next, is = false;

        UTILS.emptyPoint.set(now.x, now.y).rotate(next, angle90);
        var disX = UTILS.emptyPoint.x - next.x, 
        disY = UTILS.emptyPoint.y - next.y;
        
        for(i = 0; i < len; i++){
            if(is){
                result[len-1-i] = nn;
                continue;
            }
            ix = disX + disX * i + next.x;
            iy = disY + disY * i + next.y;

            n = this.#map[ix][iy];
            if(n.is === 1) nn = n;
            else is = true;
            result[len-1-i] = nn;
        }

        //result[len] = next;
        is = false;
        nn = next;

        UTILS.emptyPoint.set(now.x, now.y).rotate(next, -angle90);
        disX = UTILS.emptyPoint.x - next.x, 
        disY = UTILS.emptyPoint.y - next.y;

        for(i = 0; i < len; i++){
            if(is){
                result[len+i] = nn;
                continue;
            }
            ix = disX + disX * i + next.x;
            iy = disY + disY * i + next.y;

            n = this.#map[ix][iy];
            if(n.is === 1) nn = n;
            else is = true;
            result[len+i] = nn;
        }

        return result;
    }

    getDots(x, y, a, r = []){ //获取周围的点 x,y, a:8|16, r:存放结果数组
        r.length = 0;
        const x_1 = x-1, x1 = x+1, y_1 = y-1, y1 = y+1;
        if(a === 16) r.push(x_1, y_1, x, y_1, x1, y_1, x_1, y, x1, y, x_1, y1, x, y1, x1, y1);
        else r.push(x, y_1, x, y1, x_1, y, x1, y);
    }

    getDisMHD(nodeA, nodeB){
        return Math.abs(nodeA.x - nodeB.x) + Math.abs(nodeA.y - nodeB.y);
    }

    _updateID(){ //更新标记
        this._id++;
        this._openID = "o_"+this._id;
        this._closeID = "c_"+this._id;
    }

    _check(dotA, dotB){ //检测 a 是否能到 b
        //获取 dotB 周围的4个点 并 遍历这4个点
        this.getDots(dotB.x, dotB.y, 8, SeekPath.dots4);
        for(let k = 0, x, y; k < 8; k += 2){
            x = SeekPath.dots4[k]; 
            y = SeekPath.dots4[k+1];
            if(this.mapRange.containsPoint(x, y) === false) continue;

            //找出 dotA 与 dotB 相交的两个点:
            if(Math.abs(dotA.x - x) + Math.abs(dotA.y - y) === 1){
                //如果其中一个交点是不可走的则 dotA 到 dotB 不可走, 既返回 false
                if(this.#map[x][y].is === 0) return false;
            }

        }

        return true;
    }

    run(x, y, x1, y1, path = this.#path){
        path.length = 0;
        if(this.#map === null || this.mapRange.containsPoint(x, y) === false) return path;
        
        var _n = this.#map[x][y];
        if(_n.is === 0) return path;

        const _sort = SeekPath._sort,
        _open = SeekPath._open,
        _dots = SeekPath._dots, 
        time = Date.now();

        //var isDot = true, 
        var suc = _n, k, mhd, g, h, f, _d;

        _n.g = 0;
        _n.h = _n.h = Math.abs(x1 - x) * 10 + Math.abs(y1 - y) * 10; 
        _n.f = _n.h;
        _n.p = null;
        this._updateID();
        _n.id = this._openID;
        _open.push(_n);
        
        while(_open.length !== 0){
            if(Date.now() - time > this.timeout) break;

            _open.sort(_sort);
            _n = _open.shift();
            if(_n.x === x1 && _n.y === y1){
                suc = _n;
                break;
            }
            
            if(suc.h > _n.h) suc = _n;
            _n.id = this._closeID;
            this.getDots(_n.x, _n.y, this.angle, _dots);
            
            for(k = 0; k < this.angle; k += 2){
                
                _d = this.#map[_dots[k]][_dots[k+1]];
                if(_d.id === this._closeID || _d.is === 0 || this.mapRange.containsPoint(_d.x, _d.y) === false) continue;

                mhd = Math["abs"](_n["x"] - _d.x) + Math["abs"](_n["y"] - _d.y);
                g = _n["g"] + (mhd === 1 ? 10 : 14);
                h = Math["abs"](x1 - _d.x) * 10 + Math["abs"](y1 - _d.y) * 10;
                f = g + h;
            
                if(_d.id !== this._openID){
                    //如果是斜角和8方向:
                    if(mhd !== 1 && this.angle === 16){
                        if(this._check(_n, _d)){
                            _d.g = g;
                            _d.h = h;
                            _d.f = f;
                            _d.p = _n;
                            _d.id = this._openID;
                            _open.push(_d);
                        }
                    }else{
                        _d.g = g;
                        _d.h = h;
                        _d.f = f;
                        _d.p = _n;
                        _d.id = this._openID;
                        _open.push(_d);
                    }
                }

                else if(g < _d.g){
                    _d.g = g;
                    _d.f = g + _d.h;
                    _d.p = _n;
                }
    
            }
        }

        this.#success = suc === _n;

        while(suc !== null){
            path.unshift(suc);
            //path.unshift(this.toScene("x", suc["x"]), suc["height"], this.toScene("y", suc["y"]));
            suc = suc["p"];
        }

        _open.length = _dots.length = 0;
        
        return path;
    }

}




/* TweenValue (从 原点 以规定的时间到达  终点)

parameter: origin, end, time, onUpdate, onEnd;

attribute:
    origin: Object; //原点(起点)
    end: Object; //终点
    time: Number; //origin 到 end 花费的时间
    onUpdate: Function; //更新回调; 一个回调参数 origin; 默认null;
    onEnd: Function; //结束回调; 没有回调参数; 默认null; (如果返回的是"restart"将不从队列删除, 你可以在onEnd中更新.end不间断的继续补间)

method:
    reset(origin, end: Object): undefined; //更换 .origin, .end; 它会清除其它对象的缓存属性
    reverse(): undefined; //this.end 复制 this.origin 的原始值
    update(): undefined; //Tween 通过此方法统一更新 TweenValue

demo: 
    //init Tween:
    const tween = new Tween(),
    animate = function (){
        requestAnimationFrame(animate);
        tween.update();
    }

    //init TweenValue:
    const v1 = new Tween.Value({x:0, y:0}, {x:5, y:10}, 1000, v => console.log(v));
    
    animate();
    tween.start(v1);

*/
class TweenValue{

    constructor(origin = {}, end = {}, time = 500, onEnd = null, onUpdate = null, onStart = null){
        this.origin = origin;
        this.end = end;
        this.time = time;

        this.onUpdate = onUpdate;
        this.onEnd = onEnd;
        this.onStart = onStart;
        
        //以下属性不能直接设置
        this._r = null;
        this._t = 0;
        this._v = Object.create(null);
    }

    _start(){
        var v = "";
        for(v in this.origin) this._v[v] = this.origin[v];
        if(this.onStart !== null) this.onStart(this);
        this._t = Date.now();
        //this.update();
    }

    reset(origin, end){
        this.origin = origin;
        this.end = end;
        this._v = Object.create(null);
    }

    reverse(){
        var n = "";
        for(n in this.origin) this.end[n] = this._v[n];
    }

    update(){

        if(this["_r"] !== null){

            var ted = Date["now"]() - this["_t"];

            if(ted >= this["time"]){

                for(ted in this["origin"]) this["origin"][ted] = this["end"][ted];

                if(this["onEnd"] !== null){

                    if(this["onEnd"](this) === "restart"){
                        if(this["onUpdate"] !== null) this["onUpdate"](this["origin"]);
                        this["_start"]();
                    }

                    else this["_r"]["stop"](this);
                    
                }

                else this["_r"]["stop"](this);

            }

            else{
                ted = ted / this["time"];
                let n = "";
                for(n in this["origin"]) this["origin"][n] = ted * (this["end"][n] - this["_v"][n]) + this["_v"][n];
                if(this["onUpdate"] !== null) this["onUpdate"](this["origin"]);
            }

        }

    }

}




/* Tween 动画补间 (TweenValue 的root, 可以管理多个TweenValue)

parameter:
attribute:
method:
    start(value: TweenValue): undefined;
    stop(value: TweenValue): undefined;

static:
    Value: TweenValue;

demo:
    //init Tween:
    const tween = new Tween(),
    animate = function (){
        requestAnimationFrame(animate);
        tween.update();
    }

    //init TweenValue:
    const v2 = new Tween.Value({x:0, y:0}, {x:5, y:10}, 1000, v => console.log(v), v => {
        v2.reverse(); //v2.end 复制起始值
        return "restart"; //返回"restart"表示不删除队列, 需要继续补间
    });
    
    animate();
    tween.start(v2);

*/
class Tween extends RunningList{

    static Value = TweenValue;

    constructor(){
        super();
    }

    start(value){
        this.add(value);
        value._r = this;
        value._start();
    }

    stop(value){
        this.remove(value);
        value._r = null;
    }

}




/* TweenTarget 朝着轴插值(有效的跟踪动态目标, 注意此类需要配合 RunningList 类使用, 因为此类在任何情况下都没有阻止你调用.update()方法)
parameter:    
    v1 = {x: 0}, 
    v2 = {x: 100}, 
    distance = 1,        //每次移动的距离
    onUpdate = null,    //
    onEnd = null

attribute:
    v1: Object;             //起点
    v2: Object;             //终点
    onUpdate: Function;        //
    onEnd: Function;         //

method:
    update(): undefined;                        //一般在动画循环里执行此方法
    updateAxis(): undefined;                     //更新v1至v2的方向轴 (初始化时构造器自动调用一次)
    setDistance(distance: Number): undefined;     //设置每次移动的距离 (初始化时构造器自动调用一次)

demo:
    const ttc = new TweenTarget({x:0, y:0}, {x:100, y:100}, 10),

    //计时器模拟动画循环函数, 每秒执行一次.update()
    timer = new Timer(() => {
        ttc.update();
        console.log('update: ', ttc.v1);

    }, 1000, Infinity);

    ttc.onEnd = v => {
        timer.stop();
        console.log('end: ', v);
    }

    timer.start();
    console.log(ttc);

*/
class TweenTarget{

    #distance = 1;
    #distancePow2 = 1;
    #axis = {};
    get distance(){return this.#distance;}

    constructor(v1 = {x: 0}, v2 = {x: 100}, distance, onUpdate = null, onEnd = null){
        this.v1 = v1;
        this.v2 = v2;
        this.onUpdate = onUpdate;
        this.onEnd = onEnd;
    
        this.setDistance(distance);
        this.updateAxis();
    }

    setDistance(v = 1){
        this.#distance = v;
        this.#distancePow2 = Math.pow(v, 2);
    }

    updateAxis(){
        var n, v, len = 0;

        for(n in this.v1){
            v = this.v2[n] - this.v1[n];
            len += v * v;
            this.#axis[n] = v;

        }

        len = Math.sqrt(len);

        if(len !== 0){
            
            for(n in this.v1) this.#axis[n] *= 1 / len;

        }
    }

    update(){
        var n, len = 0;

        for(n in this.v1) len += Math.pow(this.v1[n] - this.v2[n], 2);

        if(len > this.#distancePow2){

            for(n in this.v1) this.v1[n] += this.#axis[n] * this.#distance;
            if(this.onUpdate !== null) this.onUpdate(this.v1);

        }

        else{

            for(n in this.v1) this.v1[n] = this.v2[n];
            if(this.onEnd !== null) this.onEnd(this.v1);
            
        }
    }

}




/* EventDispatcher 自定义事件管理器
parameter: 
attribute: 

method:
    clearEvents(eventName): undefined;             //清除eventName列表, 如果 eventName 未定义清除所有事件
    customEvents(eventName, eventParam): this;    //创建自定义事件 eventParam 可选 默认{}
    getParam(eventName): eventParam;
    trigger(eventName, callback): undefined;    //触发 (callback: 可选)
    register(eventName, callback): undefined;    //
    deleteEvent(eventName, callback): undefined; //

demo:
    const eventDispatcher = new EventDispatcher();
    eventDispatcher.customEvents("test", {name: "test"});

    eventDispatcher.register("test", eventParam => {
        console.log(eventParam) //Object{name: "test"}
    });

    eventDispatcher.trigger("test");

*/
class EventDispatcher{
    
    constructor(){
        this._eventsList = {};
        this.__eventsList = [];
        this.__trigger = "";
    }

    clearEvents(eventName){ 

        //if(this.__trigger === eventName) return console.warn("EventDispatcher: 清除事件失败");
        if(this._eventsList[eventName] !== undefined) this._eventsList[eventName].func = []

        else this._eventsList = {}

    }
    
    customEvents(eventName, eventParam = {}){ 
        //if(typeof eventName !== "string") return console.warn("EventDispatcher: 注册自定义事件失败");
        if(this._eventsList[eventName] !== undefined) return console.warn("EventDispatcher: "+eventName+" 已存在");
        //eventParam = eventParam || {}
        //if(eventParam.type === undefined) eventParam.type = eventName;
        this._eventsList[eventName] = {func: [], param: eventParam}
        return this;
    }

    getParam(eventName){
        return this._eventsList[eventName]["param"];
    }
    
    trigger(eventName, callback){
        //if(this._eventsList[eventName] === undefined) return;
        
        const obj = this._eventsList[eventName];
        var k, len = obj.func.length;

        if(len !== 0){
            if(typeof callback === "function") callback(obj["param"]); //更新参数(eventParam)

            //触发过程(如果触发过程中删除事件, 不仅 len 没有变, 而且还会漏掉一个key, 所以在触发过程中删除的事件要特殊处理)
            this.__trigger = eventName;
            for(k = 0; k < len; k++) obj["func"][k](obj["param"]);
            this.__trigger = "";
            //触发过程结束
            
            //删除在触发过程中要删除的事件
            len = this.__eventsList.length;
            for(k = 0; k < len; k++) this.deleteEvent(eventName, this.__eventsList[k]);
            this.__eventsList.length = 0;
    
        }

    }
    
    register(eventName, callback){
        if(this._eventsList[eventName] === undefined) return console.warn("EventDispatcher: "+eventName+" 不存在");
        const obj = this._eventsList[eventName];
        //if(obj.func.includes(callback) === false) obj.func.push(callback);
        //else console.warn("EventDispatcher: 回调函数重复");
        obj.func.push(callback);
    }
    
    deleteEvent(eventName, callback){
        if(this._eventsList[eventName] === undefined) return console.warn("EventDispatcher: "+eventName+" 不存在");
        
        if(this.__trigger === eventName) this.__eventsList.push(callback);
        else{
            const obj = this._eventsList[eventName], i = obj.func.indexOf(callback);
            if(i !== -1) obj.func.splice(i, 1);
        }
        
    }

}




export {
    UTILS, 
    ColorRefTable, 
    AnimateLoop,
    Ajax, 
    IndexedDB, 
    TreeStruct, 
    Point, 
    Line, 
    Box, 
    Circle, 
    Polygon, 
    RGBColor, 
    Timer, 
    SeekPath, 
    RunningList, 
    TweenValue, 
    Tween, 
    TweenTarget, 
    EventDispatcher, 
    Rotate,
    ShapeRect,
    SecurityDoor,
}

 

"use strict"

import {
    Vector3, 
    Skeleton, 
    Frustum, 
    Matrix4, 
    Mesh, 
    sRGBEncoding, 
    RepeatWrapping, 
    TextureLoader, 
    ObjectLoader, 
    AnimationLoader, 
    BufferGeometryLoader,
} from 'three'; //import * as THREE from '../../../build/three.module.js';

/* import {Sky} from '../../jsm/objects/Sky.js';
import {Water} from '../../jsm/objects/Water.js';
import {CSS2DRenderer, CSS2DObject} from '../../jsm/renderers/CSS2DRenderer.js';
import {mergeBufferGeometries} from '../../jsm/utils/BufferGeometryUtils.js';
import {VertexNormalsHelper} from '../../jsm/helpers/VertexNormalsHelper.js';
import { DecalGeometry } from '../../jsm/geometries/DecalGeometry.js';
import { LightningStrike } from '../../jsm/geometries/LightningStrike.js'; */

import {MTLLoader} from '../../jsm/loaders/MTLLoader.js';
import {OBJLoader} from '../../jsm/loaders/OBJLoader.js';
import {GLTFLoader} from '../../jsm/loaders/GLTFLoader.js';
import {STLLoader} from '../../jsm/loaders/STLLoader.js';
import {FBXLoader} from '../../jsm/loaders/FBXLoader.js';
import {GLTFExporter} from '../../jsm/exporters/GLTFExporter.js';
import {STLExporter} from '../../jsm/exporters/STLExporter.js';
import {OBJExporter} from '../../jsm/exporters/OBJExporter.js';

import {UTILS} from './Utils.js';

/** ThreeUtils three.js实用类

*/
const cameraFCVMatrix4 = new Matrix4(),

textureNames = [
    "map", 
    "alphaMap", 
    "aoMap", 
    "envMap", 
    "lightMap", 
    "specularMap", 
    "emissiveMap", 
    "bumpMap", 
    "displacementMap", 
    "metalnessMap", 
    "roughnessMap", 
    "normalMap"
],

_disposeMaterial = function (material){
    for(let k = 0, len = textureNames.length; k < len; k++){
        if(material[textureNames[k]]) material[textureNames[k]].dispose();
    }
    
    material.dispose();
},

ThreeUtils = {

    frustum: new Frustum(),
    
    textureLoader: new TextureLoader(),
    MTLLoader: MTLLoader,
    OBJLoader: OBJLoader,
    GLTFLoader: GLTFLoader,
    STLLoader: STLLoader,
    FBXLoader: FBXLoader,
    ObjectLoader: ObjectLoader,
    AnimationLoader: AnimationLoader,
    GeometryLoader: BufferGeometryLoader,
    
    GLTFExporter: GLTFExporter,
    STLExporter: STLExporter,
    OBJExporter: OBJExporter,

    traverse(object3D, callback){

        if(callback(object3D) !== "continue"){

            for(let k = 0, v, len = object3D.children.length; k < len; k++){

                v = object3D.children[k];

                if(v.children.length !== 0) this.traverse(v, callback);
                else callback(v);
    
            }

        }

    },
    
    //清除 Object3D 缓存(不删除对象)
    disposeObject3D(object3D){

        if(object3D.material !== undefined) this.disposeMaterial(object3D.material);
        if(object3D.geometry !== undefined) object3D.geometry.dispose();
        if(object3D.skeleton !== undefined) object3D.skeleton.dispose();

    },
    
    //支持数组材质
    disposeMaterial(material){

        if(Array.isArray(material) === true){
            for(let k = 0, c = material.length; k < c; k++) _disposeMaterial(material[k]);
        }
        else _disposeMaterial(material);

        return material;

    },
    
    //更换 geometry
    updateGeometry(mesh, geometry){

        mesh.geometry.dispose();
        mesh.geometry = geometry;

    },

    isObject3D(v){//v是否是object3D

        return UTILS.isObject(v) && v.isObject3D === true;
        
    },
    
    isBone(v){

        return (this.isObject3D(v) && v.isBone === true);

    },

    isSkinMesh(v){

        return (this.isObject3D(v) && v.isSkinnedMesh === true);

    },

    isCSS2D(v){

        return (this.isObject3D(v) && v.isCSS2DObject === true);

    },

    //克隆蒙皮网格(材质共享)
    cloneSkinnedMesh(v){

        let bone = v.skeleton.bones[0].clone(true), bones = [];
        bone.traverse((e)=>bones.push(e));

        const newMesh = v.clone();
        newMesh.geometry = v.geometry.clone();
        newMesh.children.length = 0;
        newMesh.add(bone);
        newMesh.bind(new Skeleton(bones));

        return newMesh;

    },

    //3维世界坐标 转为 屏幕坐标 必须: obj: Vector3 || Object3D; camera: 相机
    //width: number屏幕宽; height: number屏幕高; 可选: vec3: Vector3;(结果复制到vec3中)
    worldPosToScreen(obj, camera, width, height, vec3){

        vec3 = vec3 || new Vector3();
        
        if(this.isObject3D(obj) === true) obj.getWorldPosition(vec3);//如果是3D对象
        else if(obj.isVector3 === true) vec3.copy(obj);//如果是Vector3对象
        else return vec3;
        
        var _x = 0.5 * width, _y = 0.5 * height;//中心点坐标
        vec3.project(camera);//转为标准设备坐标
        vec3.set((vec3.x * _x) + _x, -(vec3.y * _y) + _y, 0);//转为屏幕坐标

        return vec3;

    },
    
    //检测一个点是否在相机视椎体内,返回boolean
    cameraFrustumContainsVec3(camera, vec3){

        camera.updateMatrix();
        camera.updateMatrixWorld();
        this.frustum.setFromProjectionMatrix(cameraFCVMatrix4.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse));
        return this.frustum.containsPoint(vec3);

    },

    loadModels(url, callback, type){

        if(!type) type = UTILS.getFileType(url);
        var name = "", uuid;
        
        switch(type){
            case "gltf": 
            case "glb": 
            name = "GLTFLoader";
            break;
            
            case "fbx": 
            name = "FBXLoader";
            break;
            
            case "json": 
            name = "ObjectLoader";
            break;
            
            case "stl": //只由geometry, 文件体积最小
            name = "STLLoader";
            break;
            
            case "obj": //需要额外加载材质
            name = "OBJLoader";
            break;
            
            case "mtl":
            name = "MTLLoader";
            break;
            
            default: 
            console.warn("ThreeUtils: 暂不支持: "+type);
            return;
        }
        
        const lode = new this[name]();
        lode.load(url, (e)=>{
            //ObjectLoader (bug: 有时候会执行两次回调)
            if(this.isObject3D(e) === true){
                if(e.uuid !== uuid){
                    callback(e);
                    uuid = e.uuid;
                }
            }

            //other
            else callback(e.isBufferGeometry === true ? new Mesh(e) : e)
            
        });
        
        return lode;

    },

    loadGeometry(url, callback){

        //new this.GeometryLoader(url, callback);
        
    },

    loadTexture(url){

        const map = new TextureLoader().load(url);
        map.encoding = sRGBEncoding;
        map.wrapS = map.wrapT = RepeatWrapping;
    
        return map;

    },

}


export {ThreeUtils}

 

"use strict";

/* O3D 此类用于测试 ThreeJS(javascript 3D库)
attributes:
    orbitEnabled: bool;     //禁或启用轨道控制器
    transformEnabled: bool; //禁或启用变换控制器
    //只读属性:
    domElement: HTMLDivElement; //3D场景的父div
    animateLoop: AnimateLoop;   //这属性可以启或禁用动画循环 (可以的方法参见 Utils.js/AnimateLoop)
        手动更新3D场景: O3D.animateLoop.update()

method:
    init(parentElement: HTMLElement): undefined;                //初始化O3D
    dispose(): undefined;                                       //销毁O3D (销毁后可重新init使用)
    resize(w, h: String): undefined;                            //设置或更新 domElement 的宽高 (渲染器和相机也会更新)
    intersect(offsetX, offsetY: Number, obj3ds: Array): Array;  //运行一次射线拾取
    clickEvent(callback: Func): undefined;                      //给 domElement 添加点击事件
    addEvent(eventName: String, callback: Func): undefined;     //
    removeEvent(eventName: String, callback: Func): undefined;  //
    appendObject3D(obj3d, parentObject3D: Object3D): undefined; //往场景添加3D对象
    removeObject3D(obj3d: Object3D): undefined;                 //从场景删除3D对象

    helloBox(w, h, d, ws, hs, ds: Number): undefined; //往3D场景添加一个box网格
    css2dObject(div: HTMLDivElement): CSS2DObject;    //创建一个 CSS2DObject 对象(用div生成一个3D对象)

    initBoxHelper(): undefined;                             //拾取辅助框
    initGridHelper(): undefined;                            //地面网格辅助
    initSelection(obj3ds: Object3D): undefined;             //点拾取3D对象
    initSelectionBox(startPoint, endPoint, deep): Object;   //矩形框拾取3D对象

eventNames:
    "down", "up", "move"        //domElement 的鼠标事件
    "selectChange"              //拾取列表改变时触发
    "orbitControlsChange"       //OrbitControlsChange 轨道控制器的 change 事件
    "transformControlsChange"   //TransformControls 变换控制器的 change 事件

demo:
    import { UTILS } from './lib/Utils.js';
    import { O3D } from './O3D.js';

    document.body.style.overflow = "hidden";
    O3D.init(); //初始化 O3D

    for(let i = 0, helloBox; i < 10; i++){
        helloBox = O3D.helloBox(); //添加一个box网格到场景
        helloBox.position.x = UTILS.random(-10, 10);
        helloBox.position.z = UTILS.random(-10, 10);
    }

    O3D.initGridHelper(); //地面辅助网格
    O3D.initBoxHelper(); //拾取辅助框

    //点拾取对象 (鼠标左键)
    O3D.initSelection();

    //矩形框拾取对象 (鼠标右键)
    const selectionBox = O3D.initSelectionBox().initHelper();
    selectionBox.helperEnabled = true; //启用矩形框拾取对象 (当它启用时, 轨道控制器的鼠标右键会失效)

    addEventListener("resize", () => O3D.resize(innerWidth+"px", innerHeight+"px"));

*/

import {
    Vector2,
    Raycaster,
    sRGBEncoding,
    WebGLRenderer,
    PerspectiveCamera,
    Scene,
    Color,
    AmbientLight,
    Group,
    Mesh,
    BoxGeometry,
    BoxHelper,
    Box3,
    GridHelper,
    Frustum,
    Vector3,
    Sphere,
    Quaternion,
    Euler,
    //Clock, 
    //AnimationMixer,
} from 'three';

import { CSS2DRenderer, CSS2DObject } from '../jsm/renderers/CSS2DRenderer.js';
import { OrbitControls } from '../jsm/controls/OrbitControls.js';
import {TransformControls} from '../jsm/controls/TransformControls.js';

import { ThreeUtils } from './lib/ThreeUtils.js';
import { AnimateLoop, EventDispatcher, SecurityDoor } from './lib/Utils.js';

var eventDispatcher, domElement, renderer, css2dRenderer, camera, scene, ambientLight, object3d, orbitControls, transformControls;

//射线拾取
const ray = new Raycaster(), ray_vec2 = new Vector2(), ray_result = [];

//拾取队列
const selectObject3ds = [], selectObject3ds_box3 = new Box3();

//点击与抬起的延迟时间
const clickDelay = 300; 

//动画循环
const animateLoop = new AnimateLoop(function (){
    renderer["render"](scene, camera);
    css2dRenderer["render"](scene, camera);
});

//renderer
function exitRender(){
    renderer.dispose();
    //css2dRenderer.dispose();
    if(domElement.parentElement) domElement.parentElement.removeChild(domElement);
    eventDispatcher = domElement = css2dRenderer = renderer = undefined;
}

function initRender(){
    renderer = new WebGLRenderer({ //precision: "highp" "mediump" "lowp";
        //antialias: true, 
        //precision: "lowp",
    });
    renderer.debug.checkShaderErrors = false;
    renderer.outputEncoding = sRGBEncoding;
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.domElement.style.zIndex = -1;
    renderer.domElement.style.position = "absolute";
    renderer.domElement.style.left = 0;
    renderer.domElement.style.top = 0;

    //
    css2dRenderer = new CSS2DRenderer();
    css2dRenderer.domElement.style.zIndex = 0;
    css2dRenderer.domElement.style.position = "absolute";
    css2dRenderer.domElement.style.left = 0;
    css2dRenderer.domElement.style.top = 0;
    
    //domElement
    domElement = globalThis.document.createElement("div");
    domElement.appendChild(renderer.domElement);
    domElement.appendChild(css2dRenderer.domElement);
    domElement.style = `
        width: ${globalThis.innerWidth}px;
        height: ${globalThis.innerHeight}px;
    `;

    //event
    const param_pointerdown = {pointerEvent: null, button:0, pointerId:0, pageX:0, pageY:0, offsetX:0, offsetY:0},
    param_pointerup = {pointerEvent: null, button:0, pointerId:0, pageX:0, pageY:0, offsetX:0, offsetY:0},
    param_pointermove = {pointerEvent: null, button:0, pointerId:0, pageX:0, pageY:0, offsetX:0, offsetY:0}
    eventDispatcher = new EventDispatcher()
    .customEvents('down', param_pointerdown)
    .customEvents('up', param_pointerup)
    .customEvents('move', param_pointermove)
    .customEvents('selectChange', {targets: selectObject3ds});
    domElement.onpointerdown = function (event) {
        param_pointerdown.pointerEvent = event;
        param_pointerdown.button = event.button;
        param_pointerdown.pointerId = event.pointerId;
        param_pointerdown.pageX = event.pageX;
        param_pointerdown.pageY = event.pageY;
        param_pointerdown.offsetX = event.offsetX;
        param_pointerdown.offsetY = event.offsetY;
        eventDispatcher.trigger("down");
    }
    domElement.onpointerup = function (event) {
        param_pointerup.pointerEvent = event;
        param_pointerup.button = event.button;
        param_pointerup.pointerId = event.pointerId;
        param_pointerup.pageX = event.pageX;
        param_pointerup.pageY = event.pageY;
        param_pointerup.offsetX = event.offsetX;
        param_pointerup.offsetY = event.offsetY;
        eventDispatcher.trigger("up");
    }
    domElement.onpointermove = function (event) {
        param_pointermove.pointerEvent = event;
        param_pointermove.button = event.button;
        param_pointermove.pointerId = event.pointerId;
        param_pointermove.pageX = event.pageX;
        param_pointermove.pageY = event.pageY;
        param_pointermove.offsetX = event.offsetX;
        param_pointermove.offsetY = event.offsetY;
        eventDispatcher.trigger("move");
    }
}

function initSelectsBox3(){
    const _box3 = new Box3(), box3 = selectObject3ds_box3, vec3 = new Vector3(),

    updateBox3s = function (obj3d){
        obj3d.getWorldPosition(vec3);
        if(obj3d.geometry !== undefined){
            if(obj3d.geometry.boundingBox === null) obj3d.geometry.computeBoundingBox();
            _box3.copy(obj3d.geometry.boundingBox);
            _box3.min.add(vec3);
            _box3.max.add(vec3);
            box3.union(_box3);
        }else{
            box3.expandByPoint(vec3);
        }
    },

    updateBox3 = function (){
        if(selectObject3ds.length === 0) return;
        const obj3d = selectObject3ds[0];
        obj3d.getWorldPosition(vec3);
        if(obj3d.geometry !== undefined){
            if(obj3d.geometry.boundingBox === null) obj3d.geometry.computeBoundingBox();
            box3.copy(obj3d.geometry.boundingBox);
            box3.min.add(vec3);
            box3.max.add(vec3);
        }else{
            box3.min.copy(vec3);
            box3.max.copy(vec3);
        }
        for(let k = 1, len = selectObject3ds.length; k < len; k++) updateBox3s(selectObject3ds[k]);
    }

    eventDispatcher.register("selectChange", updateBox3);
}


//PerspectiveCamera
function exitCamera(){
    camera = undefined;
}

function initCamera(){
    camera = new PerspectiveCamera(45, globalThis.innerWidth / globalThis.innerHeight, 1, 1000);
    camera.position.set(0, 5, 10);
    camera.lookAt(0, 0, 0);
    //camera.updateProjectionMatrix();
}


//Scene
function exitScene(){
    scene.traverse(object3D => ThreeUtils.disposeObject3D(object3D));
    object3d = scene = undefined
}

function initScene(){
    scene = new Scene();
    //scene.autoUpdate = false; //默认值为true，若设置了这个值，则渲染器会检查每一帧是否需要更新场景及其中物体的矩阵。 当设为false时，你必须亲自手动维护场景中的矩阵
    //scene.background = new Color("#b9c0bc");
    //scene.fog = new this.THREE.Fog(new this.THREE.Color("#dce0de"), camera.far*0.8, camera.far);
    //scene.fog = new this.THREE.FogExp2(scene.background, 0.0005);
    //scene.overrideMaterial = new MeshBasicMaterial(); //如果不为空，它将强制场景中的每个物体使用这里的材质来渲染。默认值为null
    object3d = new Group();
    object3d.name = "O3D_root";
    ambientLight = new AmbientLight();
    scene.add(ambientLight, object3d);
}


//OrbitControls
function exitOrbitControls(){
    orbitControls._securityDoor = undefined;
    orbitControls.dispose();
    orbitControls = undefined;
}

function initOrbitControls(){
    const onchange = function (){
        eventDispatcher.trigger("orbitControlsChange");
        animateLoop.update();
    },
    _onchange = function (enabled){
        orbitControls.enabled = enabled;
        if(enabled){
            orbitControls.addEventListener("change", onchange);
        }
        else{
            orbitControls.removeEventListener("change", onchange);
        }
    },

    _securityDoor = new SecurityDoor(null, _onchange);

    orbitControls = new OrbitControls(camera, domElement);
    _onchange(_securityDoor.empty);
    
   /*  orbitControls.zoomSpeed = 5;
    orbitControls.enablePan = true;
    orbitControls.minDistance = 80;
    orbitControls.maxDistance = 200;
    orbitControls.minPolarAngle = Math.PI*0.2;
    orbitControls.maxPolarAngle = Math.PI*0.54; */
    //orbitControls.enabled
    eventDispatcher.customEvents('orbitControlsChange');
    orbitControls._securityDoor = _securityDoor;
    orbitControls.update();
}

//TransformControls
function exitTransformControls(){
    transformControls.dispose();
    transformControls = undefined;
}

function initTransformControls(){
    const ondragging = function (event){
        if(event.value) orbitControls._securityDoor.add("O3D_transformControls");
        else orbitControls._securityDoor.remove("O3D_transformControls");
    },
    _onchange = function (enabled){
        transformControls.enabled = enabled;
        if(enabled){
            transformControls.addEventListener('dragging-changed', ondragging);
            transformControls.addEventListener('change', onchange);
            eventDispatcher.register("selectChange", onselectChange);
        }
        else{
            transformControls.removeEventListener('dragging-changed', ondragging);
            transformControls.removeEventListener('change', onchange);
            eventDispatcher.deleteEvent("selectChange", onselectChange);
        }
    },
    _securityDoor = new SecurityDoor(null, _onchange),
    _object3d = new Group(),
    _outPoint = new Vector3(),
    _vec3 = new Vector3(),

    onselectChange = function (){
        const len = selectObject3ds.length;
        if(len === 0 || selectObject3ds_box3.isEmpty()) transformControls.detach(_object3d);
        else{
            selectObject3ds_box3.getCenter(_object3d.position);
            _outPoint.copy(_object3d.position);
            if(len === 1){
                _object3d.quaternion.copy(selectObject3ds[0].quaternion);
                _object3d.scale.copy(selectObject3ds[0].scale);
            }else{
                _object3d.quaternion.set(0,0,0,1);
                _object3d.scale.set(1,1,1);
            }
            transformControls.attach(_object3d);
        }
    },

    updatePosition = function (obj3d){
        switch(transformControls.mode){
            case "translate": obj3d.position.add(_vec3); break;
            case "rotate": obj3d.quaternion.copy(_object3d.quaternion); break;
            case "scale": obj3d.scale.copy(_object3d.scale); break;
        }
    },

    onchange = function (){
        _vec3.copy(_object3d.position).sub(_outPoint);
        selectObject3ds.forEach(updatePosition);
        _outPoint.copy(_object3d.position);
        eventDispatcher.trigger("transformControlsChange");
        animateLoop.update();
    }

    transformControls = new TransformControls(camera, domElement);
    //transformControls.mode = "translate"; //默认"translate"、"rotate" 和 "scale"
    //transformControls.space = "world"; //默认"world" 和 "local";
    transformControls.size = 0.5; //默认 1

    eventDispatcher.customEvents('transformControlsChange');
    transformControls._securityDoor = _securityDoor;
    transformControls._object = _object3d;
    if(scene) scene.add(transformControls, _object3d);
    _onchange(_securityDoor.empty);
}

//
const O3D = {

    get orbitEnabled(){
        return orbitControls._securityDoor.empty;
    },

    set orbitEnabled(v){
        if(v === true) orbitControls._securityDoor.remove("O3D_user");
        else if(v === false) orbitControls._securityDoor.add("O3D_user");
    },

    get transformEnabled(){
        return transformControls._securityDoor.empty;
    },

    set transformEnabled(v){
        if(v === true) transformControls._securityDoor.remove("O3D_user");
        else if(v === false) transformControls._securityDoor.add("O3D_user");
    },
    
    get domElement(){
        return domElement;
    },

    get camera(){
        return camera;
    },

    get renderer(){
        return renderer;
    },

    get scene(){
        return scene;
    },

    get animateLoop(){
        return animateLoop;
    },

    init(parentElement = globalThis.document.body){
        initRender();
        initSelectsBox3();
        initCamera();
        initScene();
        initOrbitControls();
        initTransformControls();

        parentElement.appendChild(domElement);
        this.resize();
    },

    dispose(){
        animateLoop.stop();
        domElement.parentElement.removeChild(domElement);
        exitRender();
        exitCamera();
        exitTransformControls();
        exitOrbitControls();
        exitScene();
        selectObject3ds.length = ray_result.length = 0;
    },

    resize(w = domElement.offsetWidth+"px", h = domElement.offsetHeight+"px"){
        domElement.style.width = w;
        domElement.style.height = h;

        renderer.setSize(domElement.offsetWidth, domElement.offsetHeight);
        css2dRenderer.setSize(domElement.offsetWidth, domElement.offsetHeight);

        camera.aspect = domElement.offsetWidth / domElement.offsetHeight;
        camera.updateProjectionMatrix();

        animateLoop.update();
    },

    intersect(offsetX, offsetY, obj3ds = object3d.children){
        ray_result.length = 0;
        ray_vec2.x = offsetX / domElement.offsetWidth * 2 - 1;
        ray_vec2.y = - offsetY / domElement.offsetHeight * 2 + 1;
        ray.setFromCamera(ray_vec2, camera);
        ray.intersectObjects(obj3ds, true, ray_result);
        return ray_result;
    },

    clickEvent(callback){
        if(typeof callback !== "function") return console.warn("clickEvent: 参数必须是一个函数");
        var pointerId = -1, isDown = false, sTime = 0;

        const _onup = () => {
            eventDispatcher.deleteEvent("up", onup);
            isDown = false;
        },

        onup = event => {
            if(isDown && event.pointerId === pointerId && Date.now() - sTime < clickDelay){
                _onup();
                callback(event);
            }
        },

        ondown = event => {
            if(isDown) _onup();
            if(event.button !== 0) return;

            sTime = Date.now();
            pointerId = event.pointerId;
            isDown = true;
            
            eventDispatcher.register("up", onup);
        }

        eventDispatcher.register("down", ondown);
    },

    addEvent(eventName, callback){
        eventDispatcher.register(eventName, callback);
    },

    removeEvent(eventName, callback){
        eventDispatcher.deleteEvent(eventName, callback);
    },

    helloBox(w, h, d, ws, hs, ds){
        const mesh = new Mesh(new BoxGeometry(w, h, d, ws, hs, ds));
        object3d.add(mesh);
        return mesh;
    },

    css2dObject(div = globalThis.document.createElement("div")){
        return new CSS2DObject(div);
    },

    appendObject3D(obj3d, parentObject3D = object3d){
        if(ThreeUtils.isObject3D(obj3d)){
            if(ThreeUtils.isObject3D(obj3d.parent)){
                ThreeUtils.disposeObject3D(obj3d);
                obj3d.parent.remove(obj3d);
            }
            parentObject3D.add(obj3d);
        }
    },

    removeObject3D(obj3d){
        if(ThreeUtils.isObject3D(obj3d) && ThreeUtils.isObject3D(obj3d.parent)){
            const i = selectObject3ds.indexOf(obj3d);
            if(i !== -1){
                selectObject3ds.splice(i, 1);
                eventDispatcher.trigger("selectChange");
            }
            ThreeUtils.disposeObject3D(obj3d);
            obj3d.parent.remove(obj3d);
        }
    },

    initBoxHelper(){
        const boxHelper = new BoxHelper();
        boxHelper.geometry.computeBoundingBox();
        boxHelper.visible = false;
        transformControls._object.add(boxHelper);

        const box3 = new Box3(), min = box3.min, max = box3.max,
        array = boxHelper.geometry.attributes.position.array,
        
        updateBoxHelper = () => {
            if(selectObject3ds.length === 0 || selectObject3ds_box3.isEmpty()){
                boxHelper.visible = false;
                
            }else{
                box3.copy(selectObject3ds_box3);
                min.sub(transformControls._object.position);
                max.sub(transformControls._object.position);
                array[ 0 ] = max.x; array[ 1 ] = max.y; array[ 2 ] = max.z;
                array[ 3 ] = min.x; array[ 4 ] = max.y; array[ 5 ] = max.z;
                array[ 6 ] = min.x; array[ 7 ] = min.y; array[ 8 ] = max.z;
                array[ 9 ] = max.x; array[ 10 ] = min.y; array[ 11 ] = max.z;
                array[ 12 ] = max.x; array[ 13 ] = max.y; array[ 14 ] = min.z;
                array[ 15 ] = min.x; array[ 16 ] = max.y; array[ 17 ] = min.z;
                array[ 18 ] = min.x; array[ 19 ] = min.y; array[ 20 ] = min.z;
                array[ 21 ] = max.x; array[ 22 ] = min.y; array[ 23 ] = min.z;
                boxHelper.geometry.attributes.position.needsUpdate = true;
                boxHelper.geometry.computeBoundingSphere();
                boxHelper.visible = true;
            }
        }
        
        eventDispatcher.register("selectChange", updateBoxHelper);
        
    },

    initGridHelper(size = 20, divisions = 20, colorCenterLine, colorGrid){
        scene.add(new GridHelper(size, divisions, colorCenterLine, colorGrid));
    },

    initSelection(obj3ds = object3d.children){
        var obj3d, i;
        const func = event => {
            obj3d = this.intersect(event.offsetX, event.offsetY, obj3ds)[0];
            if(!obj3d){
                selectObject3ds.length = 0;
                eventDispatcher.trigger("selectChange");
                animateLoop.update();
                return;
            }

            obj3d = obj3d.object;
            i = selectObject3ds.indexOf(obj3d);
            if(i === -1){
                //如果选中列表存在object3D的上级,就解除其上级的选中状态
                var par = obj3d.parent, i;
                while(par !== null){
                    i = selectObject3ds.indexOf(par);
                    if(i !== -1) selectObject3ds.splice(i, 1);
                    par = par.parent;
                }

                //如果选中列表存在object3D的下级,就解除其下级的选中状态
                obj3d.traverse(o => {
                    if(obj3d !== o){
                        i = selectObject3ds.indexOf(o);
                        if(i !== -1) selectObject3ds.splice(i, 1);
                    }
                });

                selectObject3ds.push(obj3d);
            }

            else selectObject3ds.splice(i, 1);

            eventDispatcher.trigger("selectChange");
            animateLoop.update();
        }
        
        this.clickEvent(func);
    },

    initSelectionBox(startPoint = new Vector3(), endPoint = new Vector3(), deep = globalThis.Number.MAX_VALUE){
        const _frustum = new Frustum();
        const _tmpPoint = new Vector3();

        const _vecNear = new Vector3();
        const _vecTopLeft = new Vector3();
        const _vecTopRight = new Vector3();
        const _vecDownRight = new Vector3();
        const _vecDownLeft = new Vector3();

        const _vecFarTopLeft = new Vector3();
        const _vecFarTopRight = new Vector3();
        const _vecFarDownRight = new Vector3();
        const _vecFarDownLeft = new Vector3();

        const _vectemp1 = new Vector3();
        const _vectemp2 = new Vector3();
        const _vectemp3 = new Vector3();

        const scope = this;
        var _helperEnabled = null;

        return {

            get frustum(){
                return _frustum;
            },

            get helperEnabled(){
                return _helperEnabled !== null && _helperEnabled.empty;
            },

            set helperEnabled(v){
                if(_helperEnabled === null) return;
                if(v === true) _helperEnabled.remove("O3D_user");
                else if(v === false) _helperEnabled.add("O3D_user");
            },
            
            updateFrustum(){
                // Avoid invalid frustum
        
                if ( startPoint.x === endPoint.x ) {
        
                    endPoint.x += Number.EPSILON;
        
                }
        
                if ( startPoint.y === endPoint.y ) {
        
                    endPoint.y += Number.EPSILON;
        
                }
        
                camera.updateProjectionMatrix();
                camera.updateMatrixWorld();
        
                if ( camera.isPerspectiveCamera ) {
        
                    _tmpPoint.copy( startPoint );
                    _tmpPoint.x = Math.min( startPoint.x, endPoint.x );
                    _tmpPoint.y = Math.max( startPoint.y, endPoint.y );
                    endPoint.x = Math.max( startPoint.x, endPoint.x );
                    endPoint.y = Math.min( startPoint.y, endPoint.y );
        
                    _vecNear.setFromMatrixPosition( camera.matrixWorld );
                    _vecTopLeft.copy( _tmpPoint );
                    _vecTopRight.set( endPoint.x, _tmpPoint.y, 0 );
                    _vecDownRight.copy( endPoint );
                    _vecDownLeft.set( _tmpPoint.x, endPoint.y, 0 );
        
                    _vecTopLeft.unproject( camera );
                    _vecTopRight.unproject( camera );
                    _vecDownRight.unproject( camera );
                    _vecDownLeft.unproject( camera );
        
                    _vectemp1.copy( _vecTopLeft ).sub( _vecNear );
                    _vectemp2.copy( _vecTopRight ).sub( _vecNear );
                    _vectemp3.copy( _vecDownRight ).sub( _vecNear );
                    _vectemp1.normalize();
                    _vectemp2.normalize();
                    _vectemp3.normalize();
        
                    _vectemp1.multiplyScalar( deep );
                    _vectemp2.multiplyScalar( deep );
                    _vectemp3.multiplyScalar( deep );
                    _vectemp1.add( _vecNear );
                    _vectemp2.add( _vecNear );
                    _vectemp3.add( _vecNear );
        
                    const planes = _frustum.planes;
        
                    planes[ 0 ].setFromCoplanarPoints( _vecNear, _vecTopLeft, _vecTopRight );
                    planes[ 1 ].setFromCoplanarPoints( _vecNear, _vecTopRight, _vecDownRight );
                    planes[ 2 ].setFromCoplanarPoints( _vecDownRight, _vecDownLeft, _vecNear );
                    planes[ 3 ].setFromCoplanarPoints( _vecDownLeft, _vecTopLeft, _vecNear );
                    planes[ 4 ].setFromCoplanarPoints( _vecTopRight, _vecDownRight, _vecDownLeft );
                    planes[ 5 ].setFromCoplanarPoints( _vectemp3, _vectemp2, _vectemp1 );
                    planes[ 5 ].normal.multiplyScalar( - 1 );
        
                } else if ( camera.isOrthographicCamera ) {
        
                    const left = Math.min( startPoint.x, endPoint.x );
                    const top = Math.max( startPoint.y, endPoint.y );
                    const right = Math.max( startPoint.x, endPoint.x );
                    const down = Math.min( startPoint.y, endPoint.y );
        
                    _vecTopLeft.set( left, top, - 1 );
                    _vecTopRight.set( right, top, - 1 );
                    _vecDownRight.set( right, down, - 1 );
                    _vecDownLeft.set( left, down, - 1 );
        
                    _vecFarTopLeft.set( left, top, 1 );
                    _vecFarTopRight.set( right, top, 1 );
                    _vecFarDownRight.set( right, down, 1 );
                    _vecFarDownLeft.set( left, down, 1 );
        
                    _vecTopLeft.unproject( camera );
                    _vecTopRight.unproject( camera );
                    _vecDownRight.unproject( camera );
                    _vecDownLeft.unproject( camera );
        
                    _vecFarTopLeft.unproject( camera );
                    _vecFarTopRight.unproject( camera );
                    _vecFarDownRight.unproject( camera );
                    _vecFarDownLeft.unproject( camera );
        
                    const planes = _frustum.planes;
        
                    planes[ 0 ].setFromCoplanarPoints( _vecTopLeft, _vecFarTopLeft, _vecFarTopRight );
                    planes[ 1 ].setFromCoplanarPoints( _vecTopRight, _vecFarTopRight, _vecFarDownRight );
                    planes[ 2 ].setFromCoplanarPoints( _vecFarDownRight, _vecFarDownLeft, _vecDownLeft );
                    planes[ 3 ].setFromCoplanarPoints( _vecFarDownLeft, _vecFarTopLeft, _vecTopLeft );
                    planes[ 4 ].setFromCoplanarPoints( _vecTopRight, _vecDownRight, _vecDownLeft );
                    planes[ 5 ].setFromCoplanarPoints( _vecFarDownRight, _vecFarTopRight, _vecFarTopLeft );
                    planes[ 5 ].normal.multiplyScalar( - 1 );
        
                } else {
        
                    console.error( 'Unsupported camera type' );
        
                }
            },

            initHelper(obj3ds, div){
                if(globalThis.Array.isArray(obj3ds) === false) obj3ds = object3d.children;
                if(globalThis.HTMLDivElement.prototype.isPrototypeOf(div) === false){
                    div = globalThis.document.createElement("div");
                    div.style.background = "rgba(0,173,255,0.2)";
                    div.style.border = "1px solid rgb(0,173,255)";
                }

                div.style.pointerEvents = 'none';
                div.style.position = "absolute";

                var pointerId = -1, isDown = false, sTime = 0;
                
                const _onup = function (){
                    isDown = false;
                    setDIVBox(0, 0);
                    orbitControls._securityDoor.remove("O3D_selectionBoxHelper");
                    if(div.parentElement !== null) div.parentElement.removeChild(div);
                    eventDispatcher.deleteEvent("move", onmove);
                    eventDispatcher.deleteEvent("up", onup);
                    //globalThis.document.body.removeEventListener("pointerup", onup);
                },
                
                _onchange = function (enabled){
                    if(enabled){
                        eventDispatcher.register("down", ondown);
                    }else{
                        eventDispatcher.deleteEvent("down", ondown);
                        _onup();
                    }
                },

                _securityDoor = new SecurityDoor(null, _onchange),
                originPoint = new Vector2(),
                minPoint = new Vector2(),
                maxPoint = new Vector2(),
                sphere = new Sphere(),

                setDIVBox = function (clientX, clientY, width = 0, height = 0) {
                    div.style.left = clientX + 'px';
                    div.style.top = clientY + 'px';
                    div.style.width = width + 'px';
                    div.style.height = height+ 'px';
                },

                ondown = function (event){
                    if(event.button === 0) return;
                    if(isDown === true) _onup();
                    sTime = Date.now();
                    pointerId = event.pointerId;
                    isDown = true;
                    orbitControls._securityDoor.add("O3D_selectionBoxHelper");
                    originPoint.set(event.pageX, event.pageY);
                    domElement.parentElement.appendChild(div);
                    eventDispatcher.register("move", onmove);
                    eventDispatcher.register("up", onup);
                    //globalThis.document.body.addEventListener("pointerup", onup);
                },

                onmove = function (event){
                    if(isDown === true && event.pointerId === pointerId){
                        minPoint.set(Math.min(originPoint.x, event.pageX), Math.min(originPoint.y, event.pageY));
                        maxPoint.set(Math.max(originPoint.x, event.pageX), Math.max(originPoint.y, event.pageY));
                        setDIVBox(minPoint.x, minPoint.y, maxPoint.x - minPoint.x, maxPoint.y - minPoint.y);
                    }
                },
                
                push = function (obj3d){
                    //如果选中列表存在object3D的上级,就解除其上级的选中状态
                    var par = obj3d.parent;
                    while(par !== null){
                        if(selectObject3ds.includes(par)) return;
                        par = par.parent;
                    }
            
                    selectObject3ds.push(obj3d);
                },

                run = function (v){
                    if(v.geometry !== undefined){
                        if(v.geometry.boundingSphere === null) v.geometry.computeBoundingSphere();
                        sphere.radius = v.geometry.boundingSphere.radius;
                        v.getWorldPosition(sphere.center);
                        if(_frustum.intersectsSphere(sphere)) push(v);
                    }else{
                        v.getWorldPosition(sphere.center);
                        if(_frustum.containsPoint(sphere.center)) push(v);
                    }
                },

                onup = event => {
                    if(isDown === false || event.pointerId !== pointerId) return;
                    _onup();
                    if(Date.now() - sTime < clickDelay) return;
                    startPoint.x = minPoint.x / domElement.offsetWidth * 2 - 1;
                    startPoint.y = -minPoint.y / domElement.offsetHeight * 2 + 1;
                    endPoint.x = maxPoint.x / domElement.offsetWidth * 2 - 1;
                    endPoint.y = -maxPoint.y / domElement.offsetHeight * 2 + 1;
                    this.updateFrustum();
                    selectObject3ds.length = 0;
                    for(let k = 0, len = obj3ds.length; k < len; k++) obj3ds[k].traverse(run);
                    eventDispatcher.trigger("selectChange");
                    animateLoop.update();
                }
                
                _helperEnabled = _securityDoor;
                this.helperEnabled = false;
                return this;
            },

        }
    },

}

export { O3D }

 

 

index.html:

<!DOCTYPE html>
<html lang = "zh-cmn-Hans">
    
    <head>
        <title>treeStructScene</title>
        <meta charset = "utf-8" />
        <meta name="author" contect="admin, 3247940050@qq.com" /> <!-- 关于作者的联系方式 -->
        <meta http-equiv="Cache-Control" content="no-siteapp"/> <!-- 不允许百度贴广告 -->
        <meta name="format-detection" content="telphone=no, email=no"/> <!-- 不允许自动识别电话号码和邮箱号 -->
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> <!-- 不允许用户缩放 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <!-- 优先使用ie最新版本或谷歌内核 -->
        <style>
            *{padding:0; margin:0; color:#fff; font-size:12px;}
            body{overflow: hidden; background: #000;}
        </style>
        <script type = "importmap">
            {
                "imports": {
                    "three": "./build/three.module.js"
                }
            }
        </script>
        <script type = "text/javascript">
            document.oncontextmenu = function (){return false;}//禁用默认的鼠标右键菜单
        </script>
    </head>

    <body>
        
        <script src = "./examples/js/main.js" type = "module"></script>

    </body>

</html>

 

main.js:

import { UTILS } from './lib/Utils.js';
import { O3D } from './O3D.js';

//初始化 O3D
document.body.style.overflow = "hidden";
O3D.init(document.body);
O3D.resize(innerWidth+"px", innerHeight+"px"); //3D场景的宽高
//O3D.domElement.style.position = "absolute";
//O3D.domElement.style.left = "50px";
O3D.initGridHelper(); //地面辅助网格
O3D.initBoxHelper(); //拾取辅助框

//随机位置添加box网格到场景
for(let i = 0, helloBox; i < 10; i++){
    helloBox = O3D.helloBox();
    helloBox.position.x = UTILS.random(-10, 10);
    helloBox.position.z = UTILS.random(-10, 10);
}
O3D.animateLoop.update(); //更新一次场景

//点拾取对象 (鼠标左键)
O3D.initSelection();

//矩形框拾取对象 (鼠标右键)
const selectionBox = O3D.initSelectionBox().initHelper();
selectionBox.helperEnabled = true; //启用矩形框拾取对象 (当它启用时, 轨道控制器的鼠标右键会失效)

addEventListener("resize", () => O3D.resize(innerWidth+"px", innerHeight+"px"));

//测试 selectChange 事件 (拾取队列发送改变时触发)
O3D.addEvent("selectChange", event => console.log(event.targets));

 Three.js版本: 140dev

结果图:

 

 

innerWidth