关于画布3D一次旋转两种风格

时间:2017-09-04 11:12:54

标签: javascript canvas 3d rotation

我想制作一个旋转三维的天空,然后通过两个样式旋转3D画布。首先,围绕Z轴旋转。然后,addEventListener,这样我就可以改变3D透视。这就是我所做的:

首先,围绕Z轴旋转:

for (var i = stars.length - 1; i >= 0; i--) {
stars[i].x = Math.sin(stars[i].timePassed) * stars[i].radius;
stars[i].y = Math.cos(stars[i].timePassed) * stars[i].radius;
stars[i].timePassed+=speed; }

然后是addEventListener,所以它可以像3D一样旋转:

var cos = Math.cos(angleY);
var sin = Math.sin(angleY);

for (var i = stars.length - 1; i >= 0; i--) {    
  var x1 = stars[i].x * cos-stars[i].z*sin;
  var z1 = stars[i].z * cos+stars[i].x*sin;
  stars[i].x = x1;
  stars[i].z = z1;

  var scale=falllength/(falllength+stars[i].z)-0.5;
  ctx.drawImage(canvas2, stars[i].x+w/2, stars[i].y+h/2, 20*scale, 20*scale);}

但它并不像预期的那样,它可以旋转2种风格但不像3D。星星像一张纸,它是扁平的,没有厚度。所以谁能告诉我这是什么问题?我会非常感激不尽。谢谢。 这里还有其他代码:

function innit(){
  for(var i=0;i<maxstar;i++){
  var radiusx=(Math.random()+1)*3*100;//450-900
  var radiusy=(Math.random()+1)*3*50;//210-420
  var b;
  var b = Math.random()*2*Math.PI;
  var x1 = radiusy * Math.cos(b);
  var y1 = radiusy * Math.sin(b);
  var z1 = (Math.random()*2-1)*100;
  var t = new star(radiusy , b , x1 , y1 , z1);
  stars.push(t);}} 

0 个答案:

没有答案