翻译papervision3d2.0入门教程(七)

Filed under: Papervision 2 | 1 Comment »
Posted on September 22nd, 2008 by admin


如蒙转载，请注明本帖出处:http://bogey.cn/?p=32

e文原教程地址:http://papervision2.com/tutorial-list/
7.鼠标基础交互
这一章我们给奶牛加上简单的鼠标交互，以便通过鼠标来移动旋转奶牛。


代码十分简单，作者直接贴上了源码(翻译的屎，保留e文注释)

  1. package{
  2. import PaperBase;
  3. import org.papervision3d.object.DisplayObject3D;
  4. import org.papervision3d.objects.parsers.Collada;
  5.  
  6. public class Main extends PaperBase{
  7. public var cow:DisplayObject3D;
  8. public var disance:Number = 1000;//Distance the camera should be from the model
  9. //摄像机和奶牛的大概的距离
  10. public function Main(){
  11. init();
  12. }
  13. override protected function init3d():void{
  14.     //cow不是DisplayObject3D么,这里怎么变成了new Collada?这里是因为Collada是DisplayObject3D的一个子类，所以你可以这么干
  15.     cow = new Collada("http://bogey.cn/wp-content/uploads/2008/09/cow.dae");
  16.     cow.moveDown(100);//将模型往下移
  17.     cow.scale=3;//再放大点
  18.     default_scene.addChild(cow);//吧奶牛添加到场景
  19. }
  20.  
  21. override protected function processFrame():void{
  22.     // The next line is a bit of a mouthful, but it's quite simple really.
  23.         // It just gets the Y position of your mouse, and sets the camera.y to a
  24.         // value between -800 and 800, depending on the Y position of your mouse
  25.         // (If mouseY = 0 then camera.y = 800. If mouseY = stage.height, camera.y = -800)
  26.     //下面的话非常重要，也非常的简单
  27.     //根据你的鼠标y坐标来设置摄像机的Y坐标(在-800到800之间)
  28.     //如果鼠标y坐标为0则摄像机坐标为800，如果鼠标坐标为舞台的高度，则摄像机的y为-800
  29.         default_camera.y = -(((mouseY - (stage.height / 2)) / stage.height) * 1600);
  30.         
  31.         // We don't want the camera to move further away from the model, so we do this:
  32.     //防止摄像机离奶牛模型太远
  33.         default_camera.moveForward(default_camera.distanceTo(cow) - distance);
  34.         
  35.         // We now want to rotate the object depending on
  36.         // the Xmouse position. This is really simple.
  37.     //下面的是使用鼠标x坐标来控制模型旋转
  38.         cow.rotationY = -((mouseX / stage.width) * 360) //Rotation
  39.         
  40.        // NOTE: This will only work if you only have one object in your scene
  41.        // I'll write a more advanced movement tutorial soon :)
  42.        //以上仅仅是只有一个物体的场景
  43.        //作者将在后续篇章中讲解一些更高级的内容
  44. }
  45. }
  46. }

我的代码为:

  1. package tutorial {
  2. import org.papervision3d.object.DisplayObject3D;
  3. import org.papervision3d.objects.parsers.Collada;
  4. /**
  5. * ...
  6. * @author $(DefaultUser)
  7. */
  8. public class InteractiveCow  extends PaperBase{
  9.  
  10. public var cow:DisplayObject3D;
  11.  
  12. public function InteractiveCow() {
  13. super();
  14. }
  15.  
  16. override protected function init3d():void {
  17.     cow = new Collada("http://bogey.cn/wp-content/uploads/2008/09/cow.dae");
  18.     cow.scale = 3;
  19.     cow.moveDown(100);
  20.     default_scene.addChild(cow);
  21.     //因为我的下的是最新的papervision源码，按作者的代码来测试摄像机总是在y轴移动
  22.     //所以加上了这句话，让摄像机以奶牛为中心，这样效果才能和作者的效果一样
  23.     default_camera.target = cow;
  24. }
  25.  
  26. override protected function processFrame():void {
  27.      default_camera.y = -(((mouseY - (stage.height / 2)) / stage.height) * 1600);
  28.      default_camera.moveForward(default_camera.distanceTo(cow) - distance);
  29.      cow.rotationY = -((mouseX / stage.width) * 360)
  30. }
  31. }
  32.  
  33. }

我的Main.as为:

  1. package {
  2. import flash.display.Sprite;
  3. import flash.events.Event;
  4. import tutorial.SimpleCone;
  5.  
  6. /**
  7. * ...
  8. * @author DefaultUser (Tools -> Custom Arguments...)
  9. */
  10. [SWF(width='800',height='600',backgroundColor='0x000000',frameRate='30')]
  11. public class Main extends Sprite {
  12.  
  13. public function Main():void {
  14. if (stage) init();
  15. else addEventListener(Event.ADDED_TO_STAGE, init);
  16. }
  17.  
  18. private function init(e:Event = null):void {
  19. if(e!=null)removeEventListener(Event.ADDED_TO_STAGE, init);
  20. addChild(new InteractiveCow)
  21. }
  22.  
  23. }
  24.  
  25. }
