纳金网

标题: 制作能够利用鼠标拖拽实现360度旋转的3D人体模型flash文件 [打印本页]

作者: xiongz 时间: 2013-5-9 16:31
标题: 制作能够利用鼠标拖拽实现360度旋转的3D人体模型flash文件
前段时间，由于要对参加挑战杯的系统进行改善，老师要求我们在系统当中添加一个可旋转的3D人体模型，于是俺陷入了深深的思考当中。之前一直都没有接触过3D模型的制作，而且老师这回给的时间又特紧，当时那个急呀~于是开始大量地查资料，初步了解了一些3D开发的工具，比如3D游戏开发引擎：UDK，unity3D，maya，3DMAX等等，可是很快就被我一一地排除了，主要是因为我觉得用这些开发工具做出来的3D模型很难利用，不知道怎么将其嵌套到网页当中（可能是可以的，只是我才疏学浅，不好展开……）。于是，我又投入到下一个工具的寻找当中……

1.寻找3D人体模型

a）首先肯定要准备好3D人体模型，我当时由于时间原因，压根就没功夫去学习那些3D开发引擎，去建模，去绘制什么的。于是在网上狂找，看有没有开发引擎提供了现成的而且比较好看的3D人体模型。居然真的让我找到了，就是Poser软件，我下的是Poser Pro2012，里面有很多现成的3D人体模型，而且还比较逼真。我用的是Ryan中的Tomo_LowRes：

[attach]29122[/attach]

b）选定模型之后就是要想办法将3D人体模型导出了，最好是导出成图片格式，方便后期的加工。这里Poser Pro2012就提供了这样的功能，而且不止能导出图片格式，还可以导出视频AVI和flash的swf格式，很是好用。由于要做成360度的效果，所以要导出360度角度的图片。

在Poser的下面有一个控制当前帧的控制条，在这里可以设置你要导出的帧数，对应每一帧要挪动人体模型到恰当的角度，可以在右侧的Transform里做调整。

[attach]29123[/attach]
做好每一帧的模型定位后，可以点击控制条上的播放按钮，预览一下效果，确定可以后再导出图片；

导出图片的步骤如下：

1）点击人体模型上方的小三角按钮出现一个子菜单：

[attach]29124[/attach]

2）找到Render Setting，点击进去设置导出的格式：

[attach]29125[/attach]

3）找到Movie Settings,设置Format成images，然后点Make Movie，选路径保存即可，一些导出的格式控制大家可以自己琢磨一下。

2.在flash中实现鼠标拖拽360旋转功能

a）在flash中先新建一个场景，设置好大小，要与之前导出的图片大小一致。然后新建一个影片剪辑，可以按Ctrl+F8快捷键新建，并命名为mc：

[attach]29126[/attach]

b）向mc中导入所有你刚才从Poser导出的图片，然后设置第一帧的动作为stop：

[attach]29127[/attach]

c）然后调到场景界面，将影片剪辑mc拖到场景中：

[attach]29128[/attach]
d）在第一帧中添加如下的代码：

var speed:Number=0.1;//速度参数，修改次参数可以调整速度
var long:int=mc.totalFrames;//总帧数
var newX:Number;
var frame:Number=mc.currentFrame;//当前是第几帧
stage.addEventListener(MouseEvent.MOUSE_DOWN,mdown);
stage.addEventListener(MouseEvent.MOUSE_UP,mup);
function mdown(e:MouseEvent):void {
newX=e.stageX;
stage.addEventListener(MouseEvent.MOUSE_MOVE,mmove);
}
function mup(e:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE,mmove);
}
function mmove(e:MouseEvent):void {
if ((frame+(e.stageX-newX)*speed)>=1) {
frame=((frame+(e.stageX-newX)*speed)-1)%long+1;
} else if ((frame+(e.stageX-newX)*speed)>0) {
frame=long+frame+(e.stageX-newX)*speed;
} else {
frame=long-Math.abs(frame+(e.stageX-newX)*speed)%long;
}
newX=e.stageX;
mc.gotoAndStop(int(frame));
}

e）然后就可以Ctrl+Enter看一下效果啦，如果出现mc没有定义的情况，就先在场景中选定mc元件，然后在右边属性框中添加名称为mc即可。效果如下：

[attach]29121[/attach]

作者: fgdf#dfg 时间: 2013-5-13 08:38
好好学习！！！！！！！！！！！

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