Photoglade.com

Сегодня запустили в интернет еще один проект с фотографиями цветов. Он называется PhotoGlade. Переводится как фотолужайка. Название придумала я :). Информации пока что немного, все на стадии наполнения и развития.

Изменение угла поворота камеры в Papervision

Рассмотрим пример изменения угла поворота камеры вслед за курсором мыши. За основу берем все тот же пример, с текстурой кошки, натянутой на примитив плоскости.

Первре отличие будет состоять уже в том, что пользоваться мы будем не Camera3D, а FreeCamera3D, котоая обладает нужными свойствами: rotationY и rotationX. Судя по названию, именно их изменение позволит реализовать поворот.

package
{
import flash.display.Sprite;
import flash.events.*;
import flash.filters.*;
import org.papervision3d.cameras.*;
import org.papervision3d.objects.*;
import org.papervision3d.materials.*;
import org.papervision3d.scenes.MovieScene3D;
import org.papervision3d.core.*;
import org.papervision3d.core.geom.*;

[SWF(width='400',height='400',backgroundColor='0x000000',frameRate='30')]

public class ExampleCamera extends Sprite
{
private var container: Sprite;
private var scene: MovieScene3D;
private var camera: FreeCamera3D;
private var plane:Plane;

private var mouseDown:Boolean;
private var mousePosition:Vertex3D;

public function ExampleCamera()
{
container = new Sprite;
container.x = 200;
container.y = 200;
addChild( container );

scene = new MovieScene3D( container );

camera = new FreeCamera3D();
camera.z = -500;
camera.zoom = 5;

var material:BitmapFileMaterial = new BitmapFileMaterial("texture.jpg");
plane = new Plane( material, 300, 300, 1, 1 );
scene.addChild( plane );
mouseDown = false;
mousePosition = new Vertex3D(0,0,0);
stage.addEventListener( MouseEvent.MOUSE_DOWN, mouseDownHandler );
stage.addEventListener( MouseEvent.MOUSE_UP, mouseUpHandler );
stage.addEventListener( MouseEvent.MOUSE_MOVE, mouseMoveHandler );
stage.addEventListener( Event.ENTER_FRAME, enterFrameHandler );
}

private function enterFrameHandler(event:Event):void
{
scene.renderCamera( camera );
}

private function mouseDownHandler(event:MouseEvent):void
{

mousePosition.x = event.stageX;
mousePosition.y = event.stageY;
mouseDown = true;
}

private function mouseUpHandler(event:MouseEvent):void
{
mouseDown = false;
}

private function mouseMoveHandler(event:MouseEvent):void
{
if( mouseDown )
{
camera.rotationY -= (mousePosition.x - event.stageX)*0.20;
camera.rotationX += (mousePosition.y - event.stageY)*0.20;
mousePosition.x = event.stageX;
mousePosition.y = event.stageY;
}
}

}

}
Принцип действия программы таков: по нажатию левой клавиши мыши засекается флаг mouseDown - сигнал начала поворота камеры. Если при нажатой клавише мыши происходит ее перемещение, то угол поворота камеры (rotationY и rotationX) меняется пропорционально тому, насколько был подвинут курсор.

Поиграемся с камерой

Для последующих опытов нам понадобится один из предыдущих примеров. А именно, пример с текстурой. Напомню, что в файле texture.jpg хранится изображение кота. И этот файл режит рядом с флешкой.

package
{
import flash.display.Sprite;
import flash.events.*;
import flash.utils.Timer;
import flash.filters.*;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.objects.*;
import org.papervision3d.materials.*;
import org.papervision3d.scenes.MovieScene3D;
import org.papervision3d.core.*;

[SWF(width='400',height='400',backgroundColor='0x000000',frameRate='30')]

public class ExampleTransformationRotate extends Sprite
{
private var container: Sprite;
private var scene: MovieScene3D;
private var camera: Camera3D;
private var plane:Plane;
private var myTimer:Timer = new Timer(10);

public function ExampleTransformationRotate()
{
container = new Sprite;
container.x = 200;
container.y = 200;
addChild( container );
scene = new MovieScene3D( container );
camera = new Camera3D();
camera.z = -500;
camera.zoom = 5;

var material:BitmapFileMaterial = new BitmapFileMaterial("texture.jpg");
plane = new Plane( material, 300, 300, 1, 1 );
container.filters = filter;
scene.addChild( plane );
myTimer.start();
myTimer.addEventListener(TimerEvent.TIMER, timerHandler);

}

private function timerHandler( ev:TimerEvent ): void
{
scene.renderCamera( camera );
}
}

}

После запуска сего примерчика мы вспомним, что в результате получается плоскость, на которую натянута текстура с кошачьей мордочкой. И поскольку по таймеру у нас вызывается функция, только рендерящая камеру, то плоскость к кошаком висит себе неподвижно.

Чтобы заставить камеру реагировать на перемещение мыши в последнюю функцию следует добавить метод hover, который и заменит нам приближение и повороты предмета вручную, как мы делали до этого.

private function timerHandler( ev:TimerEvent ): void
{
camera.hover(0, (200-mouseX)*.1, (200-mouseY)*.1);
scene.renderCamera( camera );
}
Попробуем разобраться, какие параметры принимает этот новый метод и как он работает. Начнем со второго, более простого вопроса. Метод hover перемещает камеру вокруг объекта, изменяя угол зрения. Перемещение может происходить (на сегодняшний день) двумя способами. Насколько я могу судить, в зависимости от первого параметра, переданного в метод. В частности, если передать 0, то камера будет совершать перемещение и по OZ тоже, тогда как в случае переданной 1 - только по OX и OY.
Два следующих параметра передают координаты точки обзора. В данном примере они находятся в зависимости от координат курсора.

Рекомендую попробовать изменить примитив на сферу или куб и посмотреть эффект.

Пока что из-за отутствия опыта я не могу судить, но мне кажется, что все же чаще придется изменять координаты камеры вручную (camera.y, camera.z, camera.x), нежели пользоваться рассмотренным методом. И тем не менее, о его существовании стоит знать.

Как быстро пролетели праздники! Но не всё коту Масленница, пора возвращаться к обычному жизненному ритму.

Хочу сказать, что за прошедшие дни была поплнена моя коллеция тюльпанов. Здесь можно найти фотографии нескольких новых сортов. Вот мои самые любимые: