从球形绳的制作学习简单三维

本教程来自于《Flash MX 2004 游戏开发》(加拿大,Glen Rhodes,电子工业出版社)。

准备:以下三个实例的元件一样,只是代码不同,元件在库中,40×40像素的球体,链接名为:sphere

代码处的解释部分用红色字体表示

A.静态的三维绳制作

效果如下:

过程:

准备好元件,在主场景中第1帧输入代码:

d =800;
centerX = 275;
centerY = 200;

ang = 0;

for (var i = 0; i<1250; i++) {
 var nm = "sphere"+i;
 _root.attachMovie("sphere", nm, i);
    //我们首先定义了一个名为ang的变量,初始化为0,我们将在余弦波的循环体内使用该变量。

    接下来我们创建了1250个小球的MC,实例名分别为:sphere0,sphere1,sphere2,...等等。我们将这些MC添加到_root上,然后将它们深度级别定义为i,小球的深度稍后将会根据它们的Z值进行修改,以准确地反映它们的层次。
接下来:
 _root[nm].x = Math.cos(ang)*200;
 ang += 0.2;
 _root[nm].y = 400;
   这就是我们创建余弦波的方法。每个小球的X位置设置为Math.cos(ang)*200,这就意味着X将是介于-200和200之间的某个数值,前后循环变化。同样对每个成功创建的小球的ang加上0.2。
     注意变量x和y就是x和y,而不是_x和_y。记住这是三维空间内的虚拟位置,而不是屏幕坐标。

接下来:
 _root[nm].z = (i*50)+1400;
  var zfactor=d/_root[nm].z;
  //第一个小球将在(Z轴上)1400,第二个是1450。。。。,接下来我们计算小球的屏幕位置:
 _root[nm]._x=_root[nm].x*zfactor+centerX;
 _root[nm]._y=_root[nm].y*zfactor+centerY;

//接下来我们设置小球的比例,使得远的小球显得小些。
 _root[nm]._xscale=100*zfactor;
 _root[nm]._yscale=100*zfactor;

//最后 :
 _root[nm].swapDepths(Math.floor(100000-_root[nm].z));
 
}
//为什么使用swapDepths:这能使得较远的对象看起来在较近的对象之后。我们让具有较高Z值的小于有较低的深度。

如果我们禁用swapDepths函数,就会得到如下:
(看上去,远处的小球反而叠在近的小球的上面)

B.移动的球形绳

效果:

准备同A,

第1帧代码:

d = 1000;
centerX = 275;
centerY = 200;

ang = 0;

function project() {
 if (this.z<40) {
  this._visible = false;
 }
我们在这里执行了一个重要的检测。如果对象的Z值小于40,我们就认为它实际上是在用户的后方,因此我们根本就不必绘制它。想像小球向我们靠近,究竟是在哪一点上让我们注意 到小球的通过,而后到达我们的后侧而无法看到的呢?在我们的示例中,似乎40是较好的Z值。不要用“if(this.z<40)”,因为当某个小球的Z值达到0时,它是那么无限地接近观察者,看起来似乎无穷大。在Z值为40的位置,小球看上去相当大且距离相当近,因此可以认为这就是小球通过我们的点。
接下来:
else {
  this._visible = true;
  var zfactor = d/this.z;
等价于:this.z>0时我们让小球可见(小球不在我们的后方)
  this._x = this.x*zfactor+centerX;
  this._y = this.y*zfactor+centerY;

  this._xscale = 100*zfactor;
  this._yscale = 100*zfactor;

  this.swapDepths(Math.floor(100000-this.z));
 }
}

for (var i = 0; i<40; i++) {
 var nm = "sphere"+i;
 _root.attachMovie("sphere", nm, i);
 _root[nm].x = Math.cos(ang)*200;
 ang += 0.2;
 _root[nm].y = 400;
 _root[nm].z = (i*50)+d;

 _root[nm].project = project;   //将project函数添加到小球MC内名为project的方法之下。接下来,只要通过调用sphere.project()方法,即可以让小球改变自身位置、缩放比例和图层。
 
 _root[nm].onEnterFrame = function() {
  
  this.y-=3;
 
  this.project();
 };
}
//这就是我们将对象改变为动态的地方,首先将每个小球的y值(不是_y值)减1,然后调用每个小球的project方法,以促使屏幕更新。