Tags : , , ,

翻译papervision3d2.0入门教程(六)

Filed under: Papervision 2 | 4 Comments »
Posted on September 22nd, 2008 by admin


如蒙转载，请注明本帖出处:http://bogey.cn/?p=31

e文原教程地址:http://papervision2.com/tutorial-list/
6.载入复杂模型(噢，奶牛!orz)
这一章我们还是继续学习在papervision中创建物体，也许你已经对那个简陋的圆锥厌烦了，这次来点复杂的怎么样？一个奶牛，它看起来效果很不错，但别担心，创建它的代码很简单。


我们还是在上一章的基础上修改代码，现在打开上次的项目。让我们开始奶牛之旅。
首先我们需要导入org.papervision3d.object.DisplayObject3D用于保存我们的模型，实际上它储存了几何形体，材质，以及坐标点，旋转等所有和模型物体相关的东西。另外我们还需要导入
org.papervision3d.objects.parsers.Collada用于解析我们的Collada文件。(Collada是一种使用xml标记语言来描述一个3d物体的文件格式，你可以使用记事本来查看相关的文件内容，maya似乎直接支持Collada文件导出，而max则需要一个插件)

  1. import PaperBase;
  2. import org.papervision3d.object.DisplayObject3D;
  3. import org.papervision3d.objects.parsers.Collada;

只需要导入以上3个类就可以了。
现在我们把原来的圆锥体修改成奶牛，hoho,找到public var cone:Cone将其修改为:
public var cow:DisplayObject3D;
以上代码声明一个叫cow的变量，用于存储我们的奶牛模型，然后我们转到init3d()方法里来，在这里我们要载入collada文件并初始化它:

  1. override protected function init3d():void{
  2.     //cow不是DisplayObject3D么,这里怎么变成了new Collada?这里是因为Collada是DisplayObject3D的一个子类，所以你可以这么干
  3.     cow = new Collada("http://bogey.cn/wp-content/uploads/2008/09/cow.dae");
  4.     cow.moveDown(100);//将模型往下移
  5.     cow.scale=3;//再放大点
  6.     cow.pitch(-30);//稍微倾斜对准摄像机
  7.     default_scene.addChild(cow);//吧奶牛添加到场景
  8. }

以上代码就将奶牛加载到了我们的场景里，对与Collada文件的加载，解析，以及初始化模型材质，这些统统由Collada类做了，我们所需要的只是向它提供一个collada文件地址，简单吧？
由于跨域的原因，你需要将材质图片和collada文件下载下来使用,右键点击下面链接下载。
材质:
collada文件
最后我们还需要修改processFrame方法里的代码让奶牛旋转起来，将原来的cone.yaw(5)修改为cow.yaw(5),大功告成，Ctrl+enter看看你的奶牛吧！

完整的代码如下:

  1. package{
  2. import PaperBase;
  3. import org.papervision3d.object.DisplayObject3D;
  4. import org.papervision3d.objects.parsers.Collada;
  5.  
  6. public class Main extends PaperBase{
  7. public var cow:DisplayObject3D;
  8. public function Main(){
  9. init();
  10. }
  11. override protected function init3d():void{
  12.     //cow不是DisplayObject3D么,这里怎么变成了new Collada?这里是因为Collada是DisplayObject3D的一个子类，所以你可以这么干
  13.     cow = new Collada("http://bogey.cn/wp-content/uploads/2008/09/cow.dae");
  14.     cow.moveDown(100);//将模型往下移
  15.     cow.scale=3;//再放大点
  16.     cow.pitch(-30);//稍微倾斜对准摄像机
  17.     default_scene.addChild(cow);//吧奶牛添加到场景
  18. }
  19.  
  20. override protected function processFrame():void{
  21. cow.yaw(5);//每帧旋转5
  22. }
  23. }
  24. }

我的代码为:

  1. package tutorial {
  2. import org.papervision3d.object.DisplayObject3D;
  3. import org.papervision3d.objects.parsers.Collada;
  4. /**
  5. * ...
  6. * @author $(DefaultUser)
  7. */
  8. public class CowModel extends PaperBase{
  9.  
  10. public var cow:DisplayObject3D;
  11.  
  12. public function CowModel() {
  13. super();
  14. }
  15.  
  16. override protected function init3d():void {
  17.     cow = new Collada("http://bogey.cn/wp-content/uploads/2008/09/cow.dae");
  18.     cow.scale = 3;
  19.     cow.moveDown(100);
  20.     //cow.pitch( -10);
  21.     default_scene.addChild(cow);
  22. }
  23.  
  24. override protected function processFrame():void {
  25.     cow.yaw(1);
  26. }
  27. }
  28.  
  29. }

