查看: 3109|回复: 3
打印 上一主题 下一主题

[Alternativa3D] Alternativa3D教程之一——Hello, Alternativa3D

[复制链接]
cdl51    

83

主题

0

听众

955

积分

初级设计师

Rank: 3Rank: 3

纳金币
681
精华
11

最佳新人 活跃会员 热心会员 灌水之王 突出贡献

跳转到指定楼层
楼主
发表于 2013-12-18 09:02:15 |只看该作者 |倒序浏览
In this tutorial we will create simple 3d-scene to understand scene building basics in Alternativa3D, step by step.
在这个向导中,我们通过建立简单的3D立方体来一步步了解基于Alternativa3D的场景构建。
So, let’s create new ActionScript Project in Flex Builder (or in other software you’re using), and name it, say, HelloAlternativa3D. Then connect all SWC-libraries from Alternativa3D package.
那么,我们在Flex Builder中新建一个ActionScript项目(或者你正在使用的其他软件),命名为HelloAlternativa3D,然后把Alternativa3D包中所有的SWC库都建立连接。
Our project will have only one file with following code inside:
我们的项目只包含一个文件,里面的代码如下:
HelloAlternativa3D.as
  1. package {  
  2.     import alternativa.engine3d.controllers.CameraController;  
  3.     import alternativa.engine3d.core.Camera3D;  
  4.     import alternativa.engine3d.core.Object3D;  
  5.     import alternativa.engine3d.core.Scene3D;  
  6.     import alternativa.engine3d.display.View;  
  7.     import alternativa.engine3d.materials.WireMaterial;  
  8.     import alternativa.engine3d.primitives.Box;  
  9.     import alternativa.utils.Fps;  
  10.    
  11.     import flash.display.Sprite;  
  12.     import flash.display.StageAlign;  
  13.     import flash.display.StageScaleMode;  
  14.     import flash.events.Event;  
  15.    
  16.     [SWF(backgroundColor="#000000", frameRate="100")]  
  17.    
  18.     public class HelloAlternativa3D extends Sprite  {  
  19.    
  20.         private var scene:Scene3D;  
  21.         private var view:View;  
  22.         private var camera:Camera3D;  
  23.         private var cameraController:CameraController;  
  24.         private var box:Box;  
  25.    
  26.         public function HelloAlternativa3D()    {  
  27.             addEventListener(Event.ADDED_TO_STAGE, init);  
  28.         }  
  29.    
  30.         public function init(e:Event): void {  
  31.             removeEventListener(Event.ADDED_TO_STAGE, init);  
  32.    
  33.             stage.scaleMode = StageScaleMode.NO_SCALE;  
  34.             stage.align = StageAlign.TOP_LEFT;  
  35.    
  36.             // Creating scene——建立场景  
  37.             scene = new Scene3D();  
  38.             scene.root = new Object3D();  
  39.             box = new Box(100, 100, 100, 3, 3, 3);  
  40.             box.cloneMaterialToAllSurfaces(new WireMaterial(1, 0xFFFFFF));  
  41.             scene.root.addChild(box);  
  42.    
  43.             // Adding camera and view——添加摄像机和视窗  
  44.             camera = new Camera3D();  
  45.             camera.x = 100;  
  46.             camera.y = -150;  
  47.             camera.z = 100;  
  48.             scene.root.addChild(camera);  
  49.    
  50.             view = new View();  
  51.             addChild(view);  
  52.             view.camera = camera;  
  53.    
  54.             // Connecting camera controller——与“摄像机控制器”建立连接  
  55.             cameraController = new CameraController(stage);  
  56.             cameraController.camera = camera;  
  57.             cameraController.setDefaultBindings();  
  58.             cameraController.checkCollisions = true;  
  59.             cameraController.collisionRadius = 20;  
  60.             cameraController.lookAt(box.coords);  
  61.             cameraController.controlsEnabled = true;  
  62.    
  63.             // FPS display launch——FPS 运转显示  
  64.             FPS.init(stage);  
  65.    
  66.             stage.addEventListener(Event.RESIZE, onResize);  
  67.             stage.addEventListener(Event.ENTER_FRAME, onEnterFrame);  
  68.             onResize(null);  
  69.         }  
  70.    
  71.         private function onResize(e:Event):void {  
  72.             view.width = stage.stageWidth;  
  73.             view.height = stage.stageHeight;  
  74.         }  
  75.    
  76.         private function onEnterFrame(e:Event):void {  
  77.             // User input processing——控制器的输入过程  
  78.             cameraController.processInput();  
  79.             // Scene calculating——场景计算  
  80.             scene.calculate();  
  81.         }  
  82.     }  
  83. }
