vislite 0.6.0-alpha.2 → 0.6.0

package/lib/viewHandler/index.umd.min.js

@@ -1,11 +1,11 @@
 /*!
-* VISLite JavaScript Library v0.6.0-alpha.2
+* VISLite JavaScript Library v0.6.0
 * git+https://github.com/oi-contrib/VISLite.git
 *
 * Copyright zxl20070701
 * Released under the MIT license
 * https://zxl20070701.github.io/notebook/home.html
 *
-* Publish Date:  Sun Dec 17 2023 12:58:48 GMT+0800 (中国标准时间)
+* Publish Date:  Sun Dec 17 2023 17:10:48 GMT+0800 (中国标准时间)
 */
 var e,n;e=this,n=function(){"use strict";var e=function(e,n){var t=e.getBoundingClientRect();return{x:n.clientX-t.left,y:n.clientY-t.top}};return function(n){var t=document.getElementsByTagName("body")[0];t.addEventListener("keydown",(function(e){var t=function(e){return{37:"left",38:"up",39:"right",40:"down"}[e.keyCode||e.which]}(e);"up"==t?n({type:"lookUp",normal:[],value:.1,event:e}):"down"==t?n({type:"lookDown",normal:[],value:.1,event:e}):"left"==t?n({type:"lookLeft",normal:[],value:.1,event:e}):"right"==t&&n({type:"lookRight",normal:[],value:.1,event:e})}));var o=null,i=function(i){if(null==o)n({type:"hover",normal:[],value:0,event:i});else{var u=e(t,i),l=[u.x-o.x,u.y-o.y],a=[l[1],l[0],0];if(0==a[0]&&0==a[1])return;n({type:"rotate",normal:a,value:.01*(Math.abs(u.x-o.x)+Math.abs(u.y-o.y)),event:i}),o=u}};t.addEventListener("mousedown",(function(n){o=e(t,n)})),t.addEventListener("mouseup",(function(){o=null})),t.addEventListener("mousemove",(function(e){i(e)})),t.addEventListener("touchend",(function(){o=null})),t.addEventListener("touchstart",(function(n){o=e(t,n)})),t.addEventListener("touchmove",(function(e){i(e.touches[0])}));var u=function(e,t){0!=e&&n({type:"scale",value:e<0?.899:1.101,normal:[],event:t})};t.addEventListener("mousewheel",(function(e){u(e.wheelDelta,e)})),window.addEventListener&&window.addEventListener("DOMMouseScroll",(function(e){u(-1*e.detail,e)}),!1)}},"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e="undefined"!=typeof globalThis?globalThis:e||self).VISLite_viewHandler=n();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vislite",
-  "version": "0.6.0-alpha.2",
+  "version": "0.6.0",
   "description": "灵活、快速、简单的数据可视化交互式跨端前端库",
   "main": "./lib/index.umd.min.js",
   "typings": "./types/index.d.ts",

package/src/Canvas.ts

