Question

我正在尝试解决一个javascript难题。绘制3D立方体线框并沿穿过其中心的轴旋转。在旋转物体停止之前，旋转物体应以“X”度/秒^ 2的速度减速。对象应对以下用户输入作出如下响应刷卡 /阻力：根据速度差异加速或减速旋转物体之间用摩擦系数Y旋转和滑动。触摸 /点击产生摩擦，使旋转进一步减速Y（摩擦系数）这是我写的代码

    <!DOCTYPE html>
        <html>
        <body>
        <canvas id="myCanvas" width="1000" height="1000"></canvas>
        <script>
         var canvas = document.getElementById("myCanvas");
         var ctx = canvas.getContext("2d");
         ctx.translate(200,200);
         var x1,x2,y1,y2,tempx,tempy,up=false,down = false,inter, interval;
         function line(context, p1,p2) {
            context.beginPath();
            context.moveTo(p1.x, p1.y);
            context.lineTo(p2.x, p2.y);
            context.closePath();
            context.stroke();
            }
        function project() {
            ctx.clearRect(-500, -500, canvas.width, canvas.height);
            for(var i=0;i<edges.length;i++)
            {   
                // var x1 = vertices[edges[i][0]][0];
                // var y1 = vertices[edges[i][0]][1];
                // var x2 = vertices[edges[i][1]][0];
                // var y2 = vertices[edges[i][1]][1];
                // var z1 = vertices[edges[i][0]][3];
                // var z2 = vertices[edges[i][1]][3];
                // vertices[edges[i][0]][0] = x1 + 20;
                // vertices[edges[i][0]][1] = y1 + 20;
                // vertices[edges[i][1]][0] = x2 + 20;
                // vertices[edges[i][1]][1] = y2 + 20;
                line(ctx,{x:vertices[edges[i][0]][0],y:vertices[edges[i][0]][1]},          {x:vertices[edges[i][1]][0],y:vertices[edges[i][1]][1]});
            }
        }

        function rep()
        {
            rotateX(tempy/3000);
            rotateY(tempx/3000);
            project();
        }

        function stop()
        {
            console.log(inter);
            inter += 0.5;
            rotateX(tempy/3000);
            rotateY(tempx/3000);
            project();
            clearInterval(interval);
            interval = setInterval(stop, inter);
        }


        var vertices = [[-100,-100,-100],[-100,-100,100],[-100,100,-100],   [-100,100,100],[100,-100,-100],[100,-100,100],[100,100,-100],[100,100,100]];
        var edges =[[0,1],[1,3],[3,2],[2,0],[4,5],[5,7],[7,6],[6,4],[0,4],[1,5],[2,6],[3,7]];

        var rotateX = function(theta) {
            var sina = Math.sin(theta);
            var cosa = Math.cos(theta);

            for (var i=0; i<vertices.length; i++) {
                var vertice = vertices[i];
                var y = vertice[1];
                var z = vertice[2];
                vertice[1] = y * cosa - z * sina;
                vertice[2] = z * cosa + y * sina;
            }
        };

        var rotateY = function(theta) {
            var sina = Math.sin(theta);
            var cosa = Math.cos(theta);

            for (var i=0; i<vertices.length; i++) {
                var vertice = vertices[i];
                var x = vertice[0];
                var z = vertice[2];
                vertice[0] = x * cosa - z * sina;
                vertice[2] = z * cosa + x * sina;
            }
        };

        var rotateZ = function(theta) {
            var sina = Math.sin(theta);
            var cosa = Math.cos(theta);

            for (var i=0; i<vertices.length; i++) {
                var vertice = vertices[i];
                var x = vertice[0];
                var y = vertice[1];
                vertice[0] = x * cosa - y * sina;
                vertice[1] = y * cosa + x * sina;
            }
        };
        rotateZ(60);
        rotateY(60);
        rotateZ(60);
        project();

        canvas.addEventListener("mousedown",function(event)
        {

            old = Date.now();
            x1 = event.clientX;
            y1 = event.clientY;
            down = true;
        },false);
        canvas.addEventListener("mouseup",function(event)
        {
            up = true;
            newt = Date.now();
            dt = newt - old;
            x2 = event.clientX;
            y2 = event.clientY;
            dx = Math.sqrt(Math.pow((x2-x1),2)-Math.pow((y2-y1),2));
            inter = (dx / dt) * 2;
            //console.log(inter);
            tempx = x2 - x1;
            tempy = y2 - y1;
            interval = setInterval(rep, inter);
            // console.log("x1:" + x1 +" y1:" + y1 + "x2:" + x2 + "y2:" + y2);
        },false);
        canvas.addEventListener("mousemove",function(event)
        {
            if(down){
                newt = Date.now();
                dt = newt - old;
                x2 = event.clientX;
                y2 = event.clientY;
                // console.log("x1:" + x1 +" y1:" + y1 + "x2:" + x2 + "y2:" + y2);
                rotateX((y2-y1)/3000);
                rotateY((x2-x1)/3000);
                project();
            }
        },false);

        canvas.addEventListener("click",function(event)
        {
            if(down)
            {
                down = false;
            }
            if(up)
            {
                clearInterval(interval);
                interval = setInterval(stop, inter);
                up = false;
            }
        },false);

        // canvas.addEventListener("swipe",function)
    </script>
    <body>
