ColorCode 3-D 和 Cycore在Cult3D5.3中联手推出了首个动态3D立体创作解决方案。
原始地址：http://www.wildtangent.com/developer/howtos/QuickStartTutorial/index.html
相关软件
软件开发包: Web Driver 3.0 SDK
编辑软件: WTStudio Beta 4
观看软件: WTStudio Level Viewer
第一章-什么是WildTangent网络驱动
WildTangent网络驱动为你提供了一个强大的程序开发环境,它能让你在程序和网页中充分发挥microsoft的DirectXTM库的威力。使用该网络驱动配合脚本语言或者你所选择的程序语言,你能创造出动态,眩目的3d效果(可以包含二维平面图形,声音以及三维模型)。用户将沉浸于你创造的三维世界之中,并可以用他们的键盘和鼠标来与三维场景进行交互。
不仅仅简单地是个外包装
WildTangent不仅仅简单地将DirectX的功能进行封装或者重新包装。它提供了简化而且强大的程序开发环境,使你能够快速上手。你将不用花数月时间来掌握DirectX,就可以在几小时之内创造出令人眼花缭乱的效果。而且该网络驱动能和Microsoft和Netscape浏览器完美兼容。
为网络而生
虽然你可以在任何支持ActiveXTM控件的开发环境中使用WildTangent,比如Microsoft的Visual Basic或者Visual C++,但是WildTangent事实上是为网络而生的。只要下载一个300k大小的控件,WildTangent就能使用数据流技术,让你的用户在一个场景完全下载之前与该场景进行交互。
大范围的应用
WildTangent的应用范围可以从简单的网站广告(能实现真正交互并且与gif动画相比占用更少的带宽)到网络3D游戏。WildTangent充分发挥现在一般低端电脑上就具备的硬件支持的3D图像引擎的强大功能来最大限度的减轻cpu运算的负担。现在我们已经能够使用vbscript或javascript等脚本语言来创造出平滑,动感,交互的三维世界了。
第二章-你需要什么样的准备
你需要什么准备
the WildTangent SDK 2.0(开发包)
如果你看到这里,你可能已经安装了SDK,如果还没安装,请点击这里。这个开发包将让你很快熟悉如何使用WildTangent(该开发包包含很多演示,教程)。
Microsoft DirectX
你需要一台可以运行microsoft directx5.0或者更高版本的电脑。如果你使用的是Windows 98,该操作系统就已经安装directx了。如果你的电脑上还没有安directx,请点击这里下载。
4.0以上版本的浏览器
WildTangent需要4.0版本以上的ie和netscape浏览器。
脚本语言基础
要用WildTangent创造出交互效果,你就必须具备一定的脚本语言基础。你可以使用任何支持你的浏览器的脚本语言来配合WildTangent。不过考虑到浏览器兼容性的问题,你最好使用javascript。假如你还不具备一定的脚本基础的话,你可以到这些网站寻找教程:microsoft,echoecho.com,netscape或者webmonkey。
开发工具
对于开发工具，每个人他自己的喜好,从简单的文本编辑器到强大的编辑软件,文本编辑器简单上手,但是如果要实现更加复杂的功能或者想使开发工作变得容易点,你就不能只用它了。在这里，我们向你隆重推荐WildTangent的最佳选择allaire。
什么是你不需要的
对3d概念的了解
你不需要了解3d图形概念-这些概念我们会在以后的教程中介绍到。WildTangent是为每个人设计的,从三维高手到对3d一无所知的网页设计师。
最新硬件
WildTangent在拥有专业三维显卡的电脑的表现是惊人的,新电脑上一般都配有这种显卡,如果你没有的话,你也同样能够使用WildTangent 。
第三章-加足马力,跟我来吧
挑选一种语言
现在我们来看一些代码。WildTangent一个最强大的功能就是与高级脚本语言(比如javascript和vbscript)的交互能力。这些脚本语言就象机器人一样,能够配合WildTangent创造出丰富多彩的3d场景。在这里我们将使用脚本语言来开始创建页面:
<script language="javascript" type="text/javascript">
// 当页面加载的时候运行begin()
window.onload = begin;
// 简单的浏览器检测
var ie = (document.all) ? true : false;
var ns = (document.layers) ? true : false;
// 申明全局变量
function begin()
{
// 在这里放置我们的代码
}
</script>
在代码的开头加上这么一句是很重要的。虽然这不是必要的,但我们还是建议在页面还未完全加载的时候加上这么一句来初始化网页的内容，这不仅使代码更加清晰，而且能够确保在接下来的代码编写过程中不会出现异常现象。被命名为begin的这个函数后面的内容就是我们以后在代码编写中将要调用的内容。通过这段代码我们还可以检测到用户的浏览器是ie还是netscape,我们必须知道这一点，因为他们在处理代码的方式上是有很大的区别的。大部分开发者使用自己喜欢的方式检测浏览器类型，我们在这里使用一种简便的方法。
[下一页]
连接WildTangent网络驱动
到现在为止，我们的页面还是一片空白，现在到了添加一些脚本代码来把驱动器嵌入网页的时候了，该驱动能以ActiveX控件和Netscape插件两种方式嵌入网页，如果你只需要该驱动支持ie浏览器，那你就只需要使用<object>置标来插入驱动，但是netscape用户将看不到网页的内容，因为netscape不支持ActiveX控件。因此netscape以插件的方式使用<embed>置标来代替<object>插入驱动。也许你会想<embed>可以适用于ie和netscape两种浏览器，因为ie浏览器既支持ActiveX控件又支持netscape插件。但是我们发现事实并不是这样的，因此我们在网页中同时使用两种置标。每种浏览器将使用自己支持和忽略自己不支持的置标。
<object
id="wtScene"
classid="CLSID:FA13A9FA-CA9B-11D2-9780-00104B242EA3"
width="200"
height="200"
<embed>
type="application/x-WildTangent-web-driver"
name="wtScene"
width="200"
height="200">
</embed>
</object>
id参数(或者embed置标种的name参数)赋予WildTangent驱动一个标识，这样我们就可以再以后的脚本中来使用它－这个标识可以按你的喜好自己选择，但在页面中必须是唯一的。由于我们在代码中同时使用了<object>和<embed>两种置标，这样就同时兼容了两种浏览器，可以同时照顾到两种不同浏览器的用户。
好了，现在我们的网页中已经有了基本的脚本代码了。完整的基本页面如下：
<html>
<body>
<script language="javascript" type="text/javascript">
// 当页面加载的时候运行begin()
window.onload = begin;
// 简单的浏览器检测
var ie = (document.all) ? true : false;
var ns = (document.layers) ? true : false;
// 申明全局变量
function begin()
{
// 在这里放置我们的代码
}
</script>
<object
id="wtScene"
classid="CLSID:FA13A9FA-CA9B-11D2-9780-00104B242EA3"
width="200"
height="200"
<embed>
type="application/x-WildTangent-web-driver"
name="wtScene"
width="200"
height="200">
</embed>
</object>
</body>
</html>
现在把代码粘贴到文本文件中，然后存为html格式上传到服务器，可以看看效果了。如果你使用ie浏览器的话你会看到页面上有一块黑色区域－虽然没什么好兴奋的，但这是一个很不错的开始，不是吗？现在你可以用一些东西来填充那个区域了－比如说三维模型。
第四章－设置场景
完全黑的
猜想你一定进展得很顺利吧，如果是那样得话，你就可以在页面上欣赏到你的劳动成果了。既然我们已经设置了场景，那就使用脚本语言来让场景中的物体动起来吧。等等，在开始行动之前，我们要为我们的作品提供一些基本的物件—一个舞台，一些灯光和一个摄像机。
wildtangent提供了许多对象使你可以用脚本进行控制。为了简单起见，我们只在教程中使用一些基础的对象。这些对象的前身是WT对象。WT对象提供了许多方法（或函数），你除了可以使用这些方法（或函数）来定制常规环境，也可以用来创造其他子对象。我们已经通过在页面中插入驱动器来隐式创造了一个wt对象，但是现在我们还无法在我们的代码中控制该对象。我们将声明一些变量来追踪这些物体。以下代码将帮助我们做到这一点：
// 定义全局变量
var wt, stage, camera;
var group, model;
function begin()
{
// 设定wt的参考值
wt = document.WTScene;
世界就是个舞台
我们作品的第一个组成部分是舞台，The WTStage object为我们在场景中添加的所有对象扮演一个父对象的角色
// 创建一个舞台
stage = wt.createStage();
注意，我们使用先前创建的全局变量调用WT对象来创建舞台，用的是wt对象的
createStage方法
摄像机
我们作品的下一个组成部分是摄像机，由WTCamera对象来创建。WTCamera对象为你提供了一些方法来定位摄像机以及实现其他一些功能。比如设置放大级，到现在为止我们仅仅涉及到了基础的部分，因此我们还需要创建摄像机，设置它的视角，然后对它进行定位。设置视角是为了告诉摄像机应该在驱动窗口的哪一部分渲染。这样虽然不可能让多个摄像机共享一个窗口，却可以让一个摄像机充满整个窗口。如果你没有设置视角，那驱动器就会自动为你设置，但结果的好坏是不可预测的。为了安全起见，应该养成在创建摄像机以后就设置视角的习惯。不像大多数对象由WT对象创建，摄像机是由WTStage创建并自动添加到其中的，因此一旦我们定位了摄像机，它就开始发挥功能。
// ...和摄像机
camera = stage.createCamera();
camera.setViewRect(0, 0, 200, 200);
// 摄像机被自动添加到舞台中
// 但我们需要对它进行正确定位
camera.setPosition (0, 0, -2);
你放置在舞台中的任何物体均可以用x,y,z坐标定义。使用X坐标左右移动物体，负数可以将物体放置在中心偏左的位置，正数则可以将物体放置在中心偏右的位置。Y坐标可以上下移动物体，负数在中心下面，正数则在中心上面。Z坐标就是"3D"中的3，其主要作用是将物体移近或移离浏览者。在3d术语中，这被称为"左手坐标体系",但我们所关心的是它是如何工作的。
也许对于3d爱好者来说最困难是习惯这些定位规则和这种坐标体系，这种坐标体系是没有单位的。无单位到底是一个什么样的概念呢，比如说"1","5"或"1000"对于驱动器来说并不代表什么具体的东西—不像"1英里"或者"5英寸".这些值只是用来表明它们之间的相互关系。在这个教程中，我们将使物体和单位变小，然后将摄像机向后移离场景一小段距离以便我们看到它。摄像机的位置的坐标是X=0, Y=0, Z=-2.
虽然我们在这个例子中仅仅用到一个摄像机，但你却可以在场景中看到多个摄像机。事实上，在摄像机之间转换视点或者在场景中移动摄像机的能力是3d视觉化效果的一个重要特色。每个摄像机在场景中都有自己的控制范围。就我们这个例子来说，我们的单个摄像机使用的是默认的全视角。
灯光
最后，我们需要一些灯光。适当的灯光能够创建或者打破一个场景，关于这方面的内容，那就说来话长了，我们将跳过。我们将为场景添加两种类型的灯光，环境光和点光。不管灯光位置怎么样或者物体是否是亮的，环境光都会穿透场景，我们可以把环境光看成是一种"背景光"，这种光为场景提供微光并且最小化由于亮与暗之间的尖锐过渡造成的场景不真实。关于背景光最应该注意的是不要添加过量，因为过于明亮的背景光将破坏场景，使其看上去不够立体。
点光是一种酷似星星的光，这种光由内往外均匀发散。以下是这两种光的代码：
// 创建灯光
ambientLight = wt.createLight(0); file://tWTLightAmbient
pointLight = wt.createLight(1); file://tWTLightPoint
// ...并且添加到舞台上
stage.addObject(ambientLight);
stage.addObject(pointLight);
[下一页]
我们使用WT的createLight方法来创建灯光并使用一个参数来选择灯光的类型，然后用WTStage的addObject方法将它们添加到舞台中。正如我们先前提到的那样，要使所有物体最终可见，他们都要被添加到舞台中。摄像机也许是个例外，因为它们是被自动添加到舞台中的，因此除了摄像机以外的物体你都要手动添加。
接下来我们来设置环境光的颜色。光的颜色不仅决定了它实际的颜色——不管它是红色，蓝色还是粉红色等等-它还决定了它的强度。由于我们的灯光使用的是最为强烈的默认的白色，这样就会使用我们的场景看起来不够自然，而且缺乏立体感。我们一般用R(red),G(green),B(blue)三原色的值来给物体赋予颜色，值的范围从0到255
// 创建高强光
// 将光调小一点
ambientLight.setColor(100, 100, 100);
pointLight.setColor(150, 150, 150);
最后轮到定位光了，环境光的特性决定了它的定位是独立的，而点光却不是这样的。我们将使用WTLight的setPosition方法来在摄像机的后面放置光
// 环境光的定位是独立的,
// 但是我们将把点光放置在"灯臂"上
pointLight.setPosition(100, 100, -100);
让它动起来吧
最后，我们还缺一句重要的代码来让物体动起来
// 渲染场景
wt.start();
start方法的主要作用是通知驱动器渲染我们所设置的场景。到现在为止我们的工作还未完成，虽然有了舞台，灯光，摄像机，但是我们还没有添加动作。我们将在下一章的内容中涉及到这方面的知识。
第五章
添加动作
这是平面图,若要观看三维效果请点击这里
我们在场景中可以向模型添加动作。模型的定义是当被驱动器渲染时可以在场景中创建物体的三维几何体。这些模型有的结构是很复杂的,表面包含许多节点,这被称为多边形。这些多边形被排列成网状,最后就构成了一个模型。虽然这些东西乍听上去有点深奥。但是幸运的是,我们大多数人不必象那些三维大师那样用专业的三维软件(如3D StudioTM 或TrueSpaceTM)去处理模型的细节问题,那些工作交给他们好了。当然,如果你愿意的话,你也以用那些专业的软件来建模,或者你也可以向一些软件商(比如viewpoint)购买定制好的模型。在后面的教学中我们将接触到更加精细的模型,但是目前为止我们的目的只是要让立方体动起来,因此我们使用的WildTangent内置的原始模型。使用wt对象的方法,我们就可以创建立方体,圆锥体...:
// 添加一些代码使物体可见
model = wt.createBox(.5, .5, .5);
group = wt.createGroup();
stage.addObject(group);
group.attach(model);
好了,模型自身已经用wt的createBox方法创建好了,但是要将立方体真正引入场景，我们还有一些工作需要完成，wtModel对象本身并不具备定位功能。定位功能是由wtGroup对象提供的。首先，我们使用wt的createGroup方法来创建组。正如平常一样，我们使用wtStage的addObject方法来添加物体到舞台中最后，我们使用wt的createBox来创建立方体并使用wtGroup的attach方法来与它的组关联起来
让物体充满生气
如果你现在打开页面，你会发现你所创建的立方体看上去毫无生气。为了让整个场景活起来，我们还需要添加一些颜色和运动
// 让你的物体看上去更有生气些
model.setColor(255, 0, 0);
group.setConstantRotation(1, 1, 1, 120);
wtModel的setColor方法的用法是显而易见的，它的用法与先前介绍的在光的用法上是一样的。在这里必须说明一点，我们这里并不是设置立方体的移动，而是设置先前它所关联的那个组的移动。wtGroup的setConstantRotation方法的主要是作用是让该组围绕它的 X,Y,Z轴每秒同时旋转120度。
回放
到这里，我们的第一篇教程就完成了。目前为止，我们已经能够：
1.在页面中插入驱动器
2.创建舞台
3.创建和定位摄像机
4.创建，设置和定位灯光
5.创建原始模型，并给其上色，利用脚本使其动起来
我们把教程中所用到的代码全部集中在一起了，现在把下面的代码保存为htm文件，然后上传到服务器，你就可以看到炫目的效果了，还等什么，刚快行动吧。
<html>
<body>
<script language="javascript" type="text/javascript">
// 定义并创建全局变量
// 当页面加载后将运行begin()
window.onload = begin;
// 检测浏览器类型
var ie = (document.all) ? true : false;
var ns = (document.layers) ? true : false;
var wt, stage, camera;
var ambientLight, pointLight;
var boxGroup, box;
function begin()
{
// 设定wt的参考值
wt = document.wtScene;
// 创建一个舞台
stage = wt.createStage();
// ...和摄像机
camera = stage.createCamera();
camera.setViewRect(0, 0, 200, 200);
// 摄像机被自动添加到舞台中
// 但我们需要对它进行正确定位
camera.setPosition (0, 0, -2);
// 创建灯光
ambientLight = wt.createLight(0); file://twtLightAmbient
pointLight = wt.createLight(1); file://twtLightPoint
file://...并且添加到舞台上
stage.addObject(ambientLight);
stage.addObject(pointLight);
// 创建高强光,
// 将光调小一点
ambientLight.setColor(100, 100, 100);
pointLight.setColor(150, 150, 150);
// 环境光的定位是独立的,,
// 但是我们将把点光放置在"灯臂"上
pointLight.setPosition(100, 100, -100);
// 渲染场景
wt.start();
// ...添加一些代码使物体可见
boxGroup = wt.createGroup();
stage.addObject(boxGroup);
box = wt.createBox(.5, .5, .5);
boxGroup.attach(box);
// 添加一些颜色和运动
box.setColor(255, 0, 0);
boxGroup.setConstantRotation(1, 1, 1, 120);
}
</script>
<object
id="wtScene"
classid="CLSID:FA13A9FA-CA9B-11D2-9780-00104B242EA3"
width="200"
height="200">
<embed
type="application/x-WildTangent-web-driver"
name="wtScene"
width="200"
height="200">
</embed>
</object>
</body>
</html>