@@ -1,71 +1,71 @@
-import type CanvasType from '../types/Canvas'
-import type CanvasOptionType from '../types/CanvasOption'
-
-import OralCanvas from './common/canvas/index'
-import mergeOption from './common/mergeOption'
-
-class Canvas extends OralCanvas implements CanvasType {
-    private __canvas: HTMLCanvasElement
-    constructor(el: HTMLElement | null, option: CanvasOptionType = {}) {
-        if (!el) {
-            throw new Error("VISLite Canvas:The mount point requires an HTMLElement type but encountered null.")
-        }
-
-        option = mergeOption(option, {
-            region: true,
-            willReadFrequently: false
-        })
-
-        const width = el.clientWidth, height = el.clientHeight
-
-        let ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement
-
-        const _el = el as any
-
-        // 如果已经初始化过了
-        if (_el._vislite_canvas_) {
-            ViewCanvas = _el._vislite_canvas_[0]
-            RegionCanvas = _el._vislite_canvas_[1]
-        }
-
-        // 否则就初始化
-        else {
-            ViewCanvas = document.createElement('canvas')
-            el.appendChild(ViewCanvas)
-
-            if (option.region) {
-                RegionCanvas = document.createElement('canvas')
-            }
-
-            _el._vislite_canvas_ = [ViewCanvas, RegionCanvas]
-
-            el.setAttribute('vislite', 'Canvas')
-        }
-
-        // 设置画布大小
-        for (const canvas of [ViewCanvas, RegionCanvas]) {
-
-            if (canvas) {
-                canvas.style.width = width + "px"
-                canvas.setAttribute('width', width + "")
-
-                canvas.style.height = height + "px"
-                canvas.setAttribute('height', height + "")
-            }
-        }
-
-        super(ViewCanvas, RegionCanvas, {
-            willReadFrequently: option.willReadFrequently
-        })
-
-        this.__canvas = ViewCanvas
-    }
-
-    toDataURL(): Promise<string> {
-        return new Promise(resolve => {
-            resolve(this.__canvas.toDataURL())
-        })
-    }
-}
-
+import type CanvasType from '../types/Canvas'
+import type CanvasOptionType from '../types/CanvasOption'
+
+import OralCanvas from './common/canvas/index'
+import mergeOption from './common/mergeOption'
+
+class Canvas extends OralCanvas implements CanvasType {
+    private __canvas: HTMLCanvasElement
+    constructor(el: HTMLElement | null, option: CanvasOptionType = {}) {
+        if (!el) {
+            throw new Error("VISLite Canvas:The mount point requires an HTMLElement type but encountered null.")
+        }
+
+        option = mergeOption(option, {
+            region: true,
+            willReadFrequently: false
+        })
+
+        const width = el.clientWidth, height = el.clientHeight
+
+        let ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement
+
+        const _el = el as any
+
+        // 如果已经初始化过了
+        if (_el._vislite_canvas_) {
+            ViewCanvas = _el._vislite_canvas_[0]
+            RegionCanvas = _el._vislite_canvas_[1]
+        }
+
+        // 否则就初始化
+        else {
+            ViewCanvas = document.createElement('canvas')
+            el.appendChild(ViewCanvas)
+
+            if (option.region) {
+                RegionCanvas = document.createElement('canvas')
+            }
+
+            _el._vislite_canvas_ = [ViewCanvas, RegionCanvas]
+
+            el.setAttribute('vislite', 'Canvas')
+        }
+
+        // 设置画布大小
+        for (const canvas of [ViewCanvas, RegionCanvas]) {
+
+            if (canvas) {
+                canvas.style.width = width + "px"
+                canvas.setAttribute('width', width + "")
+
+                canvas.style.height = height + "px"
+                canvas.setAttribute('height', height + "")
+            }
+        }
+
+        super(ViewCanvas, RegionCanvas, {
+            willReadFrequently: option.willReadFrequently
+        })
+
+        this.__canvas = ViewCanvas
+    }
+
+    toDataURL(): Promise<string> {
+        return new Promise(resolve => {
+            resolve(this.__canvas.toDataURL())
+        })
+    }
+}
+
 export default Canvas

package/src/Eoap.ts