把代码最后的:this.y-=3,改成this.x-=3;this.z-=3;试一下。

C.移动视点

到此为止,我们已经讨论了移动对象本身,现在让我们看一下怎样才能移动整个视图以使得用户的透视图看起来在运动,并且对象保持固定,而不是用户保持固定而对象在移动.

元件:一个40*40的球形,链接名:sphere

在主场景第一帧代码如下:

//xoff,yoff,zoff用来确定我们观察者所处的位置.
xoff=0;
yoff=0;
zoff=0;
d=1000;
centerX=275;
centerY=200;
ang=0;
function project()
{
if((this.z-zoff)<40)
{
this._visible=false;
}
else
{
this._visible=true;
var zfactor=d/(this.z-zoff);
this._x=(this.x-xoff)*zfactor+centerX;//在上一个效果中公式中少了一个xoff,因为现在的球位置都是相对于观察者的.
this._y=(this.y-yoff)*zfactor+centerY;

this._xscale=100*zfactor;
this._yscale=100*zfactor;

this.swapDepths(Math.floor(100000-(this.z-zoff)));//让近的球摆在上面.
}
}
//接下来用于生成小球....
for(var i=0;i<40;i++)
{
var nm="sphere"+i;
_root.attachMovie("sphere",nm,i);

_root[nm].x=Math.cos(ang)*200;
ang+=0.2;
_root[nm].y=100+Math.cos(i/3)*100;

_root[nm].z=(i*50)+d;
_root[nm].project=project;

_root[nm].onEnterFrame=project;
}
//建一个侦听器,侦听鼠标的活动.
mouseListener=new Object();
mouseListener.onMouseWheel=function(diff)
{
zoff+=(diff*50)
}
mouseListener.onMouseMove=function()
{
xoff=_xmouse-centerX;
yoff=_ymouse-centerY;
}
Mouse.addListener(mouseListener);

时间: 2025-01-29 13:54:54

从球形绳的制作学习简单三维的相关文章

Linux 数据可视化工具

Linux 上用来实现数据的图形可视化的应用程序有很多,从简单的 2-D 绘图到 3-D 制图,再到科学图形编程和图形模拟.幸运的是,这方面的工具有很多开放源码实现,包括 gnuplot.GNU Octave.Scilab.MayaVi.Maxima 等.每个工具都有自己的优缺点,并且都是针对不同的应用程序而设计的.对这些开放源码图形可视化工具进行一下探索,有助于我们更好地决定哪个工具最适合我们的应用程序. 内容 Gnuplot GNU Octave Scilab MayaVi Maxima 展

你会用吗?Linux五大数据可视化工具

可视化工具的简短列表 在本文中,将对很多流行的 Linux 数据可视化工具进行一下调查,并对其中一些工具进行更深入的探讨.例如,某个工具是否为进行数值计算而提供了一种语言?这个工具是交互式的还是提供了一种批处理模式来单独进行操作?可以使用这个工具进行图像或数字信号处理吗?这个工具是否提供了语言绑定来支持与用户应用程序的集成(例如 Python.Tcl.Java 编程语言等)?另外还将展示一些工具的图形化处理能力.最后,将分析每个工具的长处,从而帮助我们确定哪个工具最适合完成计算任务或数据可视化.

如何在C++里做出google earth里的导航面板

问题描述 如题,已经用c++.OpenGL做了一个可以浏览一个地球的简单三维场景,可以用键盘控制视点旋转.平移等,现在想在界面上加一个类似googleearth里的导航面板放在场景视图的拐角,用鼠标控制操作,并且美观一些,不想用mfc里的那种按钮==加图片或者直接画也是一种选择,但是比较麻烦和琐碎,所以请教各位大牛有没有好方法?比如什么控件.开发库之类的,或者好像c#可以做出漂亮的界面,但是能把c#实现的部分界面和c++合起来吗?谢谢! 解决方案 解决方案二:up解决方案三:该回复于2009-0

