SVG 文件在 P3D 中不起作用（处理中）

Question

我正在使用 P3D 创建 3D 草图，并尝试在其上放置一些由 .svg 图像组成的 GUI。

PShape s;

setup() {
    size(600, 600, P3D);
    s = loadShape("foo.svg"); //place any svg file here
}

draw() {
    background(0);
    shape(s, 0, 0, 100, 100);
}

基本上会显示“foo.svg”，但图像中有一堆随机错误（奇怪的线条、零件错位等）。这不是下面的 3D 模型的问题，只是 P3D 不允许您正确显示 .svg 图像。有人知道解决方法吗？

PS（我尝试使用几何，但仍然遇到完全相同的问题）

Answer 1

您可以使用 pushMatrix(); 和 popMatrix() 隔离两个坐标空间（3D 然后是“2D”）；

这是 LoadDisplaySVG 示例的修改版本：

PShape bot;

void setup() {
  size(640, 360,P3D);
  bot = loadShape("bot1.svg");
} 

void draw(){
  background(102);
  pushMatrix();//3D
    translate(width * .5,height *.5,-150);
    rotateX(map(mouseX,0,width,-PI,PI));
    rotateY(map(mouseY,0,height,PI,-PI));
    box(150);
  popMatrix();
  pushMatrix();//2D
    shape(bot, 110, 90, 100, 100);  // Draw at coordinate (110, 90) at size 100 x 100
    shape(bot, 280, 40);            // Draw at coordinate (280, 40) at the default size
  popMatrix();
}

我对调用进行了缩进，以便更容易发现坐标系是如何隔离的。 在幕后，基本的矩阵乘法部分已为您完成。 只需将 push/pop 矩阵调用视为创建层次结构/树状结构，就像在 3D 编辑器中一样 来组织您的 3D 场景。

更新

根据评论，仔细观察后，P3D 渲染形状的效果不如 2D 渲染器。

另一种选择是使用PGraphics 作为 2D 缓冲区进行渲染，然后将其显示为 3D 场景中的图像：

PShape bot;
PImage botimg;
void setup() {
  size(640, 360,P3D);
  bot = loadShape("bot1.svg");
  //2D buffer -> pixels
  PGraphics p = createGraphics(width,height);
  p.beginDraw();
  p.background(0,0);//transparent bg
  p.shape(bot,0,0,bot.width,bot.height);
  p.endDraw();
  //botimg = p;//PGraphics extends PImage so this works or use p.get() to get only pixels cloned 
  botimg = p.get(0,0,ceil(bot.width)+1,ceil(bot.height)+1);//a few extra pixels so we don't clip the image
} 

void draw(){
  if(botimg == null){

  }
  background(102);
  pushMatrix();//3D
    translate(width * .5,height *.5,-150);
    rotateX(map(mouseX,0,width,-PI,PI));
    rotateY(map(mouseY,0,height,PI,-PI));
    box(150);
  popMatrix();
  pushMatrix();//2D
    //shape(bot, 110, 90, 100, 100);  // Draw at coordinate (110, 90) at size 100 x 100
    //shape(bot, 280, 40);            // Draw at coordinate (280, 40) at the default size
    image(botimg,280,40,botimg.width,botimg.height);
  popMatrix();
}

P3D 渲染器在后台生成一个四边形并在您调用 image. 使用 svg 的像素表示可以获得更好的结果，但它也不再可扩展：

还要注意立方体上的 3d 笔画受到纹理透明度影响的小故障。