@@ -1,66 +1,66 @@
-import type MapType from '../types/Map'
-
-// 围绕X轴旋转
-const rotateX = function (deg: number, x: number, y: number, z: number) {
-    const cos = Math.cos(deg), sin = Math.sin(deg)
-    return [x, y * cos - z * sin, y * sin + z * cos]
-}
-
-// 围绕Y轴旋转
-const rotateY = function (deg: number, x: number, y: number, z: number) {
-    const cos = Math.cos(deg), sin = Math.sin(deg)
-    return [z * sin + x * cos, y, z * cos - x * sin]
-}
-
-// 围绕Z轴旋转
-const rotateZ = function (deg: number, x: number, y: number, z: number) {
-    const cos = Math.cos(deg), sin = Math.sin(deg)
-    return [x * cos - y * sin, x * sin + y * cos, z]
-}
-
-/* 等角斜方位投影 */
-class Eoap implements MapType {
-    readonly name: string = 'Eoap'
-
-    private __scale: number // 缩放比例
-    private __center: number[] // 投影中心经纬度
-
-    constructor(scale: number = 7, center: number[] = [107, 36]) {
-        this.__scale = scale
-        this.__center = center
-    }
-
-    use(λ: number, φ: number): [number, number, number] {
-        /**
-         * 通过旋转的方法
-         * 先旋转出点的位置
-         * 然后根据把地心到旋转中心的这条射线变成OZ这条射线的变换应用到初始化点上
-         * 这样求的的点的x,y就是最终结果
-         *
-         *  计算过程：
-         *  1.初始化点的位置是p（x,0,0）,其中x的值是地球半径除以缩放倍速
-         *  2.根据点的纬度对p进行旋转，旋转后得到的p的坐标纬度就是目标纬度
-         *  3.同样的对此刻的p进行经度的旋转，这样就获取了极点作为中心点的坐标
-         *  4.接着想象一下为了让旋转中心移动到极点需要进行旋转的经纬度是多少，记为lo和la
-         *  5.然后再对p进行经度度旋转lo获得新的p
-         *  6.然后再对p进行纬度旋转la获得新的p
-         *  7.旋转结束
-         *
-         * 特别注意：第5和第6步顺序一定不可以调换，原因来自经纬度定义上
-         * 【除了经度为0的位置，不然纬度的旋转会改变原来的经度值，反过来不会】
-         *
-         */
-        let p = rotateY((360 - φ) / 180 * Math.PI, 100 * this.__scale, 0, 0)
-        p = rotateZ(λ / 180 * Math.PI, p[0], p[1], p[2])
-        p = rotateZ((90 - this.__center[0]) / 180 * Math.PI, p[0], p[1], p[2])
-        p = rotateX((90 - this.__center[1]) / 180 * Math.PI, p[0], p[1], p[2])
-
-        return [
-            -p[0], // 加-号是因为浏览器坐标和地图不一样
-            p[1],
-            p[2]
-        ]
-    }
-}
-
-export default Eoap
+import type MapType from '../types/Map'
+
+// 围绕X轴旋转
+const rotateX = function (deg: number, x: number, y: number, z: number) {
+    const cos = Math.cos(deg), sin = Math.sin(deg)
+    return [x, y * cos - z * sin, y * sin + z * cos]
+}
+
+// 围绕Y轴旋转
+const rotateY = function (deg: number, x: number, y: number, z: number) {
+    const cos = Math.cos(deg), sin = Math.sin(deg)
+    return [z * sin + x * cos, y, z * cos - x * sin]
+}
+
+// 围绕Z轴旋转
+const rotateZ = function (deg: number, x: number, y: number, z: number) {
+    const cos = Math.cos(deg), sin = Math.sin(deg)
+    return [x * cos - y * sin, x * sin + y * cos, z]
+}
+
+/* 等角斜方位投影 */
+class Eoap implements MapType {
+    readonly name: string = 'Eoap'
+
+    private __scale: number // 缩放比例
+    private __center: number[] // 投影中心经纬度
+
+    constructor(scale: number = 7, center: number[] = [107, 36]) {
+        this.__scale = scale
+        this.__center = center
+    }
+
+    use(λ: number, φ: number): [number, number, number] {
+        /**
+         * 通过旋转的方法
+         * 先旋转出点的位置
+         * 然后根据把地心到旋转中心的这条射线变成OZ这条射线的变换应用到初始化点上
+         * 这样求的的点的x,y就是最终结果
+         *
+         *  计算过程：
+         *  1.初始化点的位置是p（x,0,0）,其中x的值是地球半径除以缩放倍速
+         *  2.根据点的纬度对p进行旋转，旋转后得到的p的坐标纬度就是目标纬度
+         *  3.同样的对此刻的p进行经度的旋转，这样就获取了极点作为中心点的坐标
+         *  4.接着想象一下为了让旋转中心移动到极点需要进行旋转的经纬度是多少，记为lo和la
+         *  5.然后再对p进行经度度旋转lo获得新的p
+         *  6.然后再对p进行纬度旋转la获得新的p
+         *  7.旋转结束
+         *
+         * 特别注意：第5和第6步顺序一定不可以调换，原因来自经纬度定义上
+         * 【除了经度为0的位置，不然纬度的旋转会改变原来的经度值，反过来不会】
+         *
+         */
+        let p = rotateY((360 - φ) / 180 * Math.PI, 100 * this.__scale, 0, 0)
+        p = rotateZ(λ / 180 * Math.PI, p[0], p[1], p[2])
+        p = rotateZ((90 - this.__center[0]) / 180 * Math.PI, p[0], p[1], p[2])
+        p = rotateX((90 - this.__center[1]) / 180 * Math.PI, p[0], p[1], p[2])
+
+        return [
+            -p[0], // 加-号是因为浏览器坐标和地图不一样
+            p[1],
+            p[2]
+        ]
+    }
+}
+
+export default Eoap

package/src/Geometry.ts

