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();
}

我缩进了调用，以便更容易发现坐标系是如何隔离的。 在幕后，细节矩阵乘法部分为您完成。 简单地将推/弹矩阵调用视为创建类似于层次结构/树状结构的结构，就像在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渲染器生成四边形并在调用图像时将其纹理化。 使用svg的像素表示可以获得更好的结果，但它也不再具有可伸缩性：

另请注意，立方体上的3D笔划会受到纹理透明度的影响。