WebGL 球体旋转

问：

我正在做一个项目，试图模拟一个球从相机上，无论我怎么尝试，我似乎都无法让球真正。我试过翻译，但这很粗糙，看起来并不顺利，我无法真正进行旋转。

var canvas;
var gl;

var pointsArray = [];

var numTimesToSubdivide = 6;
var index = 0;

var modelViewMatrixLoc;
var projectionMatrixLoc;

var theta = 0.0; // Initial rotation angle
var thetaSpeed = 0.1; // Rotation speed

function triangle(a, b, c) {
    pointsArray.push(a, b, c);
    index += 3;
}

function divideTriangle(a, b, c, count) {
    if (count > 0) {
        var ab = mix(a, b, 0.5);
        var ac = mix(a, c, 0.5);
        var bc = mix(b, c, 0.5);

        ab = normalize(ab, true);
        ac = normalize(ac, true);
        bc = normalize(bc, true);

        divideTriangle(a, ab, ac, count - 1);
        divideTriangle(ab, b, bc, count - 1);
        divideTriangle(bc, c, ac, count - 1);
        divideTriangle(ab, bc, ac, count - 1);
    } else {
        triangle(a, b, c);
    }
}

function sphere(a, b, c, d, n) {
    divideTriangle(a, b, c, n);
    divideTriangle(d, c, b, n);
    divideTriangle(a, d, b, n);
    divideTriangle(a, c, d, n);
}

function render() {
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    // Update the rotation angle
    theta += thetaSpeed;

    // Calculate the new modelViewMatrix with rotation
    var eye = vec3(0.0, 0.0, 2.0);
    var at = vec3(0.0, 0.0, 0.0);
    var up = vec3(0.0, 1.0, 0.0);
    var modelViewMatrix = mult(lookAt(eye, at, up), rotate(theta, [0, 1, 0]));

    // Set the updated modelViewMatrix to the shader
    gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(modelViewMatrix));

    // Draw the sphere
    for (var i = 0; i < index; i += 3)
        gl.drawArrays(gl.TRIANGLES, i, 3);

    // Request the next frame
    requestAnimationFrame(render);
}

window.onload = function init() {
    canvas = document.getElementById("gl-canvas");
    gl = WebGLUtils.setupWebGL(canvas);

    if (!gl) {
        alert("WebGL isn't available");
    }

    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.clearColor(1.0, 1.0, 1.0, 1.0);
    gl.enable(gl.DEPTH_TEST);

    var program = initShaders(gl, "vertex-shader", "fragment-shader");
    gl.useProgram(program);

    var radius = 0.4;

    var va = vec4(0.0, 0.0, -radius, 1);
    var vb = vec4(0.0, radius * 0.942809, radius * 0.333333, 1);
    var vc = vec4(-radius * 0.816497, -radius * 0.471405, radius * 0.333333, 1);
    var vd = vec4(radius * 0.816497, -radius * 0.471405, radius * 0.333333, 1);

    sphere(va, vb, vc, vd, numTimesToSubdivide);

    var vBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, flatten(pointsArray), gl.STATIC_DRAW);

    var vPosition = gl.getAttribLocation(program, "vPosition");
    gl.vertexAttribPointer(vPosition, 4, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vPosition);

    // Define modelViewMatrixLoc and projectionMatrixLoc
    modelViewMatrixLoc = gl.getUniformLocation(program, "modelViewMatrix");
    projectionMatrixLoc = gl.getUniformLocation(program, "projectionMatrix");

    var eye = vec3(0.0, 0.0, 2.0);
    var at = vec3(0.0, 0.0, 0.0);
    var up = vec3(0.0, 1.0, 0.0);
    var modelViewMatrix = lookAt(eye, at, up);
    var projectionMatrix = ortho(-4, 4, -4, 4, -25, 25);

    gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(modelViewMatrix));
    gl.uniformMatrix4fv(projectionMatrixLoc, false, flatten(projectionMatrix));

    render();
};

我有一种感觉，我不应该使用 lookAt 函数，我宁愿在透视投影中使用它，但更改它会使球体变成正方形。我一直在以各种方式篡改它，但没有取得任何进展。我对这个东西比较陌生，所以任何建议都是值得赞赏的。