在Processing.JS中，如何繞y軸旋轉圖像？

我想知道是否能夠在Processing.js中旋轉關於y軸的圖像？我看到有一個rotateY（）方法，但是當我調用它時，它無法將我的圖像加載到draw（）方法中......是否有另一種方法來執行此操作（使用Processing.js，直接畫布API，或CSS3）？在Processing.JS中，如何繞y軸旋轉圖像？

本質上，我試圖達到效果achieved in this page。

使用下面的代碼，我的圖像甚至無法在我的畫布元素中呈現。

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

此外，我不需要使這個跨瀏覽器兼容 - 這是爲了個人項目。

來源

2011-02-06 linusthe3rd

本文介紹如何製作rotating billboard effect with css3。它有你想要的所有組成部分。

我試圖讓你的圖像旋轉工作與處理js，似乎有可能是一個問題，在3D模式下加載圖像。您是否設法在此頁面上獲得任何演示：http://matrix.senecac.on.ca/~asalga/pjswebide/index.php

如果您沒有，您可能還沒有在您的瀏覽器上使用webGL。

來源

2011-02-08 16:14:04 jonbro

我有同樣的問題，正在運行Chrome。接受你的答案，因爲CSS3工作得很好。謝謝一堆！ – linusthe3rd 2011-02-08 19:13:01

由於jonbro建議，首先要確保您已啓用的WebGL：http://www.DoesMyBrowserSupportWebGL.com

接下來，確保你的瀏覽器可以讀取本地文件，如果你的文件不在服務器上。在Chrome中，您需要使用--allow-文件訪問從檔案在Firefox，去約啓動：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(); 
}

希望幫助！

來源

2012-09-13 13:33:52 Andor

在Processing.JS中，如何繞y軸旋轉圖像？

回答

相關問題