@@ -1,83 +1,83 @@
-import type GeometryType from "../types/Geometry"
-import type GeometryOptionType from "../types/GeometryOption"
-import type GeometryResultType from "../types/GeometryResult"
-
-import { splitNum } from './common/geometry/tool/circle'
-import prismHorizontal from './common/geometry/prism-horizontal'
-import prismVertical from './common/geometry/prism-vertical'
-import sphereFragment from './common/geometry/sphere-fragment'
-import mergeOption from './common/mergeOption'
-
-class Geometry implements GeometryType {
-    readonly name: string = 'Geometry'
-
-    private __option: GeometryOptionType
-
-    constructor(option: GeometryOptionType = {}) {
-        this.__option = mergeOption(option, {
-            precision: 0.1, // 精度
-            normal: false, // 是否需要法向量
-        })
-    }
-
-    config(option: GeometryOptionType) {
-        for (const key in option) {
-            this.__option[key] = option[key]
-        }
-        return this
-    }
-
-    // 圆柱体
-    cylinder(x: number, y: number, z: number, radius: number, height: number): Array<GeometryResultType> {
-
-        // 求解出需要切割多少份比较合理
-        const num = splitNum(this.__option.precision, radius)
-        return this.prism(x, y, z, radius, height, num)
-    }
-
-    // 棱柱体
-    prism(x: number, y: number, z: number, radius: number, height: number, num: number): Array<GeometryResultType> {
-
-        const result = [{
-            points: [],
-            length: 0,
-            method: "TRIANGLES" as const
-        }]
-
-        // 绘制底部的盖子
-        result[0].points.push(...prismHorizontal(this.__option.normal, x, y, z, radius, num, height > 0 ? -1 : 1))
-
-        // 绘制顶部的盖子
-        result[0].points.push(...prismHorizontal(this.__option.normal, x, y + height, z, radius, num, height > 0 ? 1 : -1))
-
-        // 绘制侧边部分
-        result[0].points.push(...prismVertical(this.__option.normal, x, y, z, radius, height, num))
-
-        result[0].length = 12 * num
-        return result
-    }
-
-    // 球体
-    sphere(cx: number, cy: number, cz: number, radius: number): Array<GeometryResultType> {
-
-        // 求解出需要切割多少份比较合理
-        const num = splitNum(this.__option.precision, radius)
-
-        // 然后一瓣瓣的绘制
-        const result = [{
-            points: [],
-            length: 0,
-            method: "TRIANGLES" as const
-        }]
-        for (let i = 0; i < num; i++) {
-            result[0].points.push(...sphereFragment(this.__option.normal, cx, cy, cz, radius, num, i))
-        }
-
-        result[0].length = result[0].points.length / (this.__option.normal ? 6 : 3)
-
-        return result
-    }
-
-}
-
+import type GeometryType from "../types/Geometry"
+import type GeometryOptionType from "../types/GeometryOption"
+import type GeometryResultType from "../types/GeometryResult"
+
+import { splitNum } from './common/geometry/tool/circle'
+import prismHorizontal from './common/geometry/prism-horizontal'
+import prismVertical from './common/geometry/prism-vertical'
+import sphereFragment from './common/geometry/sphere-fragment'
+import mergeOption from './common/mergeOption'
+
+class Geometry implements GeometryType {
+    readonly name: string = 'Geometry'
+
+    private __option: GeometryOptionType
+
+    constructor(option: GeometryOptionType = {}) {
+        this.__option = mergeOption(option, {
+            precision: 0.1, // 精度
+            normal: false, // 是否需要法向量
+        })
+    }
+
+    config(option: GeometryOptionType) {
+        for (const key in option) {
+            this.__option[key] = option[key]
+        }
+        return this
+    }
+
+    // 圆柱体
+    cylinder(x: number, y: number, z: number, radius: number, height: number): Array<GeometryResultType> {
+
+        // 求解出需要切割多少份比较合理
+        const num = splitNum(this.__option.precision, radius)
+        return this.prism(x, y, z, radius, height, num)
+    }
+
+    // 棱柱体
+    prism(x: number, y: number, z: number, radius: number, height: number, num: number): Array<GeometryResultType> {
+
+        const result = [{
+            points: [],
+            length: 0,
+            method: "TRIANGLES" as const
+        }]
+
+        // 绘制底部的盖子
+        result[0].points.push(...prismHorizontal(this.__option.normal, x, y, z, radius, num, height > 0 ? -1 : 1))
+
+        // 绘制顶部的盖子
+        result[0].points.push(...prismHorizontal(this.__option.normal, x, y + height, z, radius, num, height > 0 ? 1 : -1))
+
+        // 绘制侧边部分
+        result[0].points.push(...prismVertical(this.__option.normal, x, y, z, radius, height, num))
+
+        result[0].length = 12 * num
+        return result
+    }
+
+    // 球体
+    sphere(cx: number, cy: number, cz: number, radius: number): Array<GeometryResultType> {
+
+        // 求解出需要切割多少份比较合理
+        const num = splitNum(this.__option.precision, radius)
+
+        // 然后一瓣瓣的绘制
+        const result = [{
+            points: [],
+            length: 0,
+            method: "TRIANGLES" as const
+        }]
+        for (let i = 0; i < num; i++) {
+            result[0].points.push(...sphereFragment(this.__option.normal, cx, cy, cz, radius, num, i))
+        }
+
+        result[0].length = result[0].points.length / (this.__option.normal ? 6 : 3)
+
+        return result
+    }
+
+}
+
 export default Geometry

