Question

我使用html5画布创建一个简单的3d多边形程序。程序允许更改每个轴的旋转 - x，y，z。在改变x / y / z角度的事件上，完成对绘图功能的相应调用。问题是每次我对绘图函数进行新调用时它会清除旧位置，结果就是跳转。基本上每个函数都可以自己运行，但它们不能一起工作。

示例代码：

var Perspective = function(rotate){
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//clear
...
switch(rotate){
case "x" : {
var transform = Mat3.rotationX(Math.radians(rotateX.getValue())); //rotation x
break;
}
case "y" : {
var transform = Mat3.rotationY(Math.radians(rotateY.getValue())); //rotation y
break;
}
case "z" : {
var transform = Mat3.rotationZ(Math.radians(rotateZ.getValue())); //rotation Z
}
...
draw(...settings..)
}

为每个滑块更改事件设置一个侦听器（也适用于Y和Z）。 AngleX调用Perspective，传递字符串＆＃34; x＆＃34;作为旋转参数。

var angleX = $('#AngleX').slider()
            .on('slide change', AngleX)
            .data('slider');

如果不同的轴更具动态，我该如何进行更改？

Answer 1

无论如何我解决了它，谢谢你QBM5 ..开关盒是一个错误，我不得不将所有轴变换矩阵乘以这样：

 var transform = Mat3.rotationX(-Math.radians(rotateY.getValue())) .multiply(Mat3.rotationY(Math.radians(rotateX.getValue())));

画布绘制 - 更改旋转轴而不清除旧状态

1 个答案: