纳金网

标题: away3d4.0 新手入门系列教程第一讲 3D WORLD [打印本页]

作者: D调的华丽 时间: 2012-8-21 13:03
标题: away3d4.0 新手入门系列教程第一讲 3D WORLD
      网页的多媒体应用FLASH功不可没，在线视频，网页动画，网页游戏等等..FLASH MX FLASH8的出现在flash应用越来越广的时候，纵多闪客横空出世的时候，AS程序员可以用FLASH这个低门槛的软件做游戏的时候，大家心里或许都有遗憾。就是FLASH对于3D的无力。在AS2时代，那语言还不强大成熟的时候这简直是个高不可攀的梦想，仅有PV3D这样的先驱者做着尝试，后来Adobe收购了MM公司 FLASH也划于其旗下，AS3的横空出世，完善的OOP编程模式，特别是FP10里Z轴的出现让FLASH3D看到曙光了，一大批基于AS3的较为成熟的3D引擎也纷纷出现： A3D AWAY3D 等。后来在AODBE MAX大会上 AODOBE宣布了FlashPlayer基于GPU渲染的MOLEHILL(也就是后来的STAGE3D) ，当演示的时候 flashplayer里面绚丽的3D效果我相信看到的人都和我一样热血沸腾。在现在这个时代已经到来。FP11已经具备了GPU硬件加速功能。flashplayer实时渲染上十万个多边形模型已经不再话下。我相信大家都想看到在网页上玩CS。而更多的ASer应该更想动起手来制作属于自己的3D世界。在此我就将个人研究学习心得贡献出来，抛砖引玉，和大家共同学习，以下是我将用到的引擎和环境。
      1引擎：我将会用Away3d这款3D引擎来讲。因为其清楚的API和免费开源。
      2环境：个人比较懒。而且网上的配置教程也比较多，如果你是低版本的FLASH PRO 或者FLASH BUILD 那自行去找配置教程，我推荐就直接使用FLASH BUILD4.6，或者FLASH CS6  这样不用去配置环境。而AWAY3D的类文件我会放在附件里。

=================================华丽的分割线====================================

现在我们打开FLASH 或者 FLASH BUILD 开始动手开始创建我们的第一个3D世界

创建away3d的3D世界首先我们得了解away3d的几个基本类也是每次我们做的时候必须初始化的  View3D ,Scene3D ,Camera3D。这三个类我做下简单的解释
1 View3D 我们可以理解为一个窗子。就像我们站在屋外可以通过窗子看到屋内的家具。同理如果同时有多扇窗子，我们就可以看到多个屋内环境。在AWAY3D里面我也可以通过创建多个View3D来看到这个3D世界。
2 Scene3D  我还是拿屋子做比较。Scene3D就类似这个屋内这个空间。因为这个空间的存在。我们才能向里面放置家具。
3 Camera3D 这个就类似我们的眼睛。因为它我们才看到这个世界。我们改变Camera3D 的坐标遍可以从不同角度来观看这个3D世界

以上就是3个基础类。他们的创建方式如下
var _view:View3D=new View3D();
addChild(_view);

var _scene:Scene3D=new Scene3D();
_view.scene=_scene;

var _camera:Camera3D=new Camera3D();
_view.camera=_camera;

好了基本元素创建完毕最后我们需要用一个ENTER_FRAME来实时渲染这个View3D
_view.render();

下面我们来说说AWAY3D的基本模型
Away3d里面有我们常见的几何体。如球SphereGeometry
,盒子CubeGeometry
,平面Plane,圆柱体CylinderGeometry等等他们都在primitives类里面大家可以自行查阅。在这我就不一一列举了他们创建的方式也几乎一样。我现在教大家创建一个基本3D模型：球。
在away3d里创建模型需要3个条件 Mesh（网格） Mode（模型）  Material（贴图）
Mesh是一个显示对象我们的Mode 和Material就将放置其中然后显示出来
我们现在创建一个纯白色，半径为200，横向细分（细分就是模型的拓扑结构，细分越大每个多边形就越小模型也越光滑。相应的对电脑的压力也越大）为32 纵向细分为24的球，代码如下
var _material:ColorMaterial=new ColorMaterial(0xffffff);
var _sphere:SphereGeometry=new SphereGeometry(100,32,32);
var _sphereMesh:Mesh=new Mesh(_sphere,_material);
然后我们将Mesh addChild 到View3D里

_view.scene.addChild(_sphereMesh);

然后我们输出就可以看到一个白色的圆。如图

是不是很不立体啊呵呵因为没打灯光没有明暗关系

我们可以打一个灯光

var _dl

irectionalLight=new DirectionalLight();
var _dl2

irectionalLight=new DirectionalLight(.5,1,-1);
_dl2.ambient=.1
var _light:StaticLightPicker=new StaticLightPicker([_dl,_dl2]);

_sphereMesh.material.lightPicker=_light;

_view.scene.addChild(_dl);

然后我们输出就可以看到如下图

现在就有3D感觉了吧好吧今天教程到此为止。
全部的代码如下
package  {

import flash.display.MovieClip;
import away3d.containers.View3D;
import away3d.containers.Scene3D;
import away3d.cameras.Camera3D;
import flash.events.Event;
import flash.display.Sprite;
import away3d.materials.ColorMaterial;
import away3d.primitives.SphereGeometry;
import away3d.entities.Mesh;
import away3d.lights.DirectionalLight;
import away3d.materials.lightpickers.StaticLightPicker;

public class Main extends  Sprite {

  private var _view:View3D;

  private var _scene:Scene3D;

  private var _camera:Camera3D;

  private var _material:ColorMaterial;

  private var _sphere:SphereGeometry;

  private var _sphereMesh:Mesh;

  private var _dl

irectionalLight;
private var _dl2

irectionalLight;

  private var _light:StaticLightPicker;

  public function Main()
  {
_view=new View3D();
addChild(_view);

_scene=new Scene3D();
_view.scene=_scene;
_camera=new Camera3D();
_view.camera=_camera;
   _material=new ColorMaterial(0xffffff);
_sphere=new SphereGeometry(100,32,32);
_sphereMesh=new Mesh(_sphere,_material);
_view.scene.addChild(_sphereMesh);

_dl=new DirectionalLight();
_dl2=new DirectionalLight(.5,1,-1);
_dl2.ambient=.1
_light=new StaticLightPicker([_dl,_dl2]);

_sphereMesh.material.lightPicker=_light;

_view.scene.addChild(_dl);
this.addEventListener(Event.ENTER_FRAME,enterFrameFunction)
  }

  private function enterFrameFunction(evt:Event):void
  {
_view.render();
  }
}

}

在下一篇教程里我会给大家介绍一下light （灯光）

作者: wsk 时间: 2012-9-7 11:54
支持！！！！！！！！！！！！

作者: 如同 时间: 2012-9-7 17:21
总算找到中文教程了，好东西，支持！

作者: Gary-code 时间: 2012-9-24 09:19
楼主加油，极度支持，呵呵。

作者: ss33 时间: 2012-9-26 11:48
怎么到处away3d类都不一样啊。。。

作者: 小铁匠 时间: 2012-10-9 11:25
好教程谢谢！

作者: seedcll 时间: 2012-10-20 15:05
支持支持~~~~~~~~~~~~~~

作者: 凡客 时间: 2012-10-26 22:06
找地址

作者: 凡客 时间: 2012-10-29 19:47
给师傅顶顶人气

作者: 81537261 时间: 2012-12-4 17:00

看看~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

作者: 开拓者 时间: 2012-12-29 11:03
初学顶起！觉得楼主应该多发点帖子

作者: king 时间: 2013-1-10 11:23
吼吼~~~~~~~~~~

作者: 误码率 时间: 2013-1-15 10:35
哈哈学习一下啊！希望能多多支持类似的帖子

作者: xiongz 时间: 2013-1-15 11:11
支持一下·顶顶。。。

作者: love你我 时间: 2013-1-23 17:28
为什么我运行部起立法撒旦法师法撒撒反对爱死

作者: FeralSpiri 时间: 2013-2-26 14:40
好帖子,学习中.谢谢搂住

作者: blackCat 时间: 2013-2-26 23:02
求学习，求下组件。喵

作者: haoyi 时间: 2013-2-27 17:38
挺好的教程支持楼主继续发布新的教程

作者: 来学习 时间: 2013-2-28 20:18

必须顶~顶顶顶~顶顶顶~顶顶顶~顶顶顶~顶顶顶~顶顶顶~

作者: long 时间: 2013-3-1 13:39
学习中马克！！！！！！！！1

作者: kz2007 时间: 2014-10-22 13:31
给LZ顶顶人气

作者: zcylwzsj 时间: 2015-6-30 16:18
只少俩var已经很良心了，其他教程少一大堆东西，根本没法用
var _dl=new DirectionalLight();
var _dl2=new DirectionalLight(.5,1,-1);

欢迎光临纳金网 (http://go.narkii.com/club/)