Question

我一直在努力学习使用html5画布创建基本的3d球体，我是3D编程的新手。当我用Google搜索时，我发现这非常有用article。你可以在那里找到有效的例子。

function drawEllipse(ox, oy, oz, or, alpha, beta, gamma, hidden) {
    for (var theta=0; theta <=2 * Math.PI; theta += 0.02) {
        var px = ox + or * Math.cos(theta);
        var py = oy;
        var pz = oz + or * Math.sin(theta);
        var a = transform(px, py, pz, alpha, beta, gamma);
        if (!hidden || a[2] >= 0) {
            drawDot(radius * a[0], radius * a[1]);
        }
    }
}
function drawDot(x, y) {
    ctx.fillRect(x, y, 1, 1);
}
/* 3d rotation matrix */
function transform(x, y, z, rz, rx, ry) {
    return [
            ((x * Math.sin(rz) - y * Math.cos(rz)) * Math.sin(rx) + z * Math.cos(rx)) * Math.sin(ry) + (x * Math.cos(rz) - y * Math.sin(rz)) * Math.cos(ry),
            (x * Math.sin(rz) - y * Math.cos(rz)) * Math.cos(rx) - z * Math.sin(rx),
            ((x * Math.sin(rz) - y * Math.cos(rz)) * Math.sin(rx) + z * Math.cos(rx)) * Math.cos(ry) - (x * Math.cos(rz) - y * Math.sin(rz)) * Math.sin(ry)
        ]
}
/*latitude circles*/
    for (var latitude = 0; latitude < Math.PI / 2; latitude += Math.PI / 18) {
        drawEllipse(0, Math.sin(latitude), 0,Math.cos(latitude),0, alpha, gamma,true);
        drawEllipse(0, -Math.sin(latitude), 0,Math.cos(latitude),0, alpha, gamma,true);
    }
/*longitude circles*/
    for (var longitude=0 ; longitude < Math.PI; longitude += Math.PI / 18) {
        drawEllipse(0, 0, 0,1,longitude, Math.PI / 2 + alpha, gamma,true);
    } // alpha and gamma are the x and y axis rotation angles

但唯一的问题是在球体上拖动鼠标时的旋转方向。偏航和俯仰方向不正确。从左向右旋转（偏航）工作正常。但是从上到下（俯仰）旋转是不同的。有谁能找到解决方案？

使用javascript的3d球形

0 个答案: