第一个3D视图

旧城等待， 2022-05-27 04:35 199阅读 0赞

效果如下：

![70][]

源代码如下：

<!doctype html>  
<html>  
<body>  
<canvas width = "570" height = "570" id = "my\_Canvas"></canvas>  
  
  
<script>  
  
  
    /\*============= 创建一个画布 =================\*/  
    var canvas = document.getElementById('my\_Canvas');  
    gl = canvas.getContext('experimental-webgl');  
  
  
    /\*============ 定义和存储几何 =========\*/  
  
  
    //顶点  
    var vertices = \[  
        -1,-1,-1, 1,-1,-1, 1, 1,-1, -1, 1,-1,  
        -1,-1, 1, 1,-1, 1, 1, 1, 1, -1, 1, 1,  
        -1,-1,-1, -1, 1,-1, -1, 1, 1, -1,-1, 1,  
        1,-1,-1, 1, 1,-1, 1, 1, 1, 1,-1, 1,  
        -1,-1,-1, -1,-1, 1, 1,-1, 1, 1,-1,-1,  
        -1, 1,-1, -1, 1, 1, 1, 1, 1, 1, 1,-1,  
    \];  
    /\*var vertices = \[  
        -0.5,-0.5,-0.5, 0.5,-0.5,-0.5, 0.5, 0.5,-0.5, -0.5, 0.5,-0.5,  
        -0.5,-0.5, 0.5, 0.5,-0.5, 0.5, 0.5, 0.5, 0.5, -0.5, 0.5, 0.5,  
        -1,-1,-1, -1, 1,-1, -1, 1, 1, -1,-1, 1,  
        1,-1,-1, 1, 1,-1, 1, 1, 1, 1,-1, 1,  
        -1,-1,-1, -1,-1, 1, 1,-1, 1, 1,-1,-1,  
        -1, 1,-1, -1, 1, 1, 1, 1, 1, 1, 1,-1,  
    \];\*/  
  
  
    //颜色  
    var colors = \[  
        5,3,7, 5,3,7, 5,3,7, 5,3,7,  
        1,1,3, 1,1,3, 1,1,3, 1,1,3,  
        0,0,1, 0,0,1, 0,0,1, 0,0,1,  
        1,0,0, 1,0,0, 1,0,0, 1,0,0,  
        1,1,0, 1,1,0, 1,1,0, 1,1,0,  
        0,1,0, 0,1,0, 0,1,0, 0,1,0  
    \];  
    /\*var colors = \[  
        1,1,3, 1,1,3, 1,1,3, 1,1,3,  
        6,0,0, 0,1,0, 0,0,1, 1,1,0,  
        0,0,1, 0,0,1, 0,0,1, 0,0,1,  
        1,0,0, 1,0,0, 1,0,0, 1,0,0,  
        1,1,0, 1,1,0, 1,1,0, 1,1,0,  
        0,1,0, 0,1,0, 0,1,0, 0,1,0  
    \];\*/  
  
  
    //图元装配需要的图元数据  
    var indices = \[  
        0,1,2, 0,2,3, 4,5,6, 4,6,7,  
        8,9,10, 8,10,11, 12,13,14, 12,14,15,  
        16,17,18, 16,18,19, 20,21,22, 20,22,23  
    \];  
  
  
    // 创建并存储数据到顶点缓冲区  
    var vertex\_buffer = gl.createBuffer ();  
    gl.bindBuffer(gl.ARRAY\_BUFFER, vertex\_buffer);  
    gl.bufferData(gl.ARRAY\_BUFFER, new Float32Array(vertices), gl.STATIC\_DRAW);  
  
  
    // 创建并存储数据到颜色缓冲区  
    var color\_buffer = gl.createBuffer ();  
    gl.bindBuffer(gl.ARRAY\_BUFFER, color\_buffer);  
    gl.bufferData(gl.ARRAY\_BUFFER, new Float32Array(colors), gl.STATIC\_DRAW);  
  
  
    // 创建并将数据存储到索引缓冲区中  
    var index\_buffer = gl.createBuffer ();  
    gl.bindBuffer(gl.ELEMENT\_ARRAY\_BUFFER, index\_buffer);  
    gl.bufferData(gl.ELEMENT\_ARRAY\_BUFFER, new Uint16Array(indices), gl.STATIC\_DRAW);  
  
  
    /\*=================== Shaders =========================\*/  
  
  
    var vertCode = 'attribute vec3 position;'+  
        'uniform mat4 Pmatrix;'+  
        'uniform mat4 Vmatrix;'+  
        'uniform mat4 Mmatrix;'+  
        'attribute vec3 color;'+//the color of the point  
        'varying vec3 vColor;'+  
  
  
        'void main(void) \{ '+//pre-built function  
        'gl\_Position = Pmatrix\*Vmatrix\*Mmatrix\*vec4(position, 1.);'+  
        'vColor = color;'+  
        '\}';  
  
  
    var fragCode = 'precision mediump float;'+  
        'varying vec3 vColor;'+  
        'void main(void) \{'+  
        'gl\_FragColor = vec4(vColor, 1.);'+  
        '\}';  
  
  
    var vertShader = gl.createShader(gl.VERTEX\_SHADER);  
    gl.shaderSource(vertShader, vertCode);  
    gl.compileShader(vertShader);  
  
  
    var fragShader = gl.createShader(gl.FRAGMENT\_SHADER);  
    gl.shaderSource(fragShader, fragCode);  
    gl.compileShader(fragShader);  
  
  
    var shaderProgram = gl.createProgram();  
    gl.attachShader(shaderProgram, vertShader);  
    gl.attachShader(shaderProgram, fragShader);  
    gl.linkProgram(shaderProgram);  
  
  
    /\* ====== 将属性关联到顶点着色器 =====\*/  
    var Pmatrix = gl.getUniformLocation(shaderProgram, "Pmatrix");  
    var Vmatrix = gl.getUniformLocation(shaderProgram, "Vmatrix");  
    var Mmatrix = gl.getUniformLocation(shaderProgram, "Mmatrix");  
  
  
    gl.bindBuffer(gl.ARRAY\_BUFFER, vertex\_buffer);  
    var position = gl.getAttribLocation(shaderProgram, "position");  
    gl.vertexAttribPointer(position, 3, gl.FLOAT, false,0,0) ;  
  
  
    // Position  
    gl.enableVertexAttribArray(position);  
    gl.bindBuffer(gl.ARRAY\_BUFFER, color\_buffer);  
    var color = gl.getAttribLocation(shaderProgram, "color");  
    gl.vertexAttribPointer(color, 3, gl.FLOAT, false,0,0) ;  
  
  
    // Color  
    gl.enableVertexAttribArray(color);  
    gl.useProgram(shaderProgram);  
  
  
    /\*==================== 矩阵 =====================\*/  
  
  
    function get\_projection(angle, a, zMin, zMax) \{  
        var ang = Math.tan((angle\*.5)\*Math.PI/180);//angle\*.5  
        return \[  
            0.5/ang, 0 , 0, 0,  
            0, 0.5\*a/ang, 0, 0,  
            0, 0, -(zMax+zMin)/(zMax-zMin), -1,  
            0, 0, (-2\*zMax\*zMin)/(zMax-zMin), 0  
        \];  
    \}  
  
  
    var proj\_matrix = get\_projection(40, canvas.width/canvas.height, 1, 100);  
  
  
    var mov\_matrix = \[1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1\];  
    var view\_matrix = \[1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1\];  
  
  
    // translating z  
    view\_matrix\[14\] = view\_matrix\[14\]-6;//zoom  
  
  
    /\*==================== 旋转 ====================\*/  
  
  
    function rotateZ(m, angle) \{  
        var c = Math.cos(angle);  
        var s = Math.sin(angle);  
        var mv0 = m\[0\], mv4 = m\[4\], mv8 = m\[8\];  
  
  
        m\[0\] = c\*m\[0\]-s\*m\[1\];  
        m\[4\] = c\*m\[4\]-s\*m\[5\];  
        m\[8\] = c\*m\[8\]-s\*m\[9\];  
  
  
        m\[1\]=c\*m\[1\]+s\*mv0;  
        m\[5\]=c\*m\[5\]+s\*mv4;  
        m\[9\]=c\*m\[9\]+s\*mv8;  
    \}  
  
  
    function rotateX(m, angle) \{  
        var c = Math.cos(angle);  
        var s = Math.sin(angle);  
        var mv1 = m\[1\], mv5 = m\[5\], mv9 = m\[9\];  
  
  
        m\[1\] = m\[1\]\*c-m\[2\]\*s;  
        m\[5\] = m\[5\]\*c-m\[6\]\*s;  
        m\[9\] = m\[9\]\*c-m\[10\]\*s;  
  
  
        m\[2\] = m\[2\]\*c+mv1\*s;  
        m\[6\] = m\[6\]\*c+mv5\*s;  
        m\[10\] = m\[10\]\*c+mv9\*s;  
    \}  
  
  
    function rotateY(m, angle) \{  
        var c = Math.cos(angle);  
        var s = Math.sin(angle);  
        var mv0 = m\[0\], mv4 = m\[4\], mv8 = m\[8\];  
  
  
        m\[0\] = c\*m\[0\]+s\*m\[2\];  
        m\[4\] = c\*m\[4\]+s\*m\[6\];  
        m\[8\] = c\*m\[8\]+s\*m\[10\];  
  
  
        m\[2\] = c\*m\[2\]-s\*mv0;  
        m\[6\] = c\*m\[6\]-s\*mv4;  
        m\[10\] = c\*m\[10\]-s\*mv8;  
    \}  
  
  
    rotateZ(mov\_matrix, 1);//time  
    rotateY(mov\_matrix, 2);  
    rotateX(mov\_matrix, 0.2);  
  
  
    /\*================= Drawing ===========================\*/  
    var time\_old = 0;  
  
  
    var animate = function(time) \{  
  
  
        var dt = time-time\_old;  
        rotateZ(mov\_matrix, dt\*0.001);//time  
        rotateY(mov\_matrix, dt\*0.001);  
        rotateX(mov\_matrix, dt\*0.001);  
        time\_old = time;  
  
  
        gl.enable(gl.DEPTH\_TEST);  
        gl.depthFunc(gl.LEQUAL);  
        gl.clearColor(0.5, 0.5, 0.5, 0.9);  
        gl.clearDepth(1.0);  
  
  
        gl.viewport(0.0, 0.0, canvas.width, canvas.height);  
        gl.clear(gl.COLOR\_BUFFER\_BIT | gl.DEPTH\_BUFFER\_BIT);  
        gl.uniformMatrix4fv(Pmatrix, false, proj\_matrix);  
        gl.uniformMatrix4fv(Vmatrix, false, view\_matrix);  
        gl.uniformMatrix4fv(Mmatrix, false, mov\_matrix);  
        gl.bindBuffer(gl.ELEMENT\_ARRAY\_BUFFER, index\_buffer);  
        gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED\_SHORT, 0);  
  
  
        window.requestAnimationFrame(animate);  
    \}  
    animate(0);  
  
  
</script>  
  
  
</body>  
</html>

### 更多精彩技术分享请浏览本人博客：[https://blog.csdn.net/wohiusdashi][https_blog.csdn.net_wohiusdashi] ###

[70]: /images/20220527/b6823667118a4a1e82202c4dd7596327.png
[https_blog.csdn.net_wohiusdashi]: https://blog.csdn.net/wohiusdashi