javascript - 在Processing.JS 中，如何绕 y 轴旋转图像？

Question

我想知道是否能够在Processing.js 中绕y 轴旋转图像？我看到有一个rotateY()方法，但是当我调用它时，它无法在draw()方法中加载我的图像...是否有其他方法可以执行此操作(使用Processing.js、直接 Canvas API，或CSS3)？

本质上，我正在努力达到效果achieved in this page .

使用以下代码，我的图像甚至无法在 Canvas 元素中渲染。

/* @pjs preload="img/batman.jpg"; */

PImage[] images = new PImage[1];  

void setup()
{
    size(600,400,P3D); //The rotateY docs require that P3D or OPENGL be defined here
    background(125);
    fill(255);
    images[0] = loadImage("img/batman.jpg");
}

void draw(){  
    background(204);

    rotateY(PI/3.0);    
    image(images[0],300, 200);
}

此外，我不需要使这个跨浏览器兼容 - 这是针对个人项目的。

Answer 1

正如 jonbro 建议的那样，首先确保您已启用 WebGL:http://www.DoesMyBrowserSupportWebGL.com

接下来，如果您的文件不在服务器上，请确保您的浏览器可以读取本地文件。在 Chrome 中，您需要使用 --allow-file-access-from-files 启动它在 Firefox 上，转到 about:config 并关闭 security.fileuri.strict_origin_policy

我更新了您的草图，使图像围绕中心旋转，就像演示一样:

/* @pjs preload="img/batman.jpg"; */

PImage[] images = new PImage[1];
void setup()
{
    size(600,400,P3D);
    images[0] = loadImage("img/batman.jpg");
}

void draw(){
    background(204);

    pushMatrix();
    // Move the coordinate system to the center of the screen
    translate(width/2.0, height/2.0);
    // Rotate the coordinate system a bit more each frame
    rotateY(frameCount/1000.0);    
    // Draw the image in the center
    image(images[0],-images[0].width/2.0, -images[0].height/2.0);
    popMatrix();
}

希望有帮助!