zoukankan      html  css  js  c++  java
  • Away3D基础53D基本元素(1)

    原文地址:http://www.flashmagazine.com/Tutorials/detail/away3d_basics_5_-_primitives_part_1/

    在大多数3D软件中,3D基本元素是构成3D世界的基石。Away3D自带有17种3D基本元素以及一些别的帮助物。本教程将解释如何用这些3D基本元素实现非常酷的效果,比如音乐波形条、CMYK颜色分离等等。本教程同时会介绍away3D支持的两种代码书写方式。

    首先,不要小看这些3D基本元素。它们可能很简单,但它们非常有用!举个例子,一个简单的球(sphere)就可以胜任创建一个全景图的工作。当然你也可以用skybox这个3D基本元素来做一个立方体的全景图。

    在前两节关于3D基本元素的教程里,我们重点放在那些常用的3D基本元素上。在第三节关于3D基本元素的最后一节,我们会介绍非常规的3D基本元素,比如海龟。你说的是海龟?耶,在别的3D引擎里还有奶牛呢,away3D里有海龟这一3D基本元素。

    先决条件

    本教程建立在我们别的教程基础之上。假如你是flash3D菜鸟,你可能会先要去看看这些教程。举个例子,有些源文件,点击附带的as文件查看它们是如何工作的。所有这些例子都要用到一个Cover.as文件。这个文件是让教程里用到的flash影片不能同时工作,否则会拖垮你的电脑。如果你不确定如何使用这些例子,查看这个教程。

    教程里的一部分例子会用到“纹理”。关于纹理与材质我们会在后边教程详细介绍,如果要让代码在flash cs3里工作, 读这个教程.

    The Triangle(三角形)

    三角形是3D模型的基石。虽然单个三角形用处不大,但多个三角形组合在一块就可以生成任何模型。更幸运的是away3D允许从3D软件导入复杂的模型,这样就不用我们用一块块三角形去拼凑出复杂模型。三角形还有别的用途。三角形是3D基本元素中最小单元,它常用于象粒子效果那样的资源密集物。

    创建三角形你就要在3D空间里设置a\b\c三点。每点都是顶点(由x/y/z定位的点),如下:

    1.var tri:Triangle = new Triangle();tri.a = new Vertex(0,200,0);

    2.tri.b = new Vertex(100,0,0);tri.c = new Vertex(-100,0,0);tri.bothsides = true;

    3.view.scene.addChild(tri);

    下面是完整的三角形例子:

    movie:点击查看       as:Basic08_triangle.as

    注意,我们把三角形的"bothsides"属性设为true.假如不这样做,我们只能看到三角形的一面。

    The Plane(平面)

    平面是一个没有厚度的矩形。默认情况下,平面有两个三角形组成。但是你可以据需要增加三角形数量。平面是第二轻量级3D基本元素。但它却是完成一些任务的不二之选。当你创建“电视墙”时,用机个“平面”并将电影材质放于其上就可以了。平面在3D场景里做衬托地面也非常有用。看这个例子

    前面提到,away3d支持两种代码书写方式。你创建一个对象时,你可以把属性值传给构造函数,也可以在创建对象后设置属性。让我们看看这两种可能的方式。

    第一种方法可以在类构造函数里传递该类所有的参数。下面代码创建一个黑线白框平面。

    1.var myPlane:Plane = new Plane({material:"white#black",rotationX:-90});

    2.View.scene.addChild(myPlane);

    这种书写方式非常简洁。可以很容易指定所要的线框颜色。当然你还可以分开声明每个属性:

    1.var mat:WireColorMaterial = new WireColorMaterial();mat.color = 0xff0000;

    2.mat.wirecolor = 0x000000;var myPlane:Plane = new Plane();myPlane.material = mat;

    3.myPlane.rotationX = -90;View.scene.addChild(myPlane);

    这种方式要繁琐点,但许多开发者为了代码的可读性宁愿使用者种方式。使用何种方式完全由你决定。许多开发者对代码书写方式有强烈的个人偏好,为了讨好所有人away3D对两种方式都支持。

    你可能注意到,在这个例子里我们将平面沿X轴转了90度,这是因为平面没有厚度,只有转动让平面朝向我们才能看到它。

    你可以通过设置segment参数调整平面的复杂度:

    1.myPlane.segmentsW = 4;myPlane.segmentsH = 6;

    这句可以增加平面里的三角形密度,这对补偿因三角形过少而产生的失真。点击按钮体验这个问题:

    movie:点击查看        as:Textures.as

    下面让我们来看看使用平面的更有代表性的代码。下面你看到一套由Adobe 公司的John Nack 设计的cs3图标,点击、拖动,可以看到颜色分离。然后对齐外框让图片再次重合。

    movie:点击查看        as:Basic08_plane.as

    分离的四张透明png格式图片,模拟CMYK分离效果。这个是这样实现的:让HoverCam3D绕五个平面转动,C\M\Y\K和一个白色平面就像五张纸通过BlendMode.MULTIPLY组合.

    The Cube(立方体)

    立方体有高、宽、厚度。你可以为每个面设置不同的材质。

    movie:点击查看      as:Basic08_cube.as

    同样有两种代码书写方式:

    1.cube = new Cube({200,height:100,depth:300});

    你也可以写成更具可读性:

    1.var cube:Cube = new Cube();cube.width = 200;cube.height = 100;cube.depth = 300;

    那种方式由你决定。使用cubeMaterials属性设置六个面(top, bottom, left, right, front and back)的材质,就像下面代码那样:

    1.cube.cubeMaterials.left = new ColorMaterial(0xffffff,{alpha:.3});

    每个3D物体都可以沿x/y/z轴进行一些移动、旋转等操作,如下:

    1.cube.x = 200;cube.rotationY = 45;

    更详细的关于3D物体的操作介绍看这个教程。现在我们将立方体用于项目中。下面是音乐波形显示条的例子。波形条的高度、颜色和滤镜都是根据波形变化发生变化。

    movie:点击查看         as:Basic08_cube_music.as

    蓝色的立方体描述右声道而红色立方体描述的是左声道。每个声道的波谱被平分成八份,每个立方体表现声谱的一部分情况。每部分的最大值存在一个数组里并设置渐变。每次检测到新的最大值时,我们就应用模糊滤镜并增加尺寸与颜色。查看源码分析详细情况。

  • 相关阅读:
    python基础总结二
    HTTP和HTTPS的区别
    通过HTTP请求响应过程了解HTTP协议
    稳定性测试+易用性测试
    容错测试点
    功能测试思考点
    功能测试-UI测试思考点
    字符编码-11
    字典+再识函数-8
    web API的概念
  • 原文地址:https://www.cnblogs.com/nooon/p/1458547.html
Copyright © 2011-2022 走看看