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

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

0 голосов
/ 07 февраля 2011

Мне было интересно, можно ли поворачивать изображение вокруг оси y в Processing.js? Я видел, что есть метод rotateY (), но он не загружает мои изображения в методе draw (), когда я его вызываю ... есть ли альтернативный метод для этого (либо с помощью Processing.js, API-интерфейсов прямого холста или CSS3)?

По сути, я пытаюсь добиться эффекта , достигнутого на этой странице .

Используя следующий код, мое изображение даже не отображается в элементе 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);
}

Кроме того, я не обязан делать этот кросс-браузер совместимым - это предназначено для личного проекта.

Ответы [ 2 ]

2 голосов
/ 13 сентября 2012

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

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

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

1 голос
/ 08 февраля 2011

В этом посте описывается, как сделать вращающийся рекламный щит с помощью css3 . В нем есть все составные части того, что вы хотите.

Я попытался заставить ваше изображение вращаться, работая с обработкой js, и кажется, что может быть проблема с загрузкой изображений в режиме 3d. Удалось ли вам заставить какие-либо демоверсии на этой странице работать: http://matrix.senecac.on.ca/~asalga/pjswebide/index.php

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

...