Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

gdav · 11-01-2009, 19:33

Hy,

ich bin noch recht neu bei Papervision3D und verzweifel im Moment etwas.
Ich bau grade an einer kleinen Virtuellengalerie wo man Räume betreten kann.

Die Räume wurden soweit schon als Texturen gerendert.

Nun Verwende ich einen Cube mit doublesided Texturen und befinde mich im Cube ... wie bei sowas üblich.

Nun möchte ich aber z.B. eine Tür (Button) clickbar machen und finde einfach keinen Ansatz ...

Jegliches experimentieren mit dem Great White Release (2.0) und MovieAssetMaterials mit interactive true erwies sich bisher als Sackgasse.

Kennt jemand vielleicht ein gutes Beispiel mit Code das er mir posten kann?
Also mit einem "echten" Clickbaren Button ...
weil solche Lösungen:
http://papervision2.com/advanced-interactivity-2/
können es doch nicht bloß gewesen sein?

Danke euch!!

Mein Code (falls es was bringt):

HTML-Code:

package {
	import flash.display.*;
	import flash.filters.*;
	import flash.display.Stage;
	import flash.events.*;
	
	// Import Papervision3D
	import org.papervision3d.cameras.*;
	import org.papervision3d.scenes.*;
	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.shaders.*;
	import org.papervision3d.materials.utils.*;
	import org.papervision3d.lights.*;
	import org.papervision3d.render.*;
	import org.papervision3d.view.*;
	import org.papervision3d.events.*;
	import org.papervision3d.core.utils.*;
	import org.papervision3d.core.utils.virtualmouse.VirtualMouse;


	public class main extends Sprite {
		// ___________________________________________________________________ vars3D

		var container :Sprite;
		var scene     :Scene3D;
		var camera    :Camera3D;
		var renderer  :BasicRenderEngine;
		var viewport3D:Viewport3D;
		
		var mouseDrag :Boolean = false;

		var	mtx:int;
		var	mty:int;
		
		var m_x:Number = 0;  // set the x startlocation
		var m_y:Number = 0;  // set the y startlocation
		var m_z:Number = 0;  // do not set the z-axis! YOUR SCREEN IS FLAT!!!
		
		var keyboard_Steps:Number = 6;	// set the stepwide for the keys
		var mouse_Steps:Number = 70;	// set the speed for mousetracking
		
		var zoom_MAX:Number = 6;		// set the maximum of zoom
		var zoom_MIN:Number = 2;		// set the minimum of zoom
		var zoom_Steps:Number = 0.5;	// set the stepwide for zooming
		var zoom_Start:Number = 100;	// set the zoomstart


		// ___________________________________________________________________ main

		function main() {
			// onEnterFrame
			this.addEventListener( Event.ENTER_FRAME, loop3D );

			stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
			this.addEventListener(MouseEvent.MOUSE_DOWN,  onmouseDown);
			this.addEventListener(MouseEvent.MOUSE_UP,  onmouseUp);
			
			init3D();
		}



		// ___________________________________________________________________ init3D

		function init3D():void {
			
			viewport3D = new Viewport3D(1000, 550, true, true);
			
			addChild(viewport3D);
			
			renderer = new BasicRenderEngine();
			
			// Create container sprite and center it in the stage
			//container = new Sprite();
			//addChild( container );
			//container.x = 500;
			//container.y = 275;

			// Create scene
			scene = new Scene3D( );

			// Create camera
			camera = new Camera3D();
			camera.zoom=zoom_Start;
			camera.x = camera.y = camera.z = 0;
			camera.rotationX = camera.rotationY = camera.rotationZ = 0;
			camera.yaw(0); camera.pitch(0); camera.roll(0); 
			
			addCubicVR();
			
			renderer.renderScene(scene, camera, viewport3D);

		}



		// ___________________________________________________________________ CubicVR

		function addCubicVR():void {
			
			var materialSpace :MovieAssetMaterial;

			// name, angle, x, y, z
			var ar:Array = new Array();
			ar.push (["front_mc",   0, 0, 0, 2500]); 
			ar.push (["right_mc",  90, 2500, 0 ,0]); 
			ar.push (["back_mc",  180, 0, 0,-2500]); 
			ar.push (["left_mc",  -90,-2500, 0, 0]); 
			ar.push (["bottom_mc", 90, 0,-2500, 0]); 
			ar.push (["top_mc",   -90, 0, 2500, 0]);
						 
			for (var i:int = 0; i < 6; i++) {
				materialSpace = new MovieAssetMaterial( ar[i][0], false, true );
				materialSpace = new MovieMaterial( ar[i][0], false, true );
				materialSpace.interactive = true ; 
				var plan:DisplayObject3D = new Plane( materialSpace, 5000, 5000, 12, 12 );
				if (i==4 || i==5) plan.pitch(ar[i][1]) else plan.yaw(ar[i][1]);
				plan.x = ar[i][2];
				plan.y = ar[i][3];
				plan.z = ar[i][4];
				scene.addChild( plan );
			}
		
		}
		
		function overFunc ():void {
			trace("over");
		}


		// ___________________________________________________________________ update


		function update_Camera():void 
		{	 
			if (m_x >= 360) m_x = 0;
			if (m_x <=-360) m_x = 0;
			if (m_y >=  10) m_y = 10;
			if (m_y <= -10) m_y = -10;

			camera.rotationX = m_y;
			camera.rotationY = m_x;
			camera.yaw(0); camera.pitch(0); camera.roll(0);
			
			//renderer.renderScene(scene, camera, viewport3D);

		}
		
		// ___________________________________________________________________ keyboard


		function keyDownHandler(event:KeyboardEvent):void 
		{	 
						
			if (event.keyCode == 37) { //LEFT		
				m_x -= keyboard_Steps;
				update_Camera();
			}
			
			if (event.keyCode == 38) { //UP
				m_y -= keyboard_Steps;
				update_Camera();
			}
			
			if (event.keyCode == 39) {  //RIGHT
				m_x += keyboard_Steps;
				update_Camera();
			}
			
			if (event.keyCode == 40) {  //DOWN
				m_y += keyboard_Steps;
				update_Camera();
			} 
			
						
			if (event.keyCode == 16){
				if(zoom_MAX > camera.zoom) {
					camera.zoom += zoom_Steps;
				}
			}
			
			if (event.keyCode == 17){
				if(zoom_MIN < camera.zoom) {
					camera.zoom -= zoom_Steps;
				}
			}
			
		}



		// ___________________________________________________________________ loop

		function loop3D(event:Event):void {
		
			if(mouseDrag){
				
				var dx: Number = mouseX - 500;
				var dy: Number = mouseY - 275;

				m_x += dx/mouse_Steps;
				m_y += dy/mouse_Steps;

			}
			
			update_Camera();
			
			renderer.renderScene(scene, camera, viewport3D);
			
			// Render the scene
			//scene.renderCamera( camera );
		}
		
		
		// ___________________________________________________________________ mouse
		
		function onmouseDown(event:Event):void {
			mtx = mouseX;
			mty = mouseY;
			mouseDrag = true;		
		}
		
		function onmouseUp(event:Event):void {
			mouseDrag = false;		
		}
				
		
	}
}