3dmax8.0简单造型+表面贴图制作三维笔记本

今天我们学习用3dsmax的简单造型和贴图制作三维笔记本. 先来看一下完成的效果图. 1.首先启动3dsmax8.0进入系统默认状态界面,选择创建面板中的"标准几何体"命令中的"长方体"命令在视图区中的"顶视图"中绘制一个高为7宽为130长为100的几何体做为本本的台面如图所示. 2.接着用鼠标选择建立好的几何体按住"shift"键拖动鼠标对模型图进行复制复制的数量为3,将复制的图形分别本本的显示器和屏幕以及本本的键盘面板,然

在Photoshop中简单的三维地球设计教程

在Photoshop中简单的三维地球设计教程 点击这里下载本教程使用的Photoshop文件 第1步 打开Photoshop,然后用矩形工具(U)的创建一个矩形,然后开始复制它,直到你拿到7列.使用分发水平居中作出同样的距离.之后,重复7矩形和旋转它们来创建一个网格 第2步 与椭圆选框工具创建一个圈像我在下面的图片选择. 第3步 转到滤镜>扭曲>球面化.使用100%的数额和正常模式. 第4步 切的选择和粘贴以获得全球的前脸. 第5步 去图层>图层样式>渐变叠加.应用线性模式点亮蓝色

Illustrator中的简单制作出三维效果教程

给各位Illustrator软件的使用者们来详细的解析分享一下简单制作出三维效果的教程. 教程分享: 1.从圆形创建椭圆 选择整个的圆形对象,用选择工具向上拖动定型框上底边中心的控制手柄,将圆形垂直压缩,取消对对象的选择.(图01)   图01 2.打开智能辅助线 从视图菜单中选择智能辅助线(View > Smart Guides).智能辅助线是Adobe Illustrator创建的临时网格,显示出路径.节点和角度.它可以帮助你选择锚点并吸附它们,这样,你就可以对对象进行精确的创建.编辑.移动

Illustrator设计简单的三维日历图标制作教程分享

给各位Illustrator软件的使用者们来详细的解析分享一下设计简单的三维日历图标的制作教程. 教程分享: 1.使用矩形工具(M),开始绘制一个正方形.   2.执行效果菜单>3D>旋转,旋转正方形.你不需要按下图输入数值,但是你一定要记住你所输入的数值,因为在我们之后添加文本时,你还要用到它(注:其实不记住也没关系的,只要旋转完成后,新建个图形样式就可以了,之后要再用到这个效果时只要再应用即可).确定后,执行对象菜单>扩展外观,扩展形状.   3.为了模拟日历的厚度,我们使用Illu

windows简单备忘

运行msconfig C:\Windows\System32\appwiz.cpl                                                // 程序---启动.添加或删除程序和 windows组件 C:\Windows\System32\control.exesystem                                 // 系统属性---查看有关计算机系统设置得基本信息 C:\Windows\System32\inetcpl.cpl   

大咖|英特尔中国研究院院长宋继强:我们是如何与李宇春打造全球第一支三维人脸特效的音乐视频的

上个月底,李宇春一支据说筹备时间长达6个月的mv正式发布.这首基于英特尔人工智能技术的MV,将电子曲风的浪漫情歌与尖端科技结合,一上线即火遍全网.在11月15日刚刚结束的2017英特尔人工智能大会上,英特尔中国研究院院长宋继强揭秘了这支有三维人脸特效的音乐视频是如何实现的. 此外,英特尔全球副总裁兼中国区总裁杨旭本次大会上宣告了英特尔在人工智能领域的三大战略方向:创新技术.广泛合作.推动应用.本次大会以全栈作为核心关键词,发布了从前端到后端的一系列最新研究成果. 例如,英特尔在近期推出了BigD