Processing.JSでは、y軸についてイメージを回転させるにはどうすればよいですか？

Question

Processing.jsのy軸についてイメージを回転できるかどうか疑問に思っていましたか？ rotateY（）メソッドがあるのを見ましたが、私はそれを呼び出すとdraw（）メソッドでイメージをロードすることができません。これを行う代わりに、Processing.js、ストレートキャンバスAPI、またはCSS3）？

本質的に、私は効果を達成しようとしています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); 
} 

また、このクロスブラウザとの互換性は必要ありません。これは個人的なプロジェクトのためのものです。

Answer 1

この投稿は、rotating billboard effect with css3の作成方法を説明しています。それはあなたが望むもののすべてのコンポーネントの部分を持っています。

jsを処理してイメージの回転を取得する際に苦労しました.3Dモードでイメージを読み込む際に問題があるようです。このページのデモを入手できましたか？http://matrix.senecac.on.ca/~asalga/pjswebide/index.php

まだブラウザで動作していない可能性があります。

Answer 2

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

希望に役立ちます。