Add Base box object

source/GLRender/BaseCube.ts

@@ -1,11 +1,89 @@
 import { GLContextObject } from "./GLContext";
+import { Camera } from "./Camera";
+import { BasicsShader } from "./BasicShader";
 
-class BaseCube extends GLContextObject {
+class BaseCube extends GLContextObject{
 
-	onLoad() {
-		throw new Error("Method not implemented.");
+    /**
+     * 立方体数据
+     */
+    static CUBE_VER_DATA = new Float32Array([
+        1,1,1,   -1,1,1,   -1,1,-1,    1,1,-1,
+        1,-1,1,  -1,-1,1,  -1,-1,-1,   1,-1,-1
+    ]);
+
+    /**
+     * 立方体线段绘制索引
+     */
+    static CUBE_ELE_DATA = new Uint16Array([
+        0,1,  1,2,  2,3,  3,0,
+        4,5,  5,6,  6,7,  7,4,
+        0,4,  1,5,  2,6,  3,7
+    ]);
+
+    public onLoad() {
+
+        // 创建缓冲区
+        this.cubeVertexBuffer = this.gl.createBuffer();
+        this.cubeElementBuffer = this.gl.createBuffer();
+
+        // 绑定缓冲区
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.cubeVertexBuffer);
+        this.gl.bufferData(this.gl.ARRAY_BUFFER, BaseCube.CUBE_VER_DATA, this.gl.STATIC_DRAW);
+
+        this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.cubeElementBuffer);
+        this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, BaseCube.CUBE_ELE_DATA, this.gl.STATIC_DRAW);
+    }
+    
+    private cubeVertexBuffer: WebGLBuffer | null = null;
+    private cubeElementBuffer: WebGLBuffer | null = null;
+
+    /**
+     * 绘制半径
+     */
+    private r:[number,number,number] = [1, 1, 1];
+
+    /**
+     * 坐标
+     */
+    public position = [0, 0, 0];
+
+    /**
+     * 颜色
+     */
+    public color = [.5, .5, .5];
+
+    /**
+     * 绘制立方体
+     */
+    public draw(shader: BasicsShader){
+
+        // 使用程序
+        shader.use();
+
+        // 绑定缓冲区
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.cubeVertexBuffer);
+        this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.cubeElementBuffer);
+
+        // 指定指针数据
+        this.gl.vertexAttribPointer(
+            shader.attribLocate("aPosition"),
+            3, this.gl.FLOAT, false, 0, 0);
+
+        // mvp参数传递
+        shader.mvp(this.camera.transformMat);
+
+        // 半径传递
+        shader.radius(this.r);
+        shader.position(this.position);
+
+        // 指定颜色
+        shader.color(this.color);
+
+        // 开始绘制
+        this.gl.drawElements(this.gl.LINES, 24, this.gl.UNSIGNED_SHORT, 0);
     }
 }
 
-export default GLContextObject;
-export { GLContextObject };
+export default BaseCube;
+export { BaseCube };

source/GLRender/BasicRenderer.ts

@@ -75,6 +75,9 @@ abstract class BasicRenderer<
             }
         }
 
+        // 开启深度测试
+        this.gl.enable(this.gl.DEPTH_TEST);
+
         /**
          * 实例化时钟
          */

source/GLRender/ClassicRenderer.ts

@@ -1,7 +1,8 @@
 import { ObjectID, ObjectData, ICommonParam } from "@Model/Renderer";
-import { BasicRenderer, IRendererParams } from "./BasicRenderer";
+import { BasicRenderer } from "./BasicRenderer";
 import { BasicsShader } from "./BasicShader";
 import { Axis } from "./Axis";
+import { BaseCube } from "./BaseCube";
 
 interface IClassicRendererParams {}
 
@@ -9,6 +10,7 @@ class ClassicRenderer extends BasicRenderer<{}, IClassicRendererParams> {
 
     private basicShader: BasicsShader = undefined as any;
     private axisObject: Axis = undefined as any;
+    private cubeObject: BaseCube = undefined as any;
 
     public onLoad(): void {
         
@@ -19,6 +21,8 @@ class ClassicRenderer extends BasicRenderer<{}, IClassicRendererParams> {
 
         this.axisObject = new Axis().bindRenderer(this);
 
+        this.cubeObject = new BaseCube().bindRenderer(this);
+
         this.canvas.on("mousemove", () => {
 
             // 相机旋转
@@ -43,6 +47,7 @@ class ClassicRenderer extends BasicRenderer<{}, IClassicRendererParams> {
         this.cleanCanvas();
         this.camera.generateMat();
         this.axisObject.draw(this.basicShader);
+        this.cubeObject.draw(this.basicShader);
     }
 
     clean(id?: ObjectID | ObjectID[]): this {