主题:  《超简易papervision3D基础 第一篇 人人都能PV

ddmsama

职务:普通成员
等级:1
金币:0.0
发贴:3
注册:2008/12/20 14:32:18
#12008/12/21 14:03:49
《超简易papervision3D基础 第一篇 人人都能PV3D》
DDM君 , Flab3D.com (允许转载,转载请注明)

在网页里制作三维实时动画和网页三维游戏,从很多年前的shockwave时代(那种普及率很难称作一个时代)就开始了。如今网页三维引擎虽不算多如牛毛,也算多到眼花的。具体为什么这项技术到现在还没有普及起来,在下可能又能写一篇文章了,所以这里就不多讲。先提一下这些的原因是想让我们不要觉得flash3d是很超前,或者很高难度不可攀的东西。
在下从shockwave时代就对网页三维引擎颇有兴趣,现在对flash3d也有少许了解。在下也知道国内flash3d站,中文高端资料也是非常有限的,国内的研发者就更是屈指可数。
我们Flab3D.com就是为了让更多国内flash3d爱好者了解,上手,并希望能加入flash3d制作和开发的行列。因此我们的教程更注意对基本原理的讲解,并非简单描述如何操作。
如果你的梦想和我们一样是建造在网页上的三维世界,那么请和我们一起加油。

我们都会以flash中的使用为初级教程的软件,flex暂不多提,flex的使用者解决这类简单的安装问题应该是不成问题的)




原理解释:
要使papervision3D成像,必须至少初始化下面4个东西(如果没有三维引擎经验,或者三维动画制作经验,如果无法理解请先记下来,别担心,以后用多了慢慢就懂了):

窗口:用户观看的窗口,简单的可以想成就是flash里面的画布大小。窗口也可以理解成渲染的尺寸,否则画面就无限大了
场景:场景是指整个三维的场景。
摄像机:很多人要问,为什么有了摄像机还要窗口呢?摄像机是用来拍画面的,看画面还是得电视机/窗口不是吗,^_^
渲染器:如果没有这个东西,所有以上的东西都只是数据,渲染器就是把所有数据变成图像的东西。

下面这幅图虽然并不算准确的表述,但希望能帮助我们理解:
图1

当然只有上面的东西,我们虽然有了个正确的基本pv3d设置。但还是什么都看不到,因为场景里什么都没有嘛,呵呵。

我们这个例子里,会向场景加入一个小球,然后给这个小球贴上一个自己做的位图贴图。(如果没有三维经验的朋友,可以把小球想成是一个木头架子组成的灯笼框,贴图是上面糊的画纸=___=有时候我有没有必要解释到这种地步OTL…),最后让这个小球自己慢慢转动。



请下载我们为您提供的 pv3d傻瓜包 (08-11)。(无法右键另存,直接点击即可)
另外自己看了下面的流程仍然有困难写出代码的朋友可以下载我们的 源文件 ,解压放到和pv3d的com,org几个包放在一起就可以了。

新手操作流程:

新建一个主包(就是一个文件包),把pv3d解压后的所有包放到这个包里面,我们就可以开始工作了。

打开flash CS3(或cs4)新建一个fla文件,以“test01.fla”为文件名保存在主包里,和刚才解压的pv3d的包在同一个包中。
下面属性框中:
祯数调到30fps;
窗口大小用400*400;
文件类:test01
(另外语言如果默认不是actionscript3需要改成actionscript3)

新建一个ActionScript文件,以保“test01.as”为文件名保存,里面写:
Package{
public class test01 extends Sprite {
public function test01():void {
}
}
}
知道as3的都知道,这个是基本的类结构吧。所有成品的pv3d程序,都需要继承于Sprite类。Test01里含有一个test01构造函数,程序自动会先找这个运行。

private var viewport:Viewport3D=new Viewport3D(400,400); //初始化窗口
private var scene:Scene3D =new Scene3D; //初始化场景
private var camera:FreeCamera3D =new FreeCamera3D; //初始化摄像机
private var renderer:BasicRenderEngine= new BasicRenderEngine; //初始化渲染器
以上就初始化好了4要素。

addChild(viewport)//记得把窗口加入的stage里,别忘了哟,所以要写上这句。

renderer.renderScene(scene,camera,viewport); //这句就可以渲染一张图勒。

但是我们肯定不想就渲染一张图就完毕,我们想能动起来,所以需要能1秒钟渲染30张左右。

addEventListener(Event.ENTER_FRAME,process); //所以加入一个enterframe
private function process(evt:Event):void {
renderer.renderScene(scene,camera,viewport); //把刚才那句渲染的句子放到enterframe这里面来,每秒渲染器就会尽最大努力刷新30次,我们的场景就会动起来了。
}

现在我们试着放一个球到场景里去。先在主包里面放一张任意的jpg图片(随便什么jpg图都可以,大小最好修改成128*128,256*256,1024*1024这种),命名为‘map.jpg’。

private var sphere:Sphere= new Sphere(new BitmapFileMaterial('map.jpg'),400,12,12);
//上面构造Sphere的4个参数分别代表:贴图,半径大小,横行段数,竖行段数
// new BitmapFileMaterial('map.jpg')是直接构建一个位图贴图的快捷写法。‘map.jpg’就是主包里面那张图。如果你非要把图放在其他包里,就写‘其它什么什么包/map.jpg’。
scene.addChild(sphere);//这里看清楚哟~是场景在addChild.


为了让我们的程序可以执行,我们必须在开始导入这些类。
import flash.display.Sprite;
import flash.events.Event;
import org.papervision3d.cameras.FreeCamera3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.objects.primitives.Sphere;

这时我们运行程序,就能看到一个我们可爱的小球(没有动的)了。

为了不至于错觉图像定住了(实际上没有定住,只是场景里面没有东西在动而已,渲染器仍然在以每秒30张图的速度刷新着一个相同位置的小球而已。),所以我们在enterframe的方法里加入一句。
sphere.rotationY+=1; //延Y轴以顺时针方向,小球每祯转1。(我们下次会专门讲到这方面的控制,别担心。)

ctrl+enter,运行发动!

兴奋吧,去泡杯茶小小的庆祝一下吧~站起来跳两下也可,身边有伙伴也可拥抱(别太久=_=)。
有空记得自己把玩一下里面的参数,多熟悉一下哦,加油!
有任何不清楚的地方,欢迎到讨论区发言。(无需注册)



DDM君
Flab3D.com

Flash3d研究所推荐的Pv3d傻瓜包下载 (无法右键另存,直接点击即可)
源文件下载 (无法右键另存,直接点击即可)