Šta je novo?

Jednostavana besplatna flash aplikacija za prikazivanje 3D proizvoda

codejan

Čuven
Učlanjen(a)
06.07.2004
Poruke
256
Poena
620
Moja oprema  
CPU & Cooler
Intel Core i5-3470 quad core
Matična ploča
Gigabyte GA-P75-D3
RAM
Kingston 12GB DDR3 HYPER blu
GPU
EVGA GeForce GTX 260 896MB DDR3
Storage
Hitachi 1TB, EXRAM 512GB SSD
Zvuk
Creative Live! 5.1
PSU
Thermaltake SMART RGB 700W
Kućište
MS MidiATX
Monitor
BENQ FP91G+, HP W19
Miš & tastatura
Logitech MX400
Ostale periferije
neo SW-H55
Laptop
Lenovo ThinkPad T450s, ASUS eeePC 1001HA
Tablet
Lenovo TB-8505X
Mobilni telefon
Xiaomi Redmi 10 2022
Pametni uređaji
Denver BFH-17, Xiaomi TV Stick 4K
Pristup internetu
  1. ADSL
Pozdrav postovanoj zajednici,

Na internetu sam proveo ceo dan trazeci jednostavnu Flash aplikaciju sa kojom bih mogao 3D model odredjenog proizvoda da prikazem na sajtu. Vecinom sam setao od sajta do sajta i metode na koje sam nailazio su bile preobimne.

Meni je potrebno da ubacim u Flash aplikaciju pozeljan format 3D modela proizvoda i da imam okretanje po dve ose i zoom funkcionalnost.
 
papervision3d. doduse nije aplikacija vec framework ali mislim da vec u demoima imas obradjeno to sto tebi treba. ja sam uvozio modele iz 3d max-a preko collada formata (instalira se poseban plugin za max jer onaj collada format koji vec postoji u maxu ne funkcionise sa papervision3d). naravno, broj poligona svedi na minimum...
 
Ok, hvala, ali u tutorijalima nema objasnjenja za zumiranje i rotiranje modela u finalnoj aplikaciji u brauzeru. Moze li mala pomoc, ako sam ja nesto preskocio.

Neuci mi se sad taj framework, jer imam drugih prioriteta, pa bih voleo ako moze prostije. Hvala.
 
nisam siguran da te razumem za ovo "u finalnoj aplikaciji u brauzeru"... napravis event funkcije u koje stavis za koliko ce da poveca ugao kada se f-ja izvrsi. recimo, napravis onClick event u koji ubacis rotationX=rotationX+1 i kao rezultat dobijes da kada god kliknes na model (ili kontejner u kome je model) on ce se oko x ose zarotirati za jos 1 stepen. ja sam bzvz izabrao click event, moze bilo koji drugi u zavisnosti od potrebe.
 
probacu posle da potrazim primere na kojima sam ja ucio pa da ti postavim malo koda
 
Ok, cenim pomoc. :)
 