</html>

我想通过线性减慢旋转速度并停止来停止立方体。如何改进我的代码

Answer 1

 <html>
    <body>
    <canvas id="myCanvas" width="1000" height="1000"></canvas>
    <script>
     var canvas = document.getElementById("myCanvas");
     var ctx = canvas.getContext("2d");
     ctx.translate(200,200);
     var x1,x2,y1,y2,tempx,tempy,up=false,down = false,inter, interval;
     function line(context, p1,p2) {
        context.beginPath();
        context.moveTo(p1.x, p1.y);
        context.lineTo(p2.x, p2.y);
        context.closePath();
        context.stroke();
        }
    function project() {
        ctx.clearRect(-500, -500, canvas.width, canvas.height);
        for(var i=0;i<edges.length;i++)
        {   

            line(ctx,{x:vertices[edges[i][0]][0],y:vertices[edges[i][0]][1]},          {x:vertices[edges[i][1]][0],y:vertices[edges[i][1]][1]});
        }
    }

    function rep()
    {
        rotateX(tempy/1000);
        rotateY(tempx/1000);
        project();
    }

    function stop()
    {
        console.log(inter);
        inter += 0.5;
        rotateX(tempy/1000);
        rotateY(tempx/1000);
        project();
        clearInterval(interval);
        interval = setInterval(stop, inter);
    }


    var vertices = [[-100,-100,-100],[-100,-100,100],[-100,100,-100],   [-100,100,100],[100,-100,-100],[100,-100,100],[100,100,-100],[100,100,100]];
    var edges =[[0,1],[1,3],[3,2],[2,0],[4,5],[5,7],[7,6],[6,4],[0,4],[1,5],[2,6],[3,7]];

    var rotateX = function(theta) {
        var sina = Math.sin(theta);
        var cosa = Math.cos(theta);

        for (var i=0; i<vertices.length; i++) {
            var vertice = vertices[i];
            var y = vertice[1];
            var z = vertice[2];
            vertice[1] = y * cosa - z * sina;
            vertice[2] = z * cosa + y * sina;
        }
    };

    var rotateY = function(theta) {
        var sina = Math.sin(theta);
        var cosa = Math.cos(theta);

        for (var i=0; i<vertices.length; i++) {
            var vertice = vertices[i];
            var x = vertice[0];
            var z = vertice[2];
            vertice[0] = x * cosa - z * sina;
            vertice[2] = z * cosa + x * sina;
        }
    };

    var rotateZ = function(theta) {
        var sina = Math.sin(theta);
        var cosa = Math.cos(theta);

        for (var i=0; i<vertices.length; i++) {
            var vertice = vertices[i];
            var x = vertice[0];
            var y = vertice[1];
            vertice[0] = x * cosa - y * sina;
            vertice[1] = y * cosa + x * sina;
        }
    };
    rotateZ(60);
    rotateY(60);
    rotateZ(60);
    project();

    canvas.addEventListener("mousedown",function(event)
    {

        old = Date.now();
        x1 = event.clientX;
        y1 = event.clientY;
        down = true;
    },false);

   canvas.addEventListener("mousemove",function(event)
    {
        if(down){
            newt = Date.now();
            dt = newt - old;
            x2 = event.clientX;
            y2 = event.clientY;
            // console.log("x1:" + x1 +" y1:" + y1 + "x2:" + x2 + "y2:" + y2);
            rotateX((y2-y1)/1000);
            rotateY((x2-x1)/1000);
            project();
        }
    },false); 

    canvas.addEventListener("click",function(event)
    {
        if(down)
        {
            down = false;
        }
        if(up)
        {
            clearInterval(interval);
            interval = setInterval(stop, inter);
            up = false;
        }
    },false);


</script>
<body>

使用JS降低立方体的旋转速度

1 个答案: