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

我正在制作一个处理草图，我最近调试过它，用processing.js在web上运行。它使用P3D渲染渲染三维球体，然后将点打印到该球体。所有内容都显示在画布上，但在初始设置后，屏幕会出现小故障，所有图像的宽度值默认为堆栈中的最后一个图像-全局图像。如果在设置中启动图像，它们将正确显示，但是在绘制循环中，它们会发疯。如果我实例化noLoop；它们显示正确，但这会阻止地球仪也能够设置动画。我一整天都在试着调试这个，但不知道是怎么回事：请帮忙。你可以看看我的意思

/* @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();

}

---

使用大量代码进行调试非常困难。缩小您认为问题所在的范围。@Cfreak好的，我已简化了代码以说明问题所在。球体渲染很好，因此我删除了该部分，但一旦我将图像映射到球体，它将调整img、imgTitle、img2的大小。当页面加载时，您可以简单地看到它们应该是什么大小，但当绘图循环所有图像时，似乎所有图像都默认为球体的宽度。我在尝试调整图像大小时也遇到了同样的问题，但当我将.png重新保存到我想要的尺寸时，我希望一切都合适；一旦我将纹理贴图添加到球体上，它就会再次断裂，因为它不是方形图像，我无法指定宽度。如果您在firefox或chrome中单击上面的链接并刷新页面几次，您将看到右侧的两个图像加载并调整大小您可以以当前形式上载文件吗…也就是说，带有所有压缩数据的.pde或其他东西，以便我可以在我的计算机上运行它。我想这可能与pushMatrix和popMatrix有关，但我想确定一下，好吗