package/src/Matrix4/move.ts

@@ -1,12 +1,12 @@
-/**
- * 在(a,b,c)方向位移d
- */
-export default function (d: number, a: number, b: number, c: number = 0) {
-    const sqrt = Math.sqrt(a * a + b * b + c * c)
-    return [
-        1, 0, 0, 0,
-        0, 1, 0, 0,
-        0, 0, 1, 0,
-        a * d / sqrt, b * d / sqrt, c * d / sqrt, 1
-    ]
-}
+/**
+ * 在(a,b,c)方向位移d
+ */
+export default function (d: number, a: number, b: number, c: number = 0) {
+    const sqrt = Math.sqrt(a * a + b * b + c * c)
+    return [
+        1, 0, 0, 0,
+        0, 1, 0, 0,
+        0, 0, 1, 0,
+        a * d / sqrt, b * d / sqrt, c * d / sqrt, 1
+    ]
+}

package/src/Matrix4/rotate.ts

@@ -1,15 +1,15 @@
-/**
- * 围绕0Z轴旋转
- * 其它的旋转可以借助transform实现
- * 旋转角度单位采用弧度制
- */
-export default function (deg: number) {
-    const sin = Math.sin(deg),
-        cos = Math.cos(deg)
-    return [
-        cos, sin, 0, 0,
-        -sin, cos, 0, 0,
-        0, 0, 1, 0,
-        0, 0, 0, 1
-    ]
-}
+/**
+ * 围绕0Z轴旋转
+ * 其它的旋转可以借助transform实现
+ * 旋转角度单位采用弧度制
+ */
+export default function (deg: number) {
+    const sin = Math.sin(deg),
+        cos = Math.cos(deg)
+    return [
+        cos, sin, 0, 0,
+        -sin, cos, 0, 0,
+        0, 0, 1, 0,
+        0, 0, 0, 1
+    ]
+}

package/src/Matrix4/transform.ts