我的Main.as为:

  1. package {
  2. import flash.display.Sprite;
  3. import flash.events.Event;
  4. import tutorial.SimpleCone;
  5.  
  6. /**
  7. * ...
  8. * @author DefaultUser (Tools -> Custom Arguments...)
  9. */
  10. [SWF(width='800',height='600',backgroundColor='0x000000',frameRate='30')]
  11. public class Main extends Sprite {
  12.  
  13. public function Main():void {
  14. if (stage) init();
  15. else addEventListener(Event.ADDED_TO_STAGE, init);
  16. }
  17.  
  18. private function init(e:Event = null):void {
  19. if(e!=null)removeEventListener(Event.ADDED_TO_STAGE, init);
  20. addChild(new CowModel)
  21. }
  22.  
  23. }
  24.  
  25. }
Tags : , , ,

翻译papervision3d2.0入门教程(五)

Filed under: Papervision 2 | 1 Comment »
Posted on September 22nd, 2008 by admin


如蒙转载，请注明本帖出处:http://bogey.cn/?p=30

e文原教程地址:http://papervision2.com/tutorial-list/
5.基础材质
光一个线框太不美观了？那试试给它贴上一个材质，嘿嘿。


首先打开上一篇教程所创建的项目，我们将在上次的基础上添加一些代码来贴上材质，我们将使用BitmapFileMaterial,我们先倒入它以备使用(在原来的import代码之后新起一行添加):
import org.papervision3d.materials.BitmapFileMaterial;
现在我们需要添加BitmapFileMaterial材质给我们的圆锥，在添加材质之前，我们先来了解下BitmapFileMaterial.
BitmapFileMaterial是papervision提供的众多材质中的一种，它允许你通过指定一个图片地址来创建一个材质，这对于加载collada模型并使用用户上传的材质进行渲染十分的有用。
当你创建了一个BitmapFileMaterial对象，你需要给它一个url来让他获取材质的图形。
现在我们来创建一个bitmapFileMatrial材质，并在我们的圆锥被创建时将这个材质付给它，代码十分简单：
将原来的
public var cone:Cone=new Cone();
改为:
public var cone:Cone = new Cone(new BitmapFileMaterial(”ourtex.jpg”));
由于跨域的原因，你需要将材质图片下载下来使用,右键点击下面的图片另存为下载。

Ctrl+Enter测试项目，你可以看到圆锥被贴上了红白相间的材质。呵呵，现在看起来效果还不错。
最后完整的代码如下:

  1. package{
  2. import PaperBase;
  3. import org.papervision3d.objects.primitives.Cone;
  4. import org.papervision3d.materials.BitmapFileMaterial;
  5.  
  6. public class Main extends PaperBase{
  7. public var cone:Cone = new Cone(new BitmapFileMaterial("ourtex.jpg"));
  8. public function Main(){
  9. init();
  10. }
  11. override protected function init3d():void{
  12. cone.scale=3;//将圆锥放大一点
  13. cone.pitch(-40);//将圆锥倾斜以对准摄像机
  14. default_scene.addChild(cone);//将圆锥添加到场景
  15. }
  16.  
  17. override protected function processFrame():void{
  18. cone.yaw(5);//每帧旋转5
  19. }
  20. }
  21. }

我的代码为:

  1. package tutorial {
  2. import flash.filters.GlowFilter;
  3. import org.papervision3d.objects.primitives.Cone;
  4. import org.papervision3d.materials.BitmapFileMaterial;
  5. /**
  6. * ...
  7. * @author $(DefaultUser)
  8. */
  9. public class SimpleCone extends PaperBase{
  10.  
  11. private var cone:Cone;
  12.  
  13. public function SimpleCone() {
  14. super();
  15. }
  16.  
  17. override protected function init3d():void {
  18. cone =  new Cone(new BitmapFileMaterial("http://bogey.cn/wp-content/uploads/2008/09/ourtex.jpg"));
  19. cone.scale = 3;
  20. cone.pitch(-15);
  21. default_scene.addChild(cone);
  22. }
  23.  
  24. override protected function processFrame():void {
  25. cone.yaw(1);
  26. }
  27. }
  28.  
  29. }

我的Main.as为:

  1. package {
  2. import flash.display.Sprite;
  3. import flash.events.Event;
  4. import tutorial.SimpleCone;
  5.  
  6. /**
  7. * ...
  8. * @author DefaultUser (Tools -> Custom Arguments...)
  9. */
  10. [SWF(width='800',height='600',backgroundColor='0x000000',frameRate='30')]
  11. public class Main extends Sprite {
  12.  
  13. public function Main():void {
  14. if (stage) init();
  15. else addEventListener(Event.ADDED_TO_STAGE, init);
  16. }
  17.  
  18. private function init(e:Event = null):void {
  19. if(e!=null)removeEventListener(Event.ADDED_TO_STAGE, init);
  20. addChild(new SimpleCone)
  21. }
  22.  
  23. }
  24.  
  25. }
Tags : , , ,