Question

我正在处理一个我最近调试过的处理草图，它使用processing.js在Web上运行。它使用P3D渲染渲染3D地球，然后将点绘制到该地球。一切都在画布上显示但是在初始设置之后屏幕出现故障并且所有图像都将其宽度值默认为堆栈中的最后一个图像（地球图像）。如果图像是在设置中启动的，则它们会正确显示，但是在绘制循环中它们会发疯。如果我实例化noLoop（）;它们显示正确然而这使得地球也能够被动画化。我一直试图调试这一整天，但无法弄清楚发生了什么：请帮忙。你可以看到"working" file here看看我的意思。

/* @pjs preload="Title.png,img/dial.png,img/dialface.jpg,img/world32k.jpg"; */

PImage texmap;
PImage img;
PImage img2; 
PImage imgTitle;

int sDetail = 35;  // Sphere detail setting

float globeRadius = 250;
float pushBack = 0;

float[] cx, cz, sphereX, sphereY, sphereZ;


void setup() {

  size(1350, 800, P3D);  
  imageMode(CENTER);
  imgTitle = loadImage("Title.png");
  img = loadImage("img/dialface.jpg");
  img2 = loadImage("img/dial.png");
  texmap = loadImage("img/world32k.jpg");   


}

void draw() {    
  background(0); 
  noStroke();
  drawDial();
 renderGlobe();   

}
void renderGlobe() {
  pushMatrix();
  translate(429, 320, pushBack);
  textureMode(IMAGE);  
  texturedSphere(globeRadius, texmap);
  popMatrix();

}
        void drawDial(){    
      pushMatrix();
      image(img, 885, 487, 415, 313);
      image(imgTitle, 700, 50, 600, 200);
      translate(1064.5, 487, 1);
      image(img2,0, 0, 159, 200);
      noStroke();
      popMatrix();

    }




// Draw texture sphere
void texturedSphere(float r, PImage t) {
  int v1,v11,v2; 
  beginShape(TRIANGLE_STRIP);
  texture(t);
  float iu=(float)(t.width-1)/(sDetail);
  float iv=(float)(t.height-1)/(sDetail);
  float u=0,v=iv;
  for (int i = 0; i < sDetail; i++) {
    vertex(0, -r, 0,u,0);
    vertex(sphereX[i]*r, sphereY[i]*r, sphereZ[i]*r, u, v);
    u+=iu;
  }
  vertex(0, -r, 0,u,0);
  vertex(sphereX[0]*r, sphereY[0]*r, sphereZ[0]*r, u, v);
  endShape();   

  // Middle rings
  int voff = 0;
  for(int i = 2; i < sDetail; i++) {
    v1=v11=voff;
    voff += sDetail;
    v2=voff;
    u=0;
    beginShape(TRIANGLE_STRIP);
    texture(t);
    for (int j = 0; j < sDetail; j++) {
      vertex(sphereX[v1]*r, sphereY[v1]*r, sphereZ[v1++]*r, u, v);
      vertex(sphereX[v2]*r, sphereY[v2]*r, sphereZ[v2++]*r, u, v+iv);
      u+=iu;
    }

    // Close each ring
    v1=v11;
    v2=voff;
    vertex(sphereX[v1]*r, sphereY[v1]*r, sphereZ[v1]*r, u, v);
    vertex(sphereX[v2]*r, sphereY[v2]*r, sphereZ[v2]*r, u, v+iv);
    endShape();
    v+=iv;
  }
  u=0;

  // Add the northern cap
  beginShape(TRIANGLE_STRIP);
  texture(t);
  for (int i = 0; i < sDetail; i++) {
    v2 = voff + i;
    vertex(sphereX[v2]*r, sphereY[v2]*r, sphereZ[v2]*r, u, v);
    vertex(0, r, 0,u,v+iv);    
    u+=iu;
  }
  vertex(sphereX[voff]*r, sphereY[voff]*r, sphereZ[voff]*r, u, v);
  endShape();

}

Processing.js P3D图像大小默认为堆栈中的最后一个

0 个答案: