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

发布于 2024-10-16 07:06:18 字数 707 浏览 6 评论 0原文

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

本质上，我试图实现在此页面中实现的效果。

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

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

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

原文

I was wondering if one is able to rotate an image about the y-axis in Processing.js? I saw that there is a rotateY() method, but it fails to load my images in the draw() method when I call it...is there an alternative method to doing this (either using Processing.js, straight canvas APIs, or CSS3)?

Essentially, I am trying to achieve the effect achieved in this page.

Using the following code, my image fails to even render in my canvas element.

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

Also, I am not required to make this cross browser compatible - this is meant for a personal project.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

在巴黎塔顶看东京樱花 2024-10-23 07:06:18

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

希望有帮助！

As jonbro suggested, first make sure you have WebGL enabled: http://www.DoesMyBrowserSupportWebGL.com

Next, make sure your browser can read local files if your files are not on a server.
In Chrome, you need to start it with --allow-file-access-from-files
On Firefox, go to about:config and turn off security.fileuri.strict_origin_policy

I updated your sketch so the image rotates about the center, just like the demo:

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

Hope that helps!

回复收藏 0 原文