jacquesr · 12-01-2009, 12:43

spontan würde mir einfallen, dort wo du eine klickbare fläche haben willst, ein transparentes plane zu setzen, da kannste ja dann auch click events drauf abfangen. einfach so ganz knapp vor deinen cube, nur ein paar pixel versetzt von der wand weg...

gdav · 12-01-2009, 20:20

Hy & thx,

hab das Problem jetzt behoben.
Die Lösung ist es die Texture vorher als MovieClip zu instanzieren und dann per new MovieMaterial als Texture zu laden.

So kann man über die ID des MovieClips die einzelnen Elemente mit entsprechenden EventListenern versehen.

Da es sich um die Portierung des Visicam Panorama Viewers von Papervision3d 1.5 zu 2.0 handelt.

Mit nun clickbaren Flächen hier kurz der von mir angepasste Code:

PHP-Code:

  package {

    import flash.display.*;

    import flash.filters.*;

    import flash.display.Stage;

    import flash.events.*;

    

    // Import Papervision3D

    import org.papervision3d.cameras.*;

    import org.papervision3d.scenes.*;

    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.shaders.*;

    import org.papervision3d.materials.utils.*;

    import org.papervision3d.lights.*;

    import org.papervision3d.render.*;

    import org.papervision3d.view.*;

    import org.papervision3d.events.*;

    import org.papervision3d.core.utils.*;

    import org.papervision3d.core.utils.virtualmouse.VirtualMouse;

 
 
    public class main extends Sprite {

        // ___________________________________________________________________ vars3D

 
        var container :Sprite;

        var scene     :Scene3D;

        var camera    :Camera3D;

        var renderer  :BasicRenderEngine;

        var viewport3D:Viewport3D;

        

        var mouseDrag :Boolean = false;

 
        var    mtx:int;

        var    mty:int;

        

        var m_x:Number = 0;  // set the x startlocation

        var m_y:Number = 0;  // set the y startlocation

        var m_z:Number = 0;  // do not set the z-axis! YOUR SCREEN IS FLAT!!!

        

        var keyboard_Steps:Number = 6;    // set the stepwide for the keys

        var mouse_Steps:Number = 70;    // set the speed for mousetracking

        

        var zoom_MAX:Number = 6;        // set the maximum of zoom

        var zoom_MIN:Number = 2;        // set the minimum of zoom

        var zoom_Steps:Number = 0.5;    // set the stepwide for zooming

        var zoom_Start:Number = 100;    // set the zoomstart

 
 
        // ___________________________________________________________________ main

 
        function main() {

            // onEnterFrame

            this.addEventListener( Event.ENTER_FRAME, loop3D );

 
            stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);

            this.addEventListener(MouseEvent.MOUSE_DOWN,  onmouseDown);

            this.addEventListener(MouseEvent.MOUSE_UP,  onmouseUp);

            

            init3D();

        }

 
 
 
        // ___________________________________________________________________ init3D

 
        function init3D():void {

            

            viewport3D = new Viewport3D(1000, 550, true, true);

            

            addChild(viewport3D);

            

            renderer = new BasicRenderEngine();

            

            // Create container sprite and center it in the stage

            //container = new Sprite();

            //addChild( container );

            //container.x = 500;

            //container.y = 275;

 
            // Create scene

            scene = new Scene3D( );

 
            // Create camera

            camera = new Camera3D();

            camera.zoom=zoom_Start;

            camera.x = camera.y = camera.z = 0;

            camera.rotationX = camera.rotationY = camera.rotationZ = 0;

            camera.yaw(0); camera.pitch(0); camera.roll(0); 

            

            addCubicVR();

            

            renderer.renderScene(scene, camera, viewport3D);

 
        }

 
 
 
        // ___________________________________________________________________ CubicVR

 
        function addCubicVR():void {

            

            var materialRoom:MovieMaterial

            

            // name, angle, x, y, z

            var ar:Array = new Array();

            ar.push (["front_mc",   0, 0, 0, 2500]); 

            ar.push (["right_mc",  90, 2500, 0 ,0]); 

            ar.push (["back_mc",  180, 0, 0,-2500]); 

            ar.push (["left_mc",  -90,-2500, 0, 0]); 

            ar.push (["bottom_mc", 90, 0,-2500, 0]); 

            ar.push (["top_mc",   -90, 0, 2500, 0]);

                         

            for (var i:int = 0; i < 6; i++) {

                var planeT:MovieClip;

                if( i == 0 ) planeT = new front_mc();

                else if( i == 1 ) planeT = new right_mc();

                else if( i == 2 ) planeT = new back_mc();

                else if( i == 3 ) planeT = new left_mc();

                else if( i == 4 ) planeT = new bottom_mc();

                else if( i == 5 ) planeT = new top_mc();

                if( planeT.doorBtn ) {

                    var doorBtn:MovieClip = planeT.doorBtn;

                    doorBtn.addEventListener(MouseEvent.MOUSE_OVER, overFunc);

                }

                materialRoom = new MovieMaterial ( planeT );

                materialRoom.interactive = true;

 
                var plan:DisplayObject3D = new Plane(materialRoom, 5000,5000,12,12);

 
                if (i==4 || i==5) plan.pitch(ar[i][1]) else plan.yaw(ar[i][1]);

                plan.x = ar[i][2];

                plan.y = ar[i][3];

                plan.z = ar[i][4];

                scene.addChild( plan );

            }

        

        }

        

        function overFunc (e:MouseEvent):void {

            trace("over "+e.target);

        }

 
 
        // ___________________________________________________________________ update

 
 
        function update_Camera():void 

        {     

            if (m_x >= 360) m_x = 0;

            if (m_x <=-360) m_x = 0;

            if (m_y >=  10) m_y = 10;

            if (m_y <= -10) m_y = -10;

 
            camera.rotationX = m_y;

            camera.rotationY = m_x;

            camera.yaw(0); camera.pitch(0); camera.roll(0);

            

            //renderer.renderScene(scene, camera, viewport3D);

 
        }

        

        // ___________________________________________________________________ keyboard

 
 
        function keyDownHandler(event:KeyboardEvent):void 

        {     

                        

            if (event.keyCode == 37) { //LEFT        

                m_x -= keyboard_Steps;

                update_Camera();

            }

            

            if (event.keyCode == 38) { //UP

                m_y -= keyboard_Steps;

                update_Camera();

            }

            

            if (event.keyCode == 39) {  //RIGHT

                m_x += keyboard_Steps;

                update_Camera();

            }

            

            if (event.keyCode == 40) {  //DOWN

                m_y += keyboard_Steps;

                update_Camera();

            } 

            

                        

            if (event.keyCode == 16){

                if(zoom_MAX > camera.zoom) {

                    camera.zoom += zoom_Steps;

                }

            }

            

            if (event.keyCode == 17){

                if(zoom_MIN < camera.zoom) {

                    camera.zoom -= zoom_Steps;

                }

            }

            

        }

 
 
 
        // ___________________________________________________________________ loop

 
        function loop3D(event:Event):void {

        

            if(mouseDrag){

                

                var dx: Number = mouseX - 500;

                var dy: Number = mouseY - 275;

 
                m_x += dx/mouse_Steps;

                m_y += dy/mouse_Steps;

 
            }

            

            update_Camera();

            

            renderer.renderScene(scene, camera, viewport3D);

            

            // Render the scene

            //scene.renderCamera( camera );

        }

        

        

        // ___________________________________________________________________ mouse

        

        function onmouseDown(event:Event):void {

            mtx = mouseX;

            mty = mouseY;

            mouseDrag = true;        

        }

        

        function onmouseUp(event:Event):void {

            mouseDrag = false;        

        }

                

        

    }

}