ok, okacio sam ti na http://tehinfo.freehostia.com/ konacni rezultat.
kod ispod ti je klasa koju ne menjas samo odradis copy/paste i snimis je kao ReflectionView.as. (naravno pre toga instaliras papervision3D po uputstvu sa njihovog site-a)
Kod:
package org.papervision3d.core.effects.view {
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.core.math.Matrix3D;
	import org.papervision3d.core.proto.CameraObject3D;
	import org.papervision3d.view.BasicView;
	import org.papervision3d.view.Viewport3D;
	
	import flash.events.Event;
	import flash.geom.ColorTransform;	

	public class ReflectionView extends BasicView
	{
		
		public var viewportReflection : Viewport3D; 
		public var cameraReflection : CameraObject3D;
		public var surfaceHeight : Number = 0; 
		
		//public var reflectionMatrix : Matrix3D;  // for future use... 
		
		private var _autoScaleToStage : Boolean; 
		
		public function ReflectionView(viewportWidth:Number=640, viewportHeight:Number=320, scaleToStage:Boolean=true, interactive:Boolean=false, cameraType:String="Target")
		{
			super(viewportWidth, viewportHeight, scaleToStage, interactive, cameraType);
			
			//set up reflection viewport and camera
			viewportReflection = new Viewport3D(viewportWidth, viewportHeight,scaleToStage, false); 

			// For future use... 
			//reflectionMatrix = new Matrix3D(); 
			//createReflectionMatrix(null); 
			
			
			
			// add the reflection viewport to the stage 
			addChild(viewportReflection); 
			setChildIndex(viewportReflection,0); 
			
			// flip it
			viewportReflection.scaleY = -1; 

			// and move it down
			viewportReflection.y = viewportHeight;  

			cameraReflection = new Camera3D(); 
			
			

    		// SAVING THIS CODE FOR LATER (may require transparent reflections... )
			/*var matrix:Array = new Array();
            matrix = matrix.concat([0.4, 0, 0, 0, 0]); // red
            matrix = matrix.concat([0, 0.4, 0, 0, 0]); // green
            matrix = matrix.concat([0, 0, 0.4, 0, 0]); // blue
            matrix = matrix.concat([0, 0, 0, 1, 0]); // alpha
			viewportReflection.filters = [new ColorMatrixFilter(matrix),new BlurFilter(8,8,1)]; 
			*/
			
			addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
			addEventListener(Event.REMOVED_FROM_STAGE, onRemovedFromStage);
			
			this.autoScaleToStage = scaleToStage; 
			
			setReflectionColor(0.5,0.5,0.5); 
		}
		
		public override function singleRender():void
		{
			
			cameraReflection.zoom = camera.zoom; 
			cameraReflection.focus = camera.focus; 
			if(camera is Camera3D)
			{
				Camera3D(cameraReflection).useCulling = Camera3D(camera).useCulling; 
			
			}
			if(camera.target) camera.lookAt(camera.target); 
			cameraReflection.transform.copy(camera.transform);
			
			// reflection matrix! Doesn't work yet - turns planes inside out :-S
			//cameraReflection.transform.calculateMultiply(cameraReflection.transform, reflectionMatrix); 
			
			cameraReflection.y=-camera.y;
			cameraReflection.rotationX = -camera.rotationX;
			cameraReflection.rotationY = camera.rotationY;
			cameraReflection.rotationZ = -camera.rotationZ;
			
			cameraReflection.y+=surfaceHeight; 
			
			
			
			renderer.renderScene(scene, cameraReflection, viewportReflection);			
			super.singleRender(); 
		
		}
		
		
		public function setReflectionColor(redMultiplier:Number=0, greenMultiplier:Number=0, blueMultiplier:Number=0, redOffset:Number=0, greenOffset:Number=0, blueOffset:Number=0): void
		{
			viewportReflection.transform.colorTransform = new ColorTransform(redMultiplier, greenMultiplier, blueMultiplier, 1, redOffset, greenOffset, blueOffset); 
			
		}
	
	
		/* For future use... 
	
		public function createReflectionMatrix(plane:Plane3D):void
		{
			var a:Number = 0;//plane.normal.x;
			var b:Number = 1;//plane.normal.y;
			var c:Number = 0;//plane.normal.z;
			
			
			reflectionMatrix.n11 = 1-(2*a*a);
			reflectionMatrix.n12 = 0-(2*a*b);
			reflectionMatrix.n13 = 0-(2*a*c);
			
			reflectionMatrix.n21 = 0-(2*a*b);
			reflectionMatrix.n22 = 1-(2*b*b);
			reflectionMatrix.n23 = 0-(2*b*c);
			
			reflectionMatrix.n31 = 0-(2*a*c);
			reflectionMatrix.n32 = 0-(2*b*c);
			reflectionMatrix.n33 = 1-(2*c*c);
		}
		
		*/

		/**
		 * We need  to move the reflection view whenever the stage is resized so we have to implement
		 * the same functionality as the Viewport3D, ie we add a stage resize listener (once we're on the stage). 
		 */
		 
		 
		public function set autoScaleToStage(scale:Boolean):void
		{
			_autoScaleToStage = scale;
			if(scale && stage != null)
			{
				onStageResize();
			}
			
		}
		
		/**
		 * Triggered when added to the stage to start listening to stage resizing
		 */
		protected function onAddedToStage(event:Event):void
		{
			stage.addEventListener(Event.RESIZE, onStageResize);
			onStageResize();
		}

		/**
		 * Triggered when removed from the stage to remove the stage resizing listener
		 */
		protected function onRemovedFromStage(event:Event):void
		{
			stage.removeEventListener(Event.RESIZE, onStageResize);
		}
		
		// all we need to do is move the view down
		private function onStageResize(e:Event = null) : void
		{
			viewportReflection.y = stage.stageHeight;  
			
		}
				
				
	}
}