复制代码
We’ll look through the code later, now just try to copy it to your project, compile and run it.
稍后我们浏览一下代码,现在试着拷贝代码到你的项目中,编译、运行它。
You’ll see this (it is a link to SWF here):
You can control camera using “arrows” and WASD, Space and Shift. Mousewheel controls camera field of view (FOV).
你可以通过鼠标和按键“WASD、Space和Shift”来控制摄像机,鼠标滚轮控制摄像机的视野。
Creating scene——创建场景
Let’s review code line by line. At first we create scene and put cube primitive to it:
我们一行行的温习一下代码。首先我们建立了场景并且把一个原始的立方体加入其中:
  1. // Create scene object. Scene is a container which have everything else inside.  
  2. //建立场景对象,它是里面一切对象的容器。  
  3. scene = new Scene3D();  
  4. // Set root object for scene hierarchy. Root object coordinate system becomes scene global coordinate system.  
  5. //为阶层式场景设置根对象,根对象的坐标系会成为场景全局坐标系。  
  6. scene.root = new Object3D();  
  7. // Create cube primitive——建立原始立方体。  
  8. box = new Box(100, 100, 100, 3, 3, 3);  
  9. // Set material which draws primitive edges——利用原始的边缘绘制材质。  
  10. box.cloneMaterialToAllSurfaces(new WireMaterial(1, 0xFFFFFF));  
  11. // Add primitive to a scene——为场景添加这个原始对象。  
  12. scene.root.addChild(box);
复制代码
Adding camera——添加摄像机
Scene is ready, so we want to see result. We have to put camera on the scene and connect it to view:
场景已经准备好了,我们想看一下结果。我们必须把摄像机放入场景中并且与视窗建立连接:
  1. // Create camera instance and set it's coordinates  
  2. //建立摄像机实例并设置坐标系。  
  3. camera = new Camera3D();  
  4. camera.x = 100;  
  5. camera.y = -150;  
  6. camera.z = 100;  
  7. // Add camera to the scene——向场景中添加摄像机  
  8. scene.root.addChild(camera);  
  9. // Create a view and connect it to the camera  
  10. //建立视窗并与摄像机建立连接  
  11. view = new View();  
  12. addChild(view);  
  13. view.camera = camera;
复制代码
Camera revival——摄像机运动(不知道这样翻译是否恰当)
Let’s use controller from library. It implements basic movement and rotation camera controls, with basic collision detection:
我们使用引擎库里面的控制器,它是一个基于碰撞检测的控制摄像机基本移动、旋转的工具:
  1. // Create controller and connect camera——建立控制器并连接摄像机  
  2. cameraController = new CameraController(stage);  
  3. cameraController.camera = camera;  
  4. // Set default control keys——设置默认控制键  
  5. cameraController.setDefaultBindings();  
  6. // Turn on camera collision detection——打开摄像机碰撞检测  
  7. cameraController.checkCollisions = true;  
  8. // Set collision detection radius for camera——设置摄像机碰撞检测弧度  
  9. cameraController.collisionRadius = 20;  
  10. // Aim camera at the cube primitive——把摄像机定位到原始立方体上  
  11. cameraController.lookAt(box.coords);  
  12. // Activate camera controls——摄像机激活控制  
  13. cameraController.controlsEnabled = true;
复制代码
Latest touch——最新的接触
So, scene is ready, camera is set, we just have to “push the button”.
那么,场景已经就绪了,摄像机也设置好了,我们必须“按下按钮”。
  1. public function HelloAlternativa3D() {  
  2.    
  3.     //...  
  4.    
  5.     // Initialize FPS display  
  6.     FPS.init(stage);  
  7.     // This function is for view size changes during player window changes  
  8.     addEventListener(Event.RESIZE, onResize);  
  9.     // This function enables user input processing and scene calculation every frame  
  10.     stage.addEventListener(Event.ENTER_FRAME, onEnterFrame);  
  11.     // Initial view size  
  12.     onResize(null);  
  13. }  
  14.    
  15. private function onResize(e:Event):void {  
  16.     // Set view size equal to player window size  
  17.     view.width = stage.stageWidth;  
  18.     view.height = stage.stageHeight;  
  19. }  
  20.    
  21. private function onEnterFrame(e:Event):void {  
  22.     // User input processing  
  23.     cameraController.processInput();  
  24.     // Scene calculating. Scene will be recalculated and all changes will be redrawed in camera.  
  25.     scene.calculate();  
  26. }
复制代码
Conclusion——结论
So, we just got basic understanding about scene creation process, and showing it on screen. We’ll learn different aspects of Alternativa3D workflow in next tutorials.
我们刚才基本了解了场景的建立过程,而且显示在了屏幕上。在下一节向导中,我们会学习到Alternativa3D工作流中其他方面的知识。

分享到: QQ好友和群QQ好友和群 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
转播转播0 分享淘帖0 收藏收藏0 支持支持0 反对反对0
回复

使用道具 举报

无效楼层,该帖已经被删除

0

主题

2

听众

3238

积分

中级设计师

Rank: 5Rank: 5

纳金币
0
精华
0

最佳新人 活跃会员 热心会员 灌水之王 突出贡献

板凳
发表于 2014-2-28 12:24:54 |只看该作者
感谢分享
回复

使用道具 举报

0

主题

1

听众

2458

积分

中级设计师

Rank: 5Rank: 5

纳金币
0
精华
0

最佳新人 活跃会员 热心会员 灌水之王 突出贡献

地板
发表于 2014-3-26 20:46:41 |只看该作者
楼主就是给力
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

手机版|纳金网 ( 闽ICP备2021016425号-2/3

GMT+8, 2024-9-22 04:37 , Processed in 0.089053 second(s), 31 queries .

Powered by Discuz!-创意设计 X2.5

© 2008-2019 Narkii Inc.

回顶部