ps.
vielleicht nicht der galanteste Weg aber es funktioniert

Majo · 30-01-2009, 06:46

hallo,
geht auch mit MovieAssetMaterial...

interactive = true;
und
animated = true;

gdav · 30-01-2009, 11:20

Hy,

wie ist dann der dreh um die eventlistener zu adden?

weil ich daran gescheitert war, über die plane geht es ja kaum oder?

Majo · 30-01-2009, 18:19

das sollte über:

materialRoom.movie.doorBtn.addEventListener(MouseE vent.MOUSE_OVER, overFunc);

funktionieren

gdav · 30-01-2009, 21:09

werd ich morgen mal ausprobieren.

danke dir

30-01-2009, 06:46	#4 (permalink)
Majo {flasher} Registriert seit: Mar 2003 Ort: on water Beiträge: 2.823	hallo, geht auch mit MovieAssetMaterial... interactive = true; und animated = true; __________________ hang loose

30-01-2009, 18:19	#6 (permalink)
Majo {flasher} Registriert seit: Mar 2003 Ort: on water Beiträge: 2.823	das sollte über: materialRoom.movie.doorBtn.addEventListener(MouseE vent.MOUSE_OVER, overFunc); funktionieren __________________ hang loose

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

12-01-2009, 12:43	#2 (permalink)
jacquesr Neuer User Registriert seit: Jun 2006 Beiträge: 83	spontan würde mir einfallen, dort wo du eine klickbare fläche haben willst, ein transparentes plane zu setzen, da kannste ja dann auch click events drauf abfangen. einfach so ganz knapp vor deinen cube, nur ein paar pixel versetzt von der wand weg...

