Question

我想知道是否能够在Processing.js中围绕y轴旋转图像？我看到有一个rotateY（）方法，但是当我调用它时，它无法在draw（）方法中加载我的图像...是否有另一种方法来执行此操作（使用Processing.js，直接画布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();
}

希望有所帮助！

Answer 2

这篇文章描述了如何制作rotating billboard effect with css3。它包含了你想要的所有组成部分。

我尝试使用js处理图像旋转，看起来在3D模式下加载图像时可能会出现问题。您是否设法在此页面上进行任何演示：http://matrix.senecac.on.ca/~asalga/pjswebide/index.php

如果没有，您可能还没有在浏览器上使用webGL。

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

2 个答案: