5. Basic Texturing
Before starting this tutorial, please note that it follows on from Tutorial 4 - Basic Template Usage. If you haven't followed that tutorial, I suggest that you do so.
Be modifying a few lines, we're going to give our spinning cone a texture. The result will be something like this:
Firstly, open up the project that you made in tutorial 4. I'm going to show you how to use the BitmapFileMaterial, so before we start, you need to import org.papervision3d.materials.BitmapFileMaterial. To do this, find where you have two lines starting with import and just below them, add the line:
import org.papervision3d.materials.BitmapFileMaterial;
That line will import the BitmapFileMaterial package into your project, so that you can use it.
Now, we need to add a BitmapFileMaterial to our cone. We can do this when we create it, but first I'll explain BitmapFileMaterial.
BitmapFileMaterial is a papervision 3d material which takes a url of an image file, and creates a texture from it. This is very useful when loading collada models, and it opens possibilities of having things like user-uploaded textures.
When you create a new BitmapFileMaterial object, you pass it a URL from which the texture will be fetched.
To add the material to our cone, we're going to pass a BitmapFileMaterial object to the cone when we create it. This is really simple to do, simply change the line:
public var cone:Cone = new Cone();
to:
public var cone:Cone = new Cone(
new BitmapFileMaterial(
"http://papervision2.com/wp-content/downloads/ourtex.jpg"
)
);
This will now get the file from my server and use it as the texture on your cone.
Now, when you run your code you'll see the red and white texture on your cone. Simple!
My final code looks like this:
-
package {
-
-
import PaperBase;
-
import org.papervision3d.objects.primitives.Cone;
-
import org.papervision3d.materials.BitmapFileMaterial;
-
-
public class Main extends PaperBase {
-
-
public var cone:Cone = new Cone(new BitmapFileMaterial("http://papervision2.com/wp-content/downloads/ourtex.jpg"), 20, 200);
-
// I've added a width and height to change the shape of my cone.
-
-
public function Main() {
-
init();
-
}
-
-
override protected function init3d():void {
-
cone.scale = 3;
-
cone.pitch( -30);
-
default_scene.addChild(cone);
-
}
-
-
override protected function processFrame():void {
-
cone.yaw(20);
-
// Here, I've made my cone spin faster by increasing the amount sent to yaw();
-
}
-
-
}
-
-
}
Hi~
I wonder how do you know the pitch(), yaw() methods ?
thx for reply
Hi,
pitch(), roll() and yaw() are all methods of DisplayObject3D. You can do these on pretty much anything in papervision, including cameras and lights.
-Luke
Hi,
I have a problem. When I compile this code in FlashDevelop everything is good, but when I use file swf in my www site I see only black cone. I don't see textur! What I do wrong? Please help me.
Marcin
I have the same problem, When I copied the file compiled with flashDevelop and the texture to another location in my Hard Disk and it displayed a black screen.
When I compile the file with the Flash CS3 everything worked fine.
I also noticed that when I traced the "loaded" property of the BitmapFileMaterial i got a "false".
To mf777 and luis_o
Your problem is not the same.
For mf777: The problem is that the from this server ("http://papervision2.com/wp-content/downloads/ourtex.jpg") cannot be just loaded by your website. You can load the image but you cannot access the bitmapData of the image (the actual pixels, what is I think important for the 3D engines), because Adobe implemented a stupid crossDomain policy that prevents flash from accessing content form different domains. (and actually its not a big deal to hack it with come kind of proxy from PHP). You need to put the jpg file on your server and load that image as material (load the jpg from the server, and use local address to it when you compile, and copy the swf and the jpg to your server)
For luis_o: Your problem seems to be a local/network security problem. Your local file cannot access network. It doesn't happen if your compiled with Flash CS3 just if you run the resulted swf. If you have debugger version of flash player you should see:
SecurityError: Error #2122: Security sandbox violation: Loader.content: file:///C|/ConeExample.swf cannot access http://papervision2.com/wp-content/downloads/ourtex.jpg. A policy file is required, but the checkPolicyFile flag was not set when this media was loaded.
at flash.display::Loader/get content()
at org.papervision3d.materials::BitmapFileMaterial/loadBitmapCompleteHandler()
Adobe doesn't allow local files to access the net, or files from the network to access local files. The solution is the same as for mf777 (load the jpg from the server, and use local address to it when you compile, and copy the swf and the jpg to your server - or the different location on your harddisk) When you move the swf move the image too.
--I have the same problem, When I copied the file compiled with flashDevelop and the texture to another location in my Hard Disk and it displayed a black screen.
be careful, Flash Dev uses some relative paths in its projects
Just save the image to the folder where your .fla lives and change the path in the constructor for BitmapFileMaterial to "ourtex.jpg". IMHO Using a hosted image is besides the point here. Flash security su-ux, don't let it ruin your day
I got the result which is different from yours. It is a "fat" and "short" cone which is similar to previous tutorial. The texture looks correct. I check the scale and pitch factor which are same as yours. Could you help me with that?
Thanks a lot
If you want to change the cone specifics / properties
From Cone.as
//public function Cone( material:MaterialObject3D=null, radius:Number=100, height:Number=100, segmentsW:int=8, segmentsH:int=6, initObject:Object=null )
Hi, i want to apply a border to a cube, but i don't find any information about it. Is it possible ?
Thanks for you help,
Eric
(sorry for my english, i'm french^^)
"This is very useful when loading collada models,"
I've only been able to successfully load collada models with the DAE class (unsuccessful with "new Collada"), which only accepts a Materials List, not a Material Object. I'd like to map a default bitmap to all faces of my collada. I've tried to use this doing (new MaterialsList({all:bmf}), where bmf is a BitmapFileMaterial but eveything gets stretched all weird. I'm using the free version of Sketchup.
Great tutorials. Thanks so much for these!
These tutorials are great. Many thanks to the author. I've been playing with this one, extending it a bit. However now, when I rotate a new object using yaw, it rotates, but leaves a copy of the original where it is. Is anyone able to explain this?
Hi, The result of my cone is different from the example, the texture is not showed in my project, just de borders, how can i fill the cone?
10x
very helpful !