@@ -1,64 +1,64 @@
-/**
- * 针对任意射线(a1,b1,c1)->(a2,b2,c2)
- * 计算出两个变换矩阵
- * 分别为：任意射线变成OZ轴变换矩阵 + OZ轴变回原来的射线的变换矩阵
- */
-export default function (a1: number, b1: number, c1: number, a2: number, b2: number, c2: number) {
-
-    if (typeof a1 === 'number' && typeof b1 === 'number') {
-
-        // 如果设置两个点
-        // 表示二维上围绕某个点旋转
-        if (typeof c1 !== 'number') {
-            c1 = 0
-            a2 = a1
-            b2 = b1
-            c2 = 1
-        }
-        // 只设置三个点(设置不足六个点都认为只设置了三个点)
-        // 表示围绕从原点出发的射线旋转
-        else if (typeof a2 !== 'number' || typeof b2 !== 'number' || typeof c2 !== 'number') {
-            a2 = a1
-            b2 = b1
-            c2 = c1
-            a1 = 0
-            b1 = 0
-            c1 = 0
-        }
-
-        if (a1 == a2 && b1 == b2 && c1 == c2) throw new Error('It\'s not a legitimate ray!')
-
-        const sqrt1 = Math.sqrt((a2 - a1) * (a2 - a1) + (b2 - b1) * (b2 - b1)),
-            cos1 = sqrt1 != 0 ? (b2 - b1) / sqrt1 : 1,
-            sin1 = sqrt1 != 0 ? (a2 - a1) / sqrt1 : 0,
-
-            b = (a2 - a1) * sin1 + (b2 - b1) * cos1,
-            c = c2 - c1,
-
-            sqrt2 = Math.sqrt(b * b + c * c),
-            cos2 = sqrt2 != 0 ? c / sqrt2 : 1,
-            sin2 = sqrt2 != 0 ? b / sqrt2 : 0
-
-        return [
-
-            // 任意射线变成OZ轴变换矩阵
-            [
-                cos1, cos2 * sin1, sin1 * sin2, 0,
-                -sin1, cos1 * cos2, cos1 * sin2, 0,
-                0, -sin2, cos2, 0,
-                b1 * sin1 - a1 * cos1, c1 * sin2 - a1 * sin1 * cos2 - b1 * cos1 * cos2, -a1 * sin1 * sin2 - b1 * cos1 * sin2 - c1 * cos2, 1
-            ],
-
-            // OZ轴变回原来的射线的变换矩阵
-            [
-                cos1, -sin1, 0, 0,
-                cos2 * sin1, cos2 * cos1, -sin2, 0,
-                sin1 * sin2, cos1 * sin2, cos2, 0,
-                a1, b1, c1, 1
-            ]
-
-        ]
-    } else {
-        throw new Error('a1 and b1 is required!')
-    }
-}
+/**
+ * 针对任意射线(a1,b1,c1)->(a2,b2,c2)
+ * 计算出两个变换矩阵
+ * 分别为：任意射线变成OZ轴变换矩阵 + OZ轴变回原来的射线的变换矩阵
+ */
+export default function (a1: number, b1: number, c1: number, a2: number, b2: number, c2: number) {
+
+    if (typeof a1 === 'number' && typeof b1 === 'number') {
+
+        // 如果设置两个点
+        // 表示二维上围绕某个点旋转
+        if (typeof c1 !== 'number') {
+            c1 = 0
+            a2 = a1
+            b2 = b1
+            c2 = 1
+        }
+        // 只设置三个点(设置不足六个点都认为只设置了三个点)
+        // 表示围绕从原点出发的射线旋转
+        else if (typeof a2 !== 'number' || typeof b2 !== 'number' || typeof c2 !== 'number') {
+            a2 = a1
+            b2 = b1
+            c2 = c1
+            a1 = 0
+            b1 = 0
+            c1 = 0
+        }
+
+        if (a1 == a2 && b1 == b2 && c1 == c2) throw new Error('It\'s not a legitimate ray!')
+
+        const sqrt1 = Math.sqrt((a2 - a1) * (a2 - a1) + (b2 - b1) * (b2 - b1)),
+            cos1 = sqrt1 != 0 ? (b2 - b1) / sqrt1 : 1,
+            sin1 = sqrt1 != 0 ? (a2 - a1) / sqrt1 : 0,
+
+            b = (a2 - a1) * sin1 + (b2 - b1) * cos1,
+            c = c2 - c1,
+
+            sqrt2 = Math.sqrt(b * b + c * c),
+            cos2 = sqrt2 != 0 ? c / sqrt2 : 1,
+            sin2 = sqrt2 != 0 ? b / sqrt2 : 0
+
+        return [
+
+            // 任意射线变成OZ轴变换矩阵
+            [
+                cos1, cos2 * sin1, sin1 * sin2, 0,
+                -sin1, cos1 * cos2, cos1 * sin2, 0,
+                0, -sin2, cos2, 0,
+                b1 * sin1 - a1 * cos1, c1 * sin2 - a1 * sin1 * cos2 - b1 * cos1 * cos2, -a1 * sin1 * sin2 - b1 * cos1 * sin2 - c1 * cos2, 1
+            ],
+
+            // OZ轴变回原来的射线的变换矩阵
+            [
+                cos1, -sin1, 0, 0,
+                cos2 * sin1, cos2 * cos1, -sin2, 0,
+                sin1 * sin2, cos1 * sin2, cos2, 0,
+                a1, b1, c1, 1
+            ]
+
+        ]
+    } else {
+        throw new Error('a1 and b1 is required!')
+    }
+}