12-01-2009, 20:20	#3 (permalink)
gdav Neuer User Registriert seit: Jul 2004 Beiträge: 66	Hy & thx, hab das Problem jetzt behoben. Die Lösung ist es die Texture vorher als MovieClip zu instanzieren und dann per new MovieMaterial als Texture zu laden. So kann man über die ID des MovieClips die einzelnen Elemente mit entsprechenden EventListenern versehen. Da es sich um die Portierung des Visicam Panorama Viewers von Papervision3d 1.5 zu 2.0 handelt. Mit nun clickbaren Flächen hier kurz der von mir angepasste Code: PHP-Code: package { import flash.display.; import flash.filters.; import flash.display.Stage; import flash.events.; // Import Papervision3D import org.papervision3d.cameras.; import org.papervision3d.scenes.; 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.shaders.; import org.papervision3d.materials.utils.; import org.papervision3d.lights.; import org.papervision3d.render.; import org.papervision3d.view.; import org.papervision3d.events.; import org.papervision3d.core.utils.*; import org.papervision3d.core.utils.virtualmouse.VirtualMouse; public class main extends Sprite { // ___________________________________________________________________ vars3D var container :Sprite; var scene :Scene3D; var camera :Camera3D; var renderer :BasicRenderEngine; var viewport3D:Viewport3D; var mouseDrag :Boolean = false; var mtx:int; var mty:int; var m_x:Number = 0; // set the x startlocation var m_y:Number = 0; // set the y startlocation var m_z:Number = 0; // do not set the z-axis! YOUR SCREEN IS FLAT!!! var keyboard_Steps:Number = 6; // set the stepwide for the keys var mouse_Steps:Number = 70; // set the speed for mousetracking var zoom_MAX:Number = 6; // set the maximum of zoom var zoom_MIN:Number = 2; // set the minimum of zoom var zoom_Steps:Number = 0.5; // set the stepwide for zooming var zoom_Start:Number = 100; // set the zoomstart // ___________________________________________________________________ main function main() { // onEnterFrame this.addEventListener( Event.ENTER_FRAME, loop3D ); stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler); this.addEventListener(MouseEvent.MOUSE_DOWN, onmouseDown); this.addEventListener(MouseEvent.MOUSE_UP, onmouseUp); init3D(); } // ___________________________________________________________________ init3D function init3D():void { viewport3D = new Viewport3D(1000, 550, true, true); addChild(viewport3D); renderer = new BasicRenderEngine(); // Create container sprite and center it in the stage //container = new Sprite(); //addChild( container ); //container.x = 500; //container.y = 275; // Create scene scene = new Scene3D( ); // Create camera camera = new Camera3D(); camera.zoom=zoom_Start; camera.x = camera.y = camera.z = 0; camera.rotationX = camera.rotationY = camera.rotationZ = 0; camera.yaw(0); camera.pitch(0); camera.roll(0); addCubicVR(); renderer.renderScene(scene, camera, viewport3D); } // ___________________________________________________________________ CubicVR function addCubicVR():void { var materialRoom:MovieMaterial // name, angle, x, y, z var ar:Array = new Array(); ar.push (["front_mc", 0, 0, 0, 2500]); ar.push (["right_mc", 90, 2500, 0 ,0]); ar.push (["back_mc", 180, 0, 0,-2500]); ar.push (["left_mc", -90,-2500, 0, 0]); ar.push (["bottom_mc", 90, 0,-2500, 0]); ar.push (["top_mc", -90, 0, 2500, 0]); for (var i:int = 0; i < 6; i++) { var planeT:MovieClip; if( i == 0 ) planeT = new front_mc(); else if( i == 1 ) planeT = new right_mc(); else if( i == 2 ) planeT = new back_mc(); else if( i == 3 ) planeT = new left_mc(); else if( i == 4 ) planeT = new bottom_mc(); else if( i == 5 ) planeT = new top_mc(); if( planeT.doorBtn ) { var doorBtn:MovieClip = planeT.doorBtn; doorBtn.addEventListener(MouseEvent.MOUSE_OVER, overFunc); } materialRoom = new MovieMaterial ( planeT ); materialRoom.interactive = true; var plan:DisplayObject3D = new Plane(materialRoom, 5000,5000,12,12); if (i==4 \|\| i==5) plan.pitch(ar[i][1]) else plan.yaw(ar[i][1]); plan.x = ar[i][2]; plan.y = ar[i][3]; plan.z = ar[i][4]; scene.addChild( plan ); } } function overFunc (e:MouseEvent):void { trace("over "+e.target); } // ___________________________________________________________________ update function update_Camera():void { if (m_x >= 360) m_x = 0; if (m_x <=-360) m_x = 0; if (m_y >= 10) m_y = 10; if (m_y <= -10) m_y = -10; camera.rotationX = m_y; camera.rotationY = m_x; camera.yaw(0); camera.pitch(0); camera.roll(0); //renderer.renderScene(scene, camera, viewport3D); } // ___________________________________________________________________ keyboard function keyDownHandler(event:KeyboardEvent):void { if (event.keyCode == 37) { //LEFT m_x -= keyboard_Steps; update_Camera(); } if (event.keyCode == 38) { //UP m_y -= keyboard_Steps; update_Camera(); } if (event.keyCode == 39) { //RIGHT m_x += keyboard_Steps; update_Camera(); } if (event.keyCode == 40) { //DOWN m_y += keyboard_Steps; update_Camera(); } if (event.keyCode == 16){ if(zoom_MAX > camera.zoom) { camera.zoom += zoom_Steps; } } if (event.keyCode == 17){ if(zoom_MIN < camera.zoom) { camera.zoom -= zoom_Steps; } } } // ___________________________________________________________________ loop function loop3D(event:Event):void { if(mouseDrag){ var dx: Number = mouseX - 500; var dy: Number = mouseY - 275; m_x += dx/mouse_Steps; m_y += dy/mouse_Steps; } update_Camera(); renderer.renderScene(scene, camera, viewport3D); // Render the scene //scene.renderCamera( camera ); } // ___________________________________________________________________ mouse function onmouseDown(event:Event):void { mtx = mouseX; mty = mouseY; mouseDrag = true; } function onmouseUp(event:Event):void { mouseDrag = false; } } } ps. vielleicht nicht der galanteste Weg aber es funktioniert

30-01-2009, 11:20	#5 (permalink)
gdav Neuer User Registriert seit: Jul 2004 Beiträge: 66	Hy, wie ist dann der dreh um die eventlistener zu adden? weil ich daran gescheitert war, über die plane geht es ja kaum oder?

30-01-2009, 21:09	#7 (permalink)
gdav Neuer User Registriert seit: Jul 2004 Beiträge: 66	werd ich morgen mal ausprobieren. danke dir