zatim kod ispod snimis kao ReflectionCubeSimple.as
Kod:
package {
	import flash.events.Event;
 
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.core.effects.view.ReflectionView;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.materials.utils.MaterialsList;
	import org.papervision3d.objects.primitives.Cube;
	import org.papervision3d.objects.parsers.DAE;
	import org.papervision3d.materials.shadematerials.GouraudMaterial;
	import org.papervision3d.materials.shaders.GouraudShader;
	import org.papervision3d.lights.PointLight3D;
 
	[SWF (width="640", height="480", backgroundColor="0xFFFFFF", frameRate="30")]
 
	public class ReflectionCubeSimple extends ReflectionView
	{
 
		private var cube : DAE;
		private var cube1 : DAE;
		private var cube2 : DAE;
		private var cube3 : DAE;
		private var cube4 : DAE;
		
		private var light:PointLight3D;
		private var angle:Number = 0;
		
		var shadeMaterial:GouraudMaterial
 
		public function ReflectionCubeSimple()
		{
 
			super(640,480,false, false);
 
			//the height of the reflection plane
			surfaceHeight = -20;
			
			initCube();
			
			light = new PointLight3D(true);
			light.z = 0;
			light.x = 100;
			light.y = 100;
			scene.addChild(light);
 
			camera.z = -300;
			//camera.target = cube;
			camera.y=100;
			camera.focus=18;
 
			addEventListener(Event.ENTER_FRAME, enterFrame);
 
		}
 
 
		public function initCube() : void
		{
 
			// create a materials list for the cube.
			var ml : MaterialsList = new MaterialsList();
			ml.addMaterial(new GouraudMaterial(light,0x440000,0x660000,100), "all"); 
			
//ucitavanje modela
 			cube = new DAE();
			DAE(cube).load("assets/part.DAE", ml); //, null, "./assets/"
			cube.x = 0;
			cube.y=50;
			cube.rotationZ=100;
			scene.addChild(cube);
			
			cube1 = new DAE();
			DAE(cube1).load("assets/part1.DAE",ml); //, null, "./assets/"
			cube1.x = 0;
			cube1.y=0;
			// add the cube to the scene
			cube.addChild(cube1);
			
			cube2 = new DAE();
			DAE(cube2).load("assets/part2.DAE",ml); //, null, "./assets/"
			cube2.x = 0;
			cube2.y=0;
			// add the cube to the scene
			cube.addChild(cube2);
			
			cube3 = new DAE();
			DAE(cube3).load("assets/part3.DAE",ml); //, null, "./assets/"
			cube3.x = 0;
			cube3.y=0;
			// add the cube to the scene
			cube.addChild(cube3);
			
			cube4 = new DAE();
			DAE(cube4).load("assets/part4.DAE",ml); //, null, "./assets/"
			cube4.x = 0;
			cube4.y=0;
			// add the cube to the scene
			cube.addChild(cube4);
 
		}
 
		public function enterFrame(e:Event) : void
		{
			// rotiranje u zavisnosti od pozicije misa
			cube.pitch((320-mouseX)*0.05);
			//pomeranje po relativnoj y osi
			cube1.y=mouseY/50;
			cube2.y=mouseY/25;
			cube3.y=mouseY/12;
			cube4.y=mouseY/10;
 			//ogranicenja
			if(cube1.y<5) cube1.y = 0;//if(cube1.y>10) cube1.y =10;
 			if(cube2.y<5) cube2.y = 0;
			if(cube3.y<5) cube3.y = 0;
			if(cube4.y<5) cube4.y = 0;
			
			singleRender();
 
		}
 
	}
}
 
ovo gore ti je fakticki aplikacija koju si trazio, samo u funkciji initCube() ucitaj svoj model... trebalo bi da radi (kazem trebalo bi jer nisam sada build-ovao sve ovo, iz arhive je ;) )
 
Poslednja izmena:
Ne bih da budem nezahvalan, ali ovo resenje daje samo rotaciju po jednoj osi (i to poprilicno nekontrolisano). Nema druge ose i nema zumiranja. U svakom slucaju, hvala na trudu.
 
pa moras malo da zavrnes rukave i prilagodis kod... ako imas rotaciju po jednoj osi, koliko drugacije moze biti rotiranje i po nekoj drugoj osi?! ako ti se cini da je rotiranje nekontrolisano... prilagodi brojke u cube.pitch((320-mouseX)*0.05). primer gore je samo odradjen principijelno. zoom... da li ces pomerati objekat ka kameri ili kameru ka objektu ili ces skalirati, opet vidi sta ti odgovara. sve su to skromne izmene. meni je bio najveci problem pripremiti scenu.

edit: ne znam tacno sta si mislio pod "nekontrolisana rotacija", u primeru ona zavisi od x koordinate misa, znaci kad pomeras misa po horizontali levo desno utice na rotaciju, po y ne utice na rotaciju vec na relativno pomeranje primitivnih objekata
 
Poslednja izmena:
Ok, znaj da cenim pomoc, ali trenutno nemam vremana za neko obimnije ucenje Flash-a... Hvala u svakom slucaju.
Uzecu ovaj post u razmatranje kad budem ucio Flash.
 
aaa ok, mislio sam da si u materiji sa flash-om... nista, probacu jos da ti doradim gornji primer ako mi se ukaze malo vremena u narednim danima. cheers
 
Poslednja izmena:
Dsk,skidam ti kapu....svaka cast,prava si ljudina...
 
Nazad
Vrh Dno