Add Axis Object

source/GLRender/Axis.ts

@@ -0,0 +1,72 @@
+import { BasicsShader } from "./BasicShader";
+import { GLContextObject } from "./GLContext";
+
+class Axis extends GLContextObject{
+
+    /**
+     * 坐标轴数据
+     */
+    static AXIS_VER_DATA = new Float32Array([
+        0,0,0,  1,0,0,
+        0,0,0,  0,1,0,
+        0,0,0,  0,0,1
+    ]);
+
+    private axisVertexBuffer: WebGLBuffer | null = null;
+
+    public onLoad() {
+
+        // 创建缓冲区
+        this.axisVertexBuffer = this.gl.createBuffer();
+
+        // 绑定缓冲区
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.axisVertexBuffer);
+        this.gl.bufferData(this.gl.ARRAY_BUFFER, Axis.AXIS_VER_DATA, this.gl.STATIC_DRAW);
+    }
+
+    /**
+     * 绘制半径
+     */
+    public r:number = 1;
+
+    public pos:number[] = [0, 0, 0];
+
+    /**
+     * 绘制坐标轴
+     */
+    public draw(shader: BasicsShader){
+
+        // 使用程序
+        shader.use();
+
+        // 绑定缓冲区
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.axisVertexBuffer);
+
+        // 指定指针数据
+        this.gl.vertexAttribPointer(
+            shader.attribLocate("aPosition"),
+            3, this.gl.FLOAT, false, 0, 0);
+
+        // mvp参数传递
+        shader.mvp(this.camera.transformMat);
+
+        // 半径传递
+        shader.radius([this.r, this.r, this.r]);
+        shader.position(this.pos);
+
+        // 绘制 X 轴
+        shader.color([1, 0, 0]);
+        this.gl.drawArrays(this.gl.LINES, 0, 2);
+
+        // 绘制 Y 轴
+        shader.color([0, 1, 0]);
+        this.gl.drawArrays(this.gl.LINES, 2, 2);
+
+        // 绘制 Z 轴
+        shader.color([0, 0, 1]);
+        this.gl.drawArrays(this.gl.LINES, 4, 2);
+    }
+}
+
+export default Axis;
+export { Axis };

source/GLRender/BasicRenderer.ts

@@ -79,11 +79,6 @@ abstract class BasicRenderer<
          * 实例化时钟
          */
         this.clock = new Clock();
-
-        /**
-         * 初始化
-         */
-        this.onLoad(param);
 	}
 
     /**
@@ -137,9 +132,8 @@ abstract class BasicRenderer<
 
     /**
      * 初始化
-     * @param param 渲染器参数
      */
-    abstract onLoad(param: Partial<M & IRendererParams>): void;
+    abstract onLoad(): void;
 
     /**
      * 渲染器执行

source/GLRender/ClassicRenderer.ts

@@ -1,22 +1,50 @@
 import { ObjectID, ObjectData, ICommonParam } from "@Model/Renderer";
 import { BasicRenderer, IRendererParams } from "./BasicRenderer";
 import { BasicsShader } from "./BasicShader";
+import { Axis } from "./Axis";
 
 interface IClassicRendererParams {}
 
 class ClassicRenderer extends BasicRenderer<{}, IClassicRendererParams> {
 
-    onLoad(param: Partial<IClassicRendererParams & IRendererParams>): void {
+    private basicShader: BasicsShader = undefined as any;
+    private axisObject: Axis = undefined as any;
+
+    public onLoad(): void {
         
         // 自动调节分辨率
         this.autoResize();
 
-        let shader = new BasicsShader().bindRenderer(this);
+        this.basicShader = new BasicsShader().bindRenderer(this);
+
+        this.axisObject = new Axis().bindRenderer(this);
+
+        this.canvas.on("mousemove", () => {
+
+            // 相机旋转
+            if (this.canvas.mouseDown)
+            this.camera.ctrl(this.canvas.mouseMotionX, this.canvas.mouseMotionY);
+
+        });
+
+        this.canvas.on("mousedown", () => {
+            this.canvas.can.style.cursor = "grabbing"
+        });
+
+        this.canvas.on("mouseup", () => {
+            this.canvas.can.style.cursor = "grab"
+        })
         
         // 运行
         this.run();
     }
 
+    loop(t: number): void {
+        this.cleanCanvas();
+        this.camera.generateMat();
+        this.axisObject.draw(this.basicShader);
+    }
+
     clean(id?: ObjectID | ObjectID[]): this {
         throw new Error("Method not implemented.");
     }
@@ -28,10 +56,6 @@ class ClassicRenderer extends BasicRenderer<{}, IClassicRendererParams> {
     cube(id: ObjectID, position: ObjectData, param?: ICommonParam): this {
         throw new Error("Method not implemented.");
     }
-
-    loop(t: number): void {
-        this.cleanCanvas();
-    }
 }
 
 export default ClassicRenderer;

source/GLRender/GLShader.ts

@@ -118,7 +118,7 @@ abstract class GLShader<
         // 缓存搜索
         if (cache === undefined || cache <= -1){
 
-            cache = this.gl.getAttribLocation(!this.program, attr as string);
+            cache = this.gl.getAttribLocation(this.program!, attr as string);
 
             if (cache === undefined || cache <= -1) {
                 console.error("Attrib: can not get locate of " + attr);
@@ -151,7 +151,7 @@ abstract class GLShader<
         // 缓存搜索
         if (!cache) {
 
-            cache = this.gl.getUniformLocation(!this.program, uni as string);
+            cache = this.gl.getUniformLocation(this.program!, uni as string);
             if (!cache) console.error("Uniform: can not get locate of " + uni);
 
             this.uniformLocationCache.set(uni as string, cache as any);

source/Page/Laboratory/Laboratory.scss

@@ -7,5 +7,6 @@ div.main-canvas {
     div.canvas {
         width: 100%;
         height: 100%;
+        cursor: grab;
     }
 }

source/Page/Laboratory/Laboratory.tsx

@@ -26,6 +26,8 @@ class Laboratory extends Component {
             className: "canvas"
         });
 
+        renderer.onLoad();
+
         console.log(renderer);
 
         this.canvasContRef.current.appendChild(renderer.canvas.dom);