Archive for the ‘Papervision3D’ Category
ActionScript 3.0: a MovieMaterial Cube using Papervision3D, part 3
yes, moving on.
first I made a Cube with sides made of pictures loaded dynamically.
secondly, I made the rotation of the Cube dynamic too.
now my task is to make every side of the Cube interactive, so they react to clicking.
so I made 6 different ringtones for an iPhone from Garageband and when clicking each of the sides of the Cube, a certain ringtone would be downloaded.
i. e. clicking the side of the Cube that has a Jazzy style ringtone-image will download a jazzy .m4r ringtone to your computer/iPhone/whatever.
check out the new interactive Cube here
heres the code for this interactive MovieMaterial Cube:
import caurina.transitions.Tweener;
import flash.display.Loader;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.navigateToURL;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.media.Sound;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.MovieMaterial;
import org.papervision3d.materials.WireframeMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.objects.primitives.Cube;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
public class MovieMaterialCube3 extends Sprite{
private var _viewport:Viewport3D;
private var _scene:Scene3D;
private var _camera:Camera3D;
private var _renderer:BasicRenderEngine;
private var _imgLoader:Loader;
private var _imgArray:Array = ["Breakbeat.jpg", "Gipsy.jpg", "RnB.jpg", "Jazzy.jpg", "Rockabilly.jpg", "Country.jpg"];
private var _linkArray:Array = ["Breakbeat.m4r", "Carousel.m4r", "Gleaming.m4r", "MidniteDialog.m4r", "Roadtrip.m4r", "TennesseeTwister.m4r"];
private var _numLoadedItems:Number = 0;
private var _faces:Array = [];
private var _cube:Cube;
public function MovieMaterialCube3(){
initPapervision3D();
loadExternalImage();
}
private function initPapervision3D():void{
_viewport = new Viewport3D(0, 0, true, true);
_viewport.buttonMode = true;
addChild(_viewport);
_scene = new Scene3D();
_camera = new Camera3D();
_renderer = new BasicRenderEngine();
}
private function loadExternalImage():void {
_imgLoader = new Loader();
_imgLoader.load(new URLRequest(_imgArray[_numLoadedItems]));
_imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded);
}
private function imgLoaded(e:Event):void {
var loadedPic:MovieClip = new MovieClip();
loadedPic.name = "face"+_numLoadedItems;
loadedPic._theURL = _linkArray[_numLoadedItems];
loadedPic.addEventListener(MouseEvent.CLICK, faceClicked);
loadedPic.addChild(e.target.content);
var _face:MovieMaterial = new MovieMaterial(loadedPic);
_face.interactive = true;
_face.smooth = true;
_faces.push(_face);
_numLoadedItems++;
if(_numLoadedItems == 6){
createCube();
} else {
loadExternalImage();
}
}
private function createCube():void {
var m:MaterialsList = new MaterialsList();
m.addMaterial(_faces[2], "right");
m.addMaterial(_faces[0], "left");
m.addMaterial(_faces[1], "front");
m.addMaterial(_faces[3], "back");
m.addMaterial(_faces[4], "top");
m.addMaterial(_faces[5], "bottom");
//width, depth, height
var w:Number = 500;
var d:Number = 500;
var h:Number = 500;
//segments S, T, and H
var sS:int = 9; //segmentS - Number of segments sagitally (plane perpendicular to width). Defaults to 1.
var sT:int = 9; //segmentsT - Number of segments transversally (plane perpendicular to depth). Defaults to segmentsS.
var sH:int = 9; //segmentsH - Number of segments horizontally (plane perpendicular to height). Defaults to segmentsS.
_cube = new Cube(m, w, d, h, sS, sT, sH);
_scene.addChild(_cube);
beginRender();
}
private function faceClicked(e:Event):void {
var url:String = e.target._theURL;
var urlrequest:URLRequest = new URLRequest(url);
navigateToURL(urlrequest);
}
private function beginRender():void{
addEventListener(Event.ENTER_FRAME, render);
}
private function render(e:Event):void {
var xDist:Number = mouseX - stage.stageWidth * 0.5;
var yDist:Number = mouseY - stage.stageHeight * 0.5;
if(xDist > 100){
xDist = 100;
}
if(yDist > 100){
yDist = 100;
}
if(xDist < -100){
xDist = -100;
}
if(yDist < -100){
yDist = -100;
}
_cube.rotationY += yDist * 0.02;
_cube.rotationX += xDist * 0.02;
_renderer.renderScene(_scene, _camera, _viewport);
}
}
}
ActionScript 3.0: a MovieMaterial Cube using Papervision3D, part 2
recently, I made this MovieMaterial Cube, but I wanted to make it somewhat more interactive.
first of all I wanted the Cube to spin depending on where the user placed his mouse.
so instead of this hardcoded rotation:
cube.rotationY += 2;
cube.rotationX += .1;
renderer.renderScene(scene, camera, viewport);
}
I decided on this setup:
var xDist:Number = mouseX - stage.stageWidth * 0.5;
var yDist:Number = mouseY - stage.stageHeight * 0.5;
if(xDist > 100){
xDist = 100;
}
if(yDist > 100){
yDist = 100;
}
if(xDist < -100){
xDist = -100;
}
if(yDist < -100){
yDist = -100;
}
cube.rotationY += yDist * 0.02;
cube.rotationX += xDist * 0.02;
_renderer.renderScene(_scene, _camera, _viewport);
}
this rotates the Cube on the x- and y-axis depending on the distance from the center of the Cube to the mouse.
I’ve even added a “speed limitation” within the code, making sure that the Cube will not spin around faster than I like it to.
spin the new interactive Cube here
hope you like it, guess I’ll do at least one more post on this MovieMaterial Cube soon.
ActionScript 3.0: a MovieMaterial Cube using Papervision3D
having made both WireFrame and ColorMaterial Cubes using Papervision3D, I thought I’d do a Cube with sides made of images loaded onto it.
the trick is to load the image using a Loader, make a MovieClip of the loaded content, and finally make the MovieMaterial of the MovieClip.
in short, here’s how it works:
_imgLoader = new Loader();
_imgLoader.load(new URLRequest(someImage.jpg));
//when the picture is loaded
var loadedPic:MovieClip = new MovieClip();
loadedPic.addChild(e.target.content);
//make the MovieMaterial
var _face:MovieMaterial = new MovieMaterial(loadedPic);
//add the MovieMaterial to the MaterialsList
var m:MaterialsList = new MaterialsList();
m.addMaterial(_face, "right");
notice, this is just an example, if you want the full, proper code, check the code pasted below!
here’s what my MovieMaterial Cube looks like:
http://campjohn.dk/AS3/Papervision3D/MovieMaterialCube/
here’s the full code for the Cube:
import flash.display.Loader;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.MovieMaterial;
import org.papervision3d.materials.WireframeMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.objects.primitives.Cube;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.scenes. * ;
import org.papervision3d.cameras. * ;
import org.papervision3d.objects. * ;
import org.papervision3d.objects.special. * ;
import org.papervision3d.objects.primitives. * ;
import org.papervision3d.materials. * ;
import org.papervision3d.materials.special. * ;
import org.papervision3d.materials.utils. * ;
import org.papervision3d.render. * ;
import org.papervision3d.view. * ;
import org.papervision3d.events. * ;
public class BitmapmaterialCube extends Sprite {
private var viewport:Viewport3D;
private var scene:Scene3D;
private var camera:Camera3D;
private var renderer:BasicRenderEngine;
private var _imgLoader:Loader;
private var _imgArray:Array = ["cubeMaterial01.jpg", "cubeMaterial02.jpg", "cubeMaterial03.jpg", "cubeMaterial04.jpg", "cubeMaterial05.jpg", "cubeMaterial06.jpg"];
private var _numLoadedItems:Number = 0;
private var _faces:Array = [];
private var cube:Cube;
public function BitmapmaterialCube(){
initPapervision3D();
loadExternalImage();
beginRender();
}
private function initPapervision3D():void{
viewport = new Viewport3D();
addChild(viewport);
scene = new Scene3D();
camera = new Camera3D();
renderer = new BasicRenderEngine();
}
private function loadExternalImage():void {
var i:Number = 0;
while(i < 6){
_imgLoader = new Loader();
_imgLoader.load(new URLRequest(_imgArray[i]));
_imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded);
i++;
}
}
private function imgLoaded(e:Event):void {
var loadedPic:MovieClip = new MovieClip();
loadedPic.addChild(e.target.content);
var _face:MovieMaterial = new MovieMaterial(loadedPic);
_faces.push(_face);
_numLoadedItems++;
if(_numLoadedItems == 6){
createCube();
}
}
private function createCube():void {
var m:MaterialsList = new MaterialsList();
m.addMaterial(_faces[4], "right");
m.addMaterial(_faces[1], "left");
m.addMaterial(_faces[2], "front");
m.addMaterial(_faces[3], "back");
m.addMaterial(_faces[0], "top");
m.addMaterial(_faces[5], "bottom");
//width, depth, height
var w:Number = 500;
var d:Number = 500;
var h:Number = 500;
//segments S, T, and H
var sS:int = 3; //segmentS - Number of segments sagitally (plane perpendicular to width). Defaults to 1.
var sT:int = 3; //segmentsT - Number of segments transversally (plane perpendicular to depth). Defaults to segmentsS.
var sH:int = 3; //segmentsH - Number of segments horizontally (plane perpendicular to height). Defaults to segmentsS.
cube = new Cube(m, w, d, h, sS, sT, sH);
scene.addChild(cube);
}
private function beginRender():void{
addEventListener(Event.ENTER_FRAME, render);
}
private function render(e:Event):void{
cube.rotationY += 2;
cube.rotationX += .2;
renderer.renderScene(scene, camera, viewport);
}
}
}
ActionScript 3.0: a ColorMaterial Cube using Papervision3D
still messing with Papervision3D.
recently I made a WireframeMaterial Cube, and this time, I thought I’d try making a Cube using ColorMaterial instead.
so here’s a Cube in all red, made with ActionScript 3.0 and Papervision3D:
and here’s a Cube in colors of a random Kuler theme, made with ActionScript 3.0 and Papervision3D:
here’s the code for the Kuler theme colored Cube:
import flash.display.Sprite;
import flash.events.Event;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.WireframeMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.objects.primitives.Cube;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
public class ColorMaterialCube2 extends Sprite {
private var viewport:Viewport3D;
private var scene:Scene3D;
private var camera:Camera3D;
private var renderer:BasicRenderEngine;
private var cube:Cube;
public function ColorMaterialCube2(){
initPapervision3D();
createCube();
beginRender();
}
private function initPapervision3D():void{
viewport = new Viewport3D();
addChild(viewport);
scene = new Scene3D();
camera = new Camera3D();
renderer = new BasicRenderEngine();
}
private function createCube():void {
var cm01:ColorMaterial = new ColorMaterial(0x20505C);
var cm02:ColorMaterial = new ColorMaterial(0x23418F);
var cm03:ColorMaterial = new ColorMaterial(0x919FC2);
var cm04:ColorMaterial = new ColorMaterial(0x694C3F);
var cm05:ColorMaterial = new ColorMaterial(0x8F3523);
var cm06:ColorMaterial = new ColorMaterial(0x4E9C67);
var m:MaterialsList = new MaterialsList();
m.addMaterial(cm01, "right");
m.addMaterial(cm02, "left");
m.addMaterial(cm03, "front");
m.addMaterial(cm04, "back");
m.addMaterial(cm05, "top");
m.addMaterial(cm06, "bottom");
//width, depth, height
var w:Number = 500;
var d:Number = 500;
var h:Number = 500;
//segments S, T, and H
var sS:int = 3; //segmentS - Number of segments sagitally (plane perpendicular to width). Defaults to 1.
var sT:int = 3; //segmentsT - Number of segments transversally (plane perpendicular to depth). Defaults to segmentsS.
var sH:int = 3; //segmentsH - Number of segments horizontally (plane perpendicular to height). Defaults to segmentsS.
cube = new Cube(m, w, d, h, sS, sT, sH);
scene.addChild(cube);
}
private function beginRender():void{
addEventListener(Event.ENTER_FRAME, render);
}
private function render(e:Event):void{
cube.rotationY += 2;
cube.rotationX += .2;
renderer.renderScene(scene, camera, viewport);
}
}
}
as in my all red example, you can define a single Colormaterial, and use it all over your Cube. if using the code above, you’d have to delete these lines:
var cm02:ColorMaterial = new ColorMaterial(0x23418F);
var cm03:ColorMaterial = new ColorMaterial(0x919FC2);
var cm04:ColorMaterial = new ColorMaterial(0x694C3F);
var cm05:ColorMaterial = new ColorMaterial(0x8F3523);
var cm06:ColorMaterial = new ColorMaterial(0x4E9C67);
var m:MaterialsList = new MaterialsList();
m.addMaterial(cm01, "right");
m.addMaterial(cm02, "left");
m.addMaterial(cm03, "front");
m.addMaterial(cm04, "back");
m.addMaterial(cm05, "top");
m.addMaterial(cm06, "bottom");
and add this instead:
var m:MaterialsList = new MaterialsList();
m.addMaterial(allM, "all");
ActionScript 3.0: a WireframeMaterial Cube using Papervision3D
so, still waiting for proper FIVe3D documentation, I decided to take a closer look at Papervision3D.
actually, it looks quite interesting.
so, I started up very lowtech and did this spinning cube
here’s the code for it:
import flash.display.Sprite;
import flash.events.Event;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.WireframeMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.objects.primitives.Cube;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
public class WireframeCube extends Sprite {
private var viewport:Viewport3D;
private var scene:Scene3D;
private var camera:Camera3D;
private var renderer:BasicRenderEngine;
private var cube:Cube;
public function WireframeCube(){
initPapervision3D();
createCube();
beginRender();
}
private function initPapervision3D():void{
viewport = new Viewport3D();
addChild(viewport);
scene = new Scene3D();
camera = new Camera3D();
renderer = new BasicRenderEngine();
}
private function createCube():void{
var allM:WireframeMaterial = new WireframeMaterial();
var m:MaterialsList = new MaterialsList();
m.addMaterial(allM, "all");
//width, depth, height
var w:Number = 500;
var d:Number = 500;
var h:Number = 500;
//segments S, T, and H
var sS:int = 3; //segmentS - Number of segments sagitally (plane perpendicular to width). Defaults to 1.
var sT:int = 3; //segmentsT - Number of segments transversally (plane perpendicular to depth). Defaults to segmentsS.
var sH:int = 3; //segmentsH - Number of segments horizontally (plane perpendicular to height). Defaults to segmentsS.
cube = new Cube(m, w, d, h, sS, sT, sH);
scene.addChild(cube);
}
private function beginRender():void{
addEventListener(Event.ENTER_FRAME, render);
}
private function render(e:Event):void{
cube.rotationY += 2;
renderer.renderScene(scene, camera, viewport);
}
}
}
showcase: Alex Hulgaard, Snejbjerg El, 3D product carrousel
Alex Hulgaard and I made a bet in 2006, and this bet has now been made into a small flash:
check out the bet made between Alex Hulgaard and Felix Sanchez here
this flash is kinda hard on your cpu, so it might only work properly on faster machines
—–
full, simple website for Aksel Sixhøj and Snejbjerg El – check out the lightning replacing the menu at times :O) – crazy gimmick!
check out the Snejbjerg El website here
—–
product carousel, a worn out webthing?
perhaps, but with 3D and papervision it has had a small rennassaince..
check out a version here, it’s simple but works properly.
- it shows 10 pictures.
- the picture in front is clickable, and can made bigger.
- when big and clicked, the picture will return to normal size..
- it can be turned both right and left.
- is the front picture made big and the carousel turned the big picture automatically returns to normal size
check out the product carousel in Papervision 3D here:
the photos for the product carousel are taken by Zoli Plosz, Romania and Asif Akbar, India.
thanks for the photos, guys!