Moving a Texture inside of a Plane

Saturday, May 23rd, 2009 | examples

This examples shows how to update the uvs on a plane which results in an image scrolling vertically on the plane. As you can see from the code, we’re only updating the v’s. If you want the image to move hortizontally, try swapping the v’s with u’s :)


source

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
package
{
	import flash.display.Bitmap;
	import flash.events.Event;
 
	import org.papervision3d.core.geom.renderables.Triangle3D;
	import org.papervision3d.core.proto.MaterialObject3D;
	import org.papervision3d.materials.BitmapMaterial;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.view.BasicView;
 
	[SWF(width="900", height="480", backgroundColor="#000000", frameRate="31")]
	public class MovingATexture extends BasicView
	{
		[Embed(source="assets/image.jpg")]
		private var bannerAsset:Class;
 
		private static const IMAGE_WIDTH:Number = 900;
		private static const IMAGE_HEIGHT:Number = 480;
 
		private var plane:Plane;
 
		public function MovingATexture()
		{
			super(900, 480);
			opaqueBackground = 0x000000;
 
			var bitmap:Bitmap = new bannerAsset() as Bitmap;
			var bitmapMaterial:MaterialObject3D = new BitmapMaterial(bitmap.bitmapData, true);
			bitmapMaterial.doubleSided = true;
			bitmapMaterial.tiled = true;
			plane = new Plane(bitmapMaterial);
 
			scene.addChild(plane);
 
			startRendering();
		}
 
		override protected function onRenderTick(event:Event=null):void
		{
			plane.yaw(1);
 
			for each(var triangle3D:Triangle3D in plane.geometry.faces)
			{
				triangle3D.uv0.v += .01;
				triangle3D.uv1.v += .01;
				triangle3D.uv2.v += .01;
			}
 
			BitmapMaterial(plane.material).resetUVS();
 
			super.onRenderTick(event);
		}
	}
}

Tags: ,

  • CJ
    Flawless execution. As always, thank you. On another note, I find the Tondeur & Winder book especially compelling. They are two very skilled developers who have a knack at getting to the very root of the subject matter before us. Certainly a must have. Cheers.
  • I had the same problem of image locking after sometime but it got fixed after applying the code mentioned by John.
  • joni
    hello again!
    i've tried what you said but it didn't work out.
    the material doesn't tile correctly. in
    i've tried thre different alternatives:

    if(triangle3D.uv0.v >= 1) triangle3D.uv0.v = 0;

    if(triangle3D.uv0.v >= 1) triangle3D.uv0.v -= 1;

    triangle3D.uv0.v = triangle3D.uv0.v % 1;

    any suggestions?
  • joni
    as jb said, i'm having the same problem.
    i'm scrolling a water texture on a plane. eventually the material will get 'corrupted', as if the uv mapping would be wrong or something.
    i'can send screenshot or code.
    anybody know how to working around this problem?
  • John Lindquist
    Try something like this for each property:

    triangle3D.uv0.v += .01;
    if(triangle3D.uv0.v > 1)
    {
    triangle3D.uv0.v = 0;
    }
  • Teresa
    Hellooo !
    I'm working with augmented reality and i want to create a plane with a movie but i have a problem. could it be possible to send you the code?
  • jb
    John, was doing the exact same the other day.
    Noticed that eventually the image will lock.
    change the triangle3D.uv0.v += .1;
    and after a while you will see it lock up.
  • Cool! This might come in handy for a project I'm working on right now.
  • sweet! =) YES
  • sweet! =)
  • The line BitmapMaterial(plane.material).resetUVS(); is responsible for make the loop at image movement?
blog comments powered by Disqus

Search

Recommended Books

Speaking at FITC Toronto

 

May 2009
M T W T F S S
« Apr   Jun »
 123
45678910
11121314151617
18192021222324
25262728293031

Preferred Video Tutorial Resolution

  • 1024x768 (53%, 85 Votes)
  • 1280x1024 (15%, 24 Votes)
  • 1920x1080 (15%, 24 Votes)
  • 800x600 (13%, 20 Votes)
  • 480x320 (4%, 6 Votes)
  • 640x480 (0%, 2 Votes)

Total Voters: 160

Loading ... Loading ...