Posté par Ocelyn le 15 septembre, 2009 |
Pas de commentaire
Créer une plane avec deux faces différentes est relativement simple.
Il suffit d’ajouter deux planes dans un même objets 3D, un DisplayObject3D (ligne 20), tout objets 3D (plane, cube, sphere…) dans Papervision3D ont été créé à partir de ce dernier.
Afin que nos deux planes ne se superposent pas, nous allons augmenter la distance en Z de notre planeFront (ligne 25), puis nous allons retourner la planeBack en rotationY (ligne 30) afin qu’elle soit visible, n’ayant pas activé la propriété doubleSided de la texture de notre planeBack.
A partir de là, il nous est facile de rendre un coté de la plane cliquable et non l’autre, d’ajouter deux différents types de textures à chaque face…
-
package {
-
import org.papervision3d.core.effects.view.ReflectionView;
-
import org.papervision3d.materials.ColorMaterial;
-
import org.papervision3d.objects.DisplayObject3D;
-
import org.papervision3d.objects.primitives.Plane;
-
-
import flash.events.Event;
-
import flash.filters.BlurFilter;
-
-
public class BasicScene extends ReflectionView {
-
-
public function BasicScene()
-
{
-
buildPlane();
-
configReflection();
-
}
-
-
private function buildPlane() : void
-
{
-
do3d = new DisplayObject3D();
-
-
var colorMaterialFront : ColorMaterial = new ColorMaterial(0xff00ff);
-
var planeFront : Plane = new Plane(colorMaterialFront, 50, 50, 4, 4);
-
do3d.addChild(planeFront);
-
planeFront.z = 1;
-
-
var colorMaterialBack : ColorMaterial = new ColorMaterial(0×00ff00);
-
var planeBack : Plane = new Plane(colorMaterialBack, 50, 50, 4, 4);
-
do3d.addChild(planeBack);
-
planeBack.rotationY = 180;
-
-
scene.addChild(do3d);
-
-
do3d.z = ( camera.zoom * camera.focus ) – Math.abs(camera.z);
-
-
startRendering();
-
}
-
-
private function configReflection() : void
-
{
-
viewportReflection.filters = [new BlurFilter(3,3,1)];
-
setReflectionColor(1, 1, 0.5);
-
surfaceHeight = -100;
-
}
-
-
override protected function onRenderTick(event:Event=null):void
-
{
-
do3d.rotationY ++;
-
super.onRenderTick(event);
-
}
-
-
private var do3d : DisplayObject3D;
-
}
-
}
Posté par Ocelyn le 14 septembre, 2009 |
1 commentaire
Avec la BasicView une autre classe est apparue la ReflectionView, cette classe vous permet en l’étendant, de créer rapidement une scène 3D (comme la BasicView) mais en lui rajoutant des propriétés permettant de créer un reflet pour vos objets.
Il faut tout d’abord, étendre notre classe avec la ReflectionView (ligne 9), puis configurer notre reflet.
La ReflectionView consiste à prendre l’image de la caméra qui rend la scène, puis la retourne pour lui donner un effet de miroir, vous avez donc la possibilité d’appliquer des effets à cette image grâce à la propriété viewportReflection (ligne 31), comme un Blur, un Glow… setReflectionColor (ligne 32) permet de changer du reflet, et surfaceHeight (ligne 33) comme son nom ne l’indique pas, permet de rapprocher ou d’éloigner le reflet de la scène 3D.
Enfin chose importante, pour afficher le reflet il faut absolument créer un EnterFrame (ligne 16) et lui ajouter un singleRender(); (ligne 40)
-
package {
-
import org.papervision3d.core.effects.view.ReflectionView;
-
import org.papervision3d.materials.ColorMaterial;
-
import org.papervision3d.objects.primitives.Plane;
-
-
import flash.events.Event;
-
import flash.filters.BlurFilter;
-
-
public class BasicScene extends ReflectionView {
-
-
public function BasicScene()
-
{
-
buildPlane();
-
configReflection();
-
-
addEventListener(Event.ENTER_FRAME, enterFrameHandler);
-
}
-
-
private function buildPlane() : void
-
{
-
var colorMaterial : ColorMaterial = new ColorMaterial(0xff00ff);
-
colorMaterial.doubleSided = true;
-
plane = new Plane(colorMaterial, 50, 50, 4, 4);
-
scene.addChild(plane);
-
-
plane.z = ( camera.zoom * camera.focus ) – Math.abs(camera.z);
-
}
-
-
private function configReflection() : void
-
{
-
viewportReflection.filters = [new BlurFilter(3,3,1)];
-
setReflectionColor(.5, .5, .5);
-
surfaceHeight = -100;
-
}
-
-
private function enterFrameHandler(event : Event) : void
-
{
-
plane.rotationX ++;
-
plane.rotationY ++;
-
singleRender();
-
}
-
-
private var plane : Plane;
-
}
-
}
Posté par Ocelyn le 11 septembre, 2009 |
18 commentaires
Très vite après avoir créé sa scene 3D avec la BasicView, on va vouloir en modifier les propriétés, modifier la caméra, accéder au rendu pour par exemple faire bouger des objets en EnterFrame…
On pourra modifier les propriétés de la scène 3D, tout simplement en les appelants, pour modifier le Viewport par exemple (ligne 12) viewport.interactive, viewport.alpha… pour la caméra (ligne 22) , camera.zoom, camera.z…
Si on veut accéder au rendu de la scène 3D il faudra overrider la fonction de rendu onRenderTick, c’est à dire écraser la fonction présente dans la BasicView pour pouvoir l’utiliser dans notre classe (ligne 27), du fait qu’on écrase la fonction, il ne faudra pas oublier de réécrire sa fonctionnalité de base : super.onRenderTick(event); (ligne 31).
-
package {
-
import org.papervision3d.materials.ColorMaterial;
-
import org.papervision3d.objects.primitives.Plane;
-
import org.papervision3d.view.BasicView;
-
-
import flash.events.Event;
-
-
public class BasicScene extends BasicView {
-
-
public function BasicScene()
-
{
-
viewport.interactive = true;
-
buildPlane();
-
}
-
-
private function buildPlane() : void
-
{
-
var colorMaterial : ColorMaterial = new ColorMaterial(0xff00ff);
-
plane = new Plane(colorMaterial, 50, 50, 4, 4);
-
scene.addChild(plane);
-
-
plane.z = ( camera.zoom * camera.focus ) – Math.abs(camera.z);
-
-
startRendering();
-
}
-
-
override protected function onRenderTick(event:Event=null):void
-
{
-
plane.rotationX ++;
-
plane.rotationY ++;
-
super.onRenderTick(event);
-
}
-
-
private var plane : Plane;
-
}
-
}
Posté par Ocelyn le 10 septembre, 2009 |
1 commentaire
L’affichage des objets 3D à leur vrai taille peu s’avérer compliqué si on ne connais pas la formule magique.
Pour les planes (ligne 19) il suffit de mettre la position Z égale à ( camera.zoom * camera.focus ) – Math.abs (camera.z), on remarquera qu’on peu accéder à la caméra en BasicView sans avoir à la définir dans une variable.
Pour un cube la formule sera : ( camera.zoom * camera.focus ) – ( Math.abs (camera.z) – « cube.depth » / 2 ), « cube.depth » correspond à la profondeur du cube (quand vous créez un nouveau cube c’est la 3ème propriétés), vous ne pouvez pas y accéder directement, il faudra donc la stocker dans une variable pour l’utiliser par exemple.
-
package {
-
import org.papervision3d.materials.ColorMaterial;
-
import org.papervision3d.objects.primitives.Plane;
-
import org.papervision3d.view.BasicView;
-
-
public class BasicScene extends BasicView {
-
-
public function BasicScene()
-
{
-
buildPlane();
-
}
-
-
private function buildPlane() : void
-
{
-
var colorMaterial : ColorMaterial = new ColorMaterial(0xff00ff);
-
var plane : Plane = new Plane(colorMaterial, 50, 50, 4, 4);
-
scene.addChild(plane);
-
-
plane.z = ( camera.zoom * camera.focus ) – Math.abs (camera.z);
-
-
startRendering();
-
}
-
}
-
}
Posté par Ocelyn le 9 septembre, 2009 |
Pas de commentaire
Les dernières versions de Papervision3D, apportent une nouveautés intéressantes la possibilité d’appliquer des filtres sur certains des objets 3D.
En passant la propriété useOwnContainer (ligne 21) à true, on active la possibilité d’appliquer des filtres ou de la transparence à votre plane.
On à par exemple la possibilité de mettre un effet de Glow (ligne 22), de Flou (ligne 23), une ombre 2D (ligne 24), pour un alpha on fera tout simplement plane.alpha = 0.5 par exemple.
Attention, certains des ces effets peuvent prendre énormément de mémoire en particulier si on a un nombre important de plane.
-
package {
-
import org.papervision3d.materials.ColorMaterial;
-
import org.papervision3d.objects.primitives.Plane;
-
import org.papervision3d.view.BasicView;
-
-
import flash.filters.DropShadowFilter;
-
-
public class BasicScene extends BasicView {
-
-
public function BasicScene()
-
{
-
buildPlane();
-
}
-
-
private function buildPlane() : void
-
{
-
var colorMaterial : ColorMaterial = new ColorMaterial(0xff00ff);
-
var plane : Plane = new Plane(colorMaterial, 220, 120, 4, 4);
-
scene.addChild(plane);
-
-
plane.useOwnContainer = true;
-
//plane.filters = [new GlowFilter(0xff0000, 1, 6, 6, 4)];
-
//plane.filters = [new BlurFilter(8, 8, 1)];
-
plane.filters = [new DropShadowFilter(4,45, 0×000000, 1)];
-
-
startRendering();
-
}
-
}
-
}