Question

我正在制作一个绘制旋转棱镜的简单JavaScript程序。我的矢量包含每个点的x，y和z坐标以及它们连接的点。我遇到的问题是我找不到比较2d点的完美方法。当图形旋转时，它具有很少但仍然可见的缺陷，看起来线条变得越来越短。我将粘贴代码的重要部分。

var canvas = document.getElementById("canvas-id");
canvas.width = 1200;
canvas.height = 500;
var ctx = canvas.getContext("2d");
var dx=[],dy=[],dz=[],dh=[],dgo=[],h=10,ang=10*Math.PI/360;
var pause=false;
for(var i=0;i<h/2;i++){
    dx[i]=Math.cos(i/h*4*Math.PI+Math.PI/4)*70.71;
    dy[i]=Math.sin(i/h*4*Math.PI+Math.PI/4)*70.71;
    console.log(i/h*2*360);
    dz[i]=150;
    dh[i]=3;
    dgo[i]=[];
    dgo[i][0]=i+h/2;
    dgo[i][1]=i+1;  
    dgo[i][2]=i-1;

    dx[i+h/2]=Math.cos(i/h*4*Math.PI+Math.PI/4)*70.71;
    dy[i+h/2]=Math.sin(i/h*4*Math.PI+Math.PI/4)*70.71;
    dz[i+h/2]=250;
    dh[i+h/2]=3;
    dgo[i+h/2]=[];
    dgo[i+h/2][0]=i;
    dgo[i+h/2][1]=i+h/2+1;
    dgo[i+h/2][2]=i+h/2-1;
    if(i==h/2-1){
        dgo[i][1]-=h/2;
        dgo[i+h/2][1]-=h/2;
    }
    if(i==0){
        dgo[i][2]+=h/2;
        dgo[i+h/2][2]+=h/2;
    }
}
window.addEventListener("mouseup", function (args) {    
    pause=!pause;
}, false);
function abs(a){
    if(a>=0) return a;
    return -a;
}
function pit(x1,y1,x2,y2){
    return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
}
function rotate(x,y,z){
    for(var i=0;i<h;i++){
        var m=Math.atan2(dx[i]-x,dz[i]-z)/2/Math.PI*360-90,dis=pit(dx[i],dz[i],x,z);
        if(m>0) m-=360
        dx[i]=x+Math.cos(abs(m)/360*2*Math.PI+ang)*dis;
        dz[i]=z+Math.sin(abs(m)/360*2*Math.PI+ang)*dis;
    }
}
function update() {
    if(!pause)rotate(0,0,200)
    setTimeout(update, 10);
}
function line(x1,y1,x2,y2){
    if((x1>0 && y1>0 && x1<canvas.width && y1<canvas.height) || (x2>0 && y2>0 && x2<canvas.width && y2<canvas.height))
    ctx.beginPath();
    ctx.moveTo(x1,y1);
    ctx.lineTo(x2,y2);
    ctx.stroke();
    ctx.closePath();
}
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.globalAlpha = 1;
    for(var i=0;i<h;i++){
        for(var j=0;j<dh[i];j++){
            if(dz[i]>0 && dz[dgo[i][j]]>0)
                line(dx[i]/Math.sqrt(dz[i])*10+canvas.width/2,dy[i]/Math.sqrt(dz[i])*10+canvas.height/2,
                     dx[dgo[i][j]]/Math.sqrt(dz[dgo[i][j]])*10+canvas.width/2,dy[dgo[i][j]]/Math.sqrt(dz[dgo[i][j]])*10+canvas.height/2);
        }
    }
console.log(ctx.translate(0,0,10));
    requestAnimationFrame(draw);
}
draw(); 
update();

如何绘制3d对象的javascript

0 个答案: