В Processing.JS, как можно вращать изображение вокруг оси y?

Question

Мне было интересно, можно ли повернуть изображение относительно оси y в Processing.js? Я видел, что есть метод 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

Если вы этого не сделали, у вас может не работать webGL в вашем браузере.

Answer 2

Как предложил jonbro, сначала убедитесь, что вы включили WebGL: http://www.DoesMyBrowserSupportWebGL.com

Далее, убедитесь, что ваш браузер может читать локальные файлы, если ваши файлы не на сервере. В Chrome, вам нужно запустить его с --allow-доступ к файлам, из-файлов На Firefox, перейдите к о: конфигурации и отключить 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(); 
} 

Надеюсь, что это поможет!