首页|行业资讯|企业名录|周边产品|数字城市|增强现实|工业仿真|解决方案|虚拟医疗|行业仿真|图形处理|军事战场
资讯首页
行业资讯 >> 学习教程>>正文
Turntool官方操作手册中英文对照
2010年6月20日    评论:    分享:

    A Brief introduction to TurnTool

 

    TurnTool is a 3D technology, designed to transform your scenes, carefully modeled in your favorite 3D modeling application such as 3ds max, into fully interactive presentations in real-time 3D on the Internet.

 

    TurnTool integrates with the modeling application, which makes working with it, as seamless as possible. When finished, your model is only a click away from your homepage.

 

    In addition to creating smooth running visualizations from complex models, TurnTool offers the option to make them truly interactive in ways only your imagination limits.

 

 

    TurnTool简要介绍

 

    TurnTool是一种将景物设计制作成三维动画,并在互联网上充分展示其互动性的三维技术。在TurnTool的模型运用中,一切看似不可能的任务皆有可能。在安装完毕后, 您只需在您的主页上轻轻一点,即能看到模型。TurnTool除了能为复杂的模型建立流畅的视觉效果外, 还为您提供超乎想象的真实互动。

 

    Preparations

 

    This is the first in a series of TurnTool tutorials. Our objective is to model a handheld device based on a photograph using techniques suitable for real-time models. You will make the model interactive and allow a viewer to switch the device on/off. You will learn to control your scene's animations, and make the scene respond to different user-generated events.

 

    The tutorial assumes at least basic familiarity with 3D Studio Max (max), and a copy of this is required to perform the steps herein. Adobe Photoshop is used in the tutorial as well.You also need to install the TurnToolBox. Go to TurnTool’s web page: www.turntool.com and download the latest version.

 

    准备步骤

 

    这是运行TurnTool系列的第一步。 我们的对象是制作一个以照片使用技术为基础,适合实时操作的模型。您可以使模型展开互动, 观看者也可以任意开启或关闭操作。 您将学会控制您自己的动画效果,并使景象根据不同运行环境做出应答。一些辅助项目能最低限度地让你熟悉3D Studio Max (max)软件,您需要按以下步骤进行操作,并用及Adobe Photoshop软件。如果您需要安装TURNTOOL BOX软件,请登陆网站www.turntool.com下载最新版本。

 

    Run it and follow the on-screen instructions for the installation.

 

    If you wish you can add the TurnToolBox to the button set in the utilities panel: Open max, go to the "Utilities" panel and use the "Configure Button Sets" button to add the "TurnToolBox" button to the current button set.You can now use this button to open the TurnTool rollout panel.

 

    运行软件并按照屏幕显示的指令进行安装。

 

    您也可以把TurnToolBox图标加进utilities版面。

 

    打开3ds maxUtilities Panel,点击Configure Button Sets图标,把TurnToolBox加进现有图标设置中。

 

    现在您可以点击这个按钮来打开TurnTool首次演示的版面。

 

    Part One: Modeling

 

    You will use a reference picture as a visual guide to roughly model a handheld computer/PDA, and apply 3Ds Max’ MeshSmooth to increase the model’s resolution. Start 3Ds Max. Go to the top viewport and make a plane.Move it to Absolute World Center: Make sure the plane is selected and right click Select and Move (keyboard shortcut: [F12]) (figure 1):

 

    第一部分:模型制作

 

    您将用一张参考图片作为视觉导向,粗略制作一个手提电脑/PDA模型。运用3ds max MeshSmooth来增加模型的解决方案。进入顶端的viewport做一个平面,再将其移至Absolute World Center:确定该平面已被选中,右击Select and Move(快捷键[F12])(步骤1

 

    Figure 1: Move button

 

    Enter 0,0in all directions (figure 2):

 

    Figure 2: Move Dialog

 

    Go to the Modify Panel and change the proportions of the plane to 200 units long x 100 units wide (figure 3).

 

    Figure 3: Modify Panel Button

 

    Open the Material Editor (keyboard shortcut: [m]), and rename the first material to PDA_picture.

 

    Apply the bitmap ‘PDA_front.tif’ as diffuse color map (figure 4).

 

    Figure 4: PDA_front.tif  Assign the material to the plane and click Show Map in Viewport in the Material Editor (figure 5):

 

    Figure 5: Show map button

 

    The result should look like this (figure 6):

 

    1.移动图标

 

    从各方位进入0.0(见2.

 

    2.移动对话框

 

    进入Modify Pane,将平面的长宽比例改为200X100(见3.

 

    3.修改平面图标

 

    打开Material Editor(快捷键[m]),重命名第一个材料至PDA图片。应用PDA_front.tif位图作为散播的色彩图。(见4.

 

    4.PDA_front.tif 位图

 

    添加指令,把材料放入平面,进入Material Editor中的Viewport,点击Show Map。(见5.

 

    5.Show map图标

 

    您可以看到如下设置:

 

    Figure 6: Plane with map

 

    Freeze the plane by right clicking it select Properties from the popup menu. Uncheck ‘Show Frozen in Grey’and check ‘Freeze’. Click ‘OK’. This way you won’t select the plane by mistake.Make a box covering the entire PDA on the picture, apart from the antenna. Make the height of the box 10,0.Rename the box: PDA.Right click the box and choose Properties from the popup menu. Check ‘See-Through’.

 

    6.带图平面

 

    右击锁定平面,从弹出的菜单中选中Properties. 除去Show Frozen in Grey处的勾,并在Freeze处打勾,这样能够避免误选平面.用一个10.0高(除去天线的部分)的框遮住图片中整个PDA的部分,把框重命名为PDA,右击该框,从弹出的菜单中选择Properties,在See-Through处打勾。

 

    Turn on Edged Faces in the perspective viewport by right clicking in the top left hand corner of the viewport and select ‘Edged Faces’ from the popup menu.This enables you to get a better overview of the divisions of the mesh.

 

    Right click the box and select ‘Convert To: > Convert to Editable Poly’.

 

    In the Modify Panel under Selection, choose subobject ‘Edge’ (keyboard shortcut [2]).

 

    右击左上角的viewport,在透视角度中开启Edged Faces,从弹出的菜单中选择‘Edged Faces’,这能使您更清楚地看到网络分布图的概貌。右击该窗并选择‘Convert To: > Convert to Editable Poly‘,在Selection下的Modify Panel中选择子对象‘Edge’(快捷键[2]

 

    Figure 7: Subobject 'Edge' Button

 

    Select the four edges lengthwise on the box, and click Connect Option box in the Modify Panel (figure 8).

 

    7. 子对象‘Edge’键

 

    选择纵向框内的四个Edge,在Modify Panel中点击Connect Option box(步骤8

 

    Figure 8: Connect Button

 

    Set ‘Connect Edge Segments’ to 2 and click OK (figure 9).

 

    8. Connect

 

    把‘Connect Edge Segments’设置到2,点击OK (步骤9

 

    Figure 9: Connect Edges Dialog

 

    This will add more faces to the model to add extra definition.

 

    Choose subobject ‘Vertex’ (keyboard shortcut [1]).

 

    Move the 8 new vertices so they match figure 10:

 

    9. Connect Edges对话

 

    这能给模型添加更多界面,提高模型清晰度。

 

    选择子对象‘Vertex’(快捷键1),移动 8 new vertices,进入步骤10

 

    Figure 10: Move vertices like this

 

    TIP: As a general rule, use the transform gizmo (figure 11) to move, scale and rotate restricted to one direction. For example click and drag the green arrow to move an object. This will ensure symmetry in the model and prevent unforeseen movements in the three planes then working in 3d viewports:

 

    10.移动vertices

 

    建议:按照常规,一般通过转换形式来移动尺寸和不同方向的旋转尺度(步骤11)例如,点击并移动绿色箭头至一个对象,这将确保模型的对称性,和3维视口相比较而言,也能避免三个平面内无法预计的运动。

 

    Figure 11: Transform Gismo

 

    Choose subobject ‘Polygon’ (keyboard shortcut [4]).

 

    Select the face that is to be the screen. Click Inset Option box (figure 12) in the Modify Panel.

 

    11. 转换器

 

    选择子对象‘Polygon’(快捷键[4]

 

    选择要变成屏的界面,点击Modify Panel 中的Inset Option box (步骤12)

 

    Figure 12: Inset Button

 

    Set the Inset amount to 5,0 and click OK.

 

    Repeat the Inset with the same amount.

 

    Move the middle face downwards approximately -2,5 units.

 

    In the top viewport, choose subobject ‘Vertex’ and tweak the vertices around the screen to match the underlying  picture.

 

    TIP: Turn off ‘See-Through’ from time to time to evaluate your model.

 

    On subobject level ‘Edge’, select the two vertical lower edges. Click the Chamfer Option box (figure 13):

 

    12. Inset

 

    设置Inset系数为5.0, 点击OK。重复设置相同系数。向下移动中间界面大约2.5个单位。在顶端视口中选择子对象‘Vertex’,在屏幕上拖动顶点,使之与下划线图片契合。建议:每隔一段时间应关闭‘See-Through’,以便对模型进行评估。在子对象中的‘Edge’里选择2个纵向低端边缘,点击Chamfer Option box(步骤13

 

    Figure 13: Chamfer Button

 

    Set the Chamfer amount to 20,0.

 

    13. Chamfer

 

    设置Chamfer系数至20,0

 

    Figure 14: Chamfer Dialog

 

    On subobject level ‘Vertex’; select the two vertices marked on figure 15 and click Connect (figure 8):

 

    14. Chamfer对话

 

    在子对象‘Vertex’中,选2个顶点继续操作步骤15,点击Connect (步骤 8)

 

    Figure 15: Connect these two vertices

 

   In the perspective viewport, select the two lower vertices on the model and move them down the z-axis (figure 16).

 

    TIP: You can evaluate the final mesh by applying the modifier MeshSmooth (Menu: Modifiers > Subdivision Surfaces > MeshSmooth) with Iterations set to 2. Remove the modifier afterwards. The screen won’t look right at this point in this tutorial.

 

    15. 连接2个顶端

 

    在透视视口中选择2个模型上的低位顶点,将其下移至Z (步骤16)建议:通过使用修改器MeshSmooth,您可以评估最终的网图(Menu: Modifiers > SubdivisionSurfaces > MeshSmooth) Iterations设置为2,随后删除修改器,此时屏幕显示异常。

 

    Figure 16: Adjusting Vertex Positions

 

    Repeat the Chamfer on the top corner opposite the antenna.

 

    Go to subobject level ‘Polygon’ and select the top face. In the top viewport, cut the face in two using the quickslice from the Modify Panel. Turn on Snap (keyboard shortcut: [s]) to ensure a vertical cut.

 

    Move the vertices around the antenna according to figure 17.

 

   16.调整顶点位置

 

   重复操作位于天线对面角落的Chamfer 进入子对象 Polygon ,选择顶部界面,运用Modify Panel中的quickslice,在顶部视口将界面一分为二。打开 Snap (快捷键: [s]) ,确保垂直切割。围绕天线移动顶点,参照步骤17

 

   Figure 17: Move the vertices around the antenna

 

   Select the antenna face and extrude it with Extrusion Height 25 (figures 18 & 19).

  

   17. 围绕天线移动顶点

 

   选择天线界面,用Extrusion拉伸至高度25(步骤18 &19

 

   Figure 18: Extrude Polygons Dialog

 

   18. Extrude Polygons对话

 

   Figure 19: Extruded Antenna

 

   Adjust the antenna's vertices to match the reference picture.

 

   Select the edge in the inner corner where the antenna meets the body (figure 20). Click the Chamfer Option box

 

   Use it twice: Enter Chamfer Amount 2.0, click Apply then enter Chamfer Amount 0,75. Click OK.

 

   19. 拉伸天线

 

   调整天线的顶点以符合参考图片。选择天线和主体交接的内角边(步骤20),点击Chamfer Option box。进入Chamfer Amount 2.0,点击Apply,再进入Chamfer Amount 0,75,点击OK.

 

   Figure 20: Chamfering a Corner

 

   Select the entire top and lower outer edges on the model, including the antenna (figure 21).

 

   Use Chamfer Option box to refine the model with Chamfer Amount 2,0. Click OK.

 

   20. 去除一个角

 

   选择模型整个顶部和低外边,包括天线部分(步骤21)。使用Chamfer Option box来精炼Chamfer Amount 2,0.模型,点击OK

 

   Figure 21: Chamfering Outer Edges

 

   Select the inner corners on the screen (figure 22). Refine them using Chamfer Amount 2,0 and 0,75.

 

   Repeat the Chamfer process on the outer edge of the screen. Use Chamfer Amount 0,75.

 

   21. 去处外边

 

   选择屏幕上的内角(步骤22),用Chamfer Amount 2,0 and 0,75.进行精细化。

 

   使用Chamfer Amount 0,75.,重复去除内角步骤于屏幕上的外边。

 

   Figure 22: Chamfering Edges of the Screen

 

   TIP: Select one of the edges of the screen and click Loop (figure 23). It expands the selection as far as possible,in alignment with selected edges. This saves you many mouse clicks.

 

   22. 去处屏幕的边

 

   建议:选择屏幕的一条边,点击LOOP(步骤23),这将最大化地扩大和已选边准成一直线的选择,同时省去您大量的点击。

 

   Figure 23: Loop Button

 

   Before applying the final MeshSmooth, you will need to refine the model a bit more to ensure a proper meshing.

 

   The modifier MeshSmooth have some problems with long thin faces, so you will have to do the following:

 

   On subobject level, ‘Polygon’ select all of the faces (keyboard shortcut [CTRL] + [A]) of the model.

 

   Turn on Snap.

 

   In the top viewport, use the QuickSlice (figure 24) to increase face division according to figure 25:

 

   23. LOOP

 

   在运用最后的MeshSmooth之前,您需要再一次细化模型,以确保网图正确。修改器MeshSmooth在狭长界面中也存在一些问题,您需要做以下几项:

 

   在子对象中‘Polygon’中选择模型内的所有界面(快捷键 [CTRL] + [A])。打开Snap,在顶部视口使用QuickSlice(步骤24)以加强界面分割,详见步骤25

 

   Figure 24: QuickSlice Button

 

   Figure 25: Divide the faces like this

 

   You will need the screen as a separate object. Select the faces of the screen and detach it (figures 26 & 27).

 

   24. QuickSlice

 

   25.分割界面

 

   您将需要另外一个独立的屏幕,选择屏幕界面,并从中脱离出去。(步骤 26 & 27)

 

Figure 26: Detach Button

 

Name the new object ‘Screen’.

 

26. Detach

 

给新屏幕命名。

 

Figure 27: Detach the Screen

 

Apply the modifier Meshsmooth (Menu: Modifiers > Subdivision Surfaces > MeshSmooth) with Iterations set to 2. Tweak the model further using MeshSmooth subobject Vertex and Edge.Go back and fourth between MeshSmooth and Editable Poly, edit, until you got the model right according to the reference picture.

 

TIP: It is important to achieve a good balance between model detail and the number of polygons used. If there are too many polygons in a model, performance will drop drastically. If there are too few, the model will not look satisfactory. There is no specific amount of polygons to use, it depends on other factors as well; such as the number of light sources, the power of the computer to show it, textures etc. Test the model to find the right amount of detail.

 

27.从屏幕中脱离

 

Iterations设置为2,运用修改器Meshsmooth (Menu: Modifiers > Subdivision Surfaces > MeshSmooth)。如果您对模型的轮廓感到满意,右击并选择Convert To: > Convert to Editable Poly,接着可以继续创作完整的模型了。用QuickSlice切断天线,并作为一个单独带有材料的物体,从整体中脱离。

 

Part Two: TurnToolBox

 

In this part you will prepare the model before exporting it to the Internet with the TurnToolBox. Open the Material Editor (keyboard shortcut: [M]), and assign a new material to the PDA.Set the Specular Level and Glossiness to be a little shiny (figure 28).

 

第二部分:TurnTool Box

 

在这个部分中,在把模型用TurnToolBox连网之前,您需要做一些准备工作。打开Material Editor (keyboard shortcut: [M]),,指定一个给PDA的新材料。设置Specular Level and Glossiness,增加光亮度(步骤28

 

Figure 28: Setting Material Specular Properties

 

Assign a reflection bitmap to the material, and choose the picture ‘refmap_PDA.png’.

 

28. 设置Material Specular Properties

 

给材料指定一个反映位图,选择图片‘refmap_PDA.png

 

Figure 29: refmap_PDA.png

 

TIP: When working with texture maps for real time display (e.g. TurnTool), it is important to make sure thewidth and height of the image used are numbers that are powers of two; i.e. 2n, where n is any positive wholenumber or 0. This is simply a requirement of most video hardware around. If this requirement is not observed,the TurnTool viewer will resize the picture, if necessary, at runtime without any kind of filtering, the result of which is not always pretty. If math isn't your strong side, an easy way to remember these numbers is to start at 1 and keep doubling it until you reach a size close to the desired. Like this: 1,2,4,8,16,32,64,128,256,512 etc.

 

29. refmap_PDA.png

 

建议: 当正在显示纹理图时(例如.TurnTool),很重要的一点就是要确定使用图像的宽和高的2个系数:2n中的n可以是任何一个正全数,或者0.这是多数影像硬件的基本要求。如果这项要求无法执行,TurnTool取景器会在必要的情况下重新定义图片尺寸。但在运行过程中,没有通过过滤的图片往往不竟如人意。如果数学不是您的强项,要想记住这些数字也有一个简单的方法:1开始,双倍乘数,直至接近理想中的数字。例如:1,2,4,8,16,32,64,128,256,512

 

If you have an image where this isn't true, simply load it into Photoshop and stretch it to the nearest match of the above numbers. Don't worry about stretching proportions. Width and height need not be the same. E.g. an image that is 200x400 should be resized to 256x512 or 128x256.TIP: Be mindful of the size of textures you use. It is wise to size the images used to the exact needs of the model,

 

如果你的图像不够真实,可把它载入Photoshop,找到和上面最搭配的数字。您不用担心沿展之后发生的比例变化,宽度和高度可以有所改变。例如:一个200x400图像,重定义尺寸后应该为256x512128x256。建议:留意你在纹理图中使用的尺寸,以模型的实际需要来测量图像尺寸是明智之举。

 

because large textures will take up more video memory, which is a limited resource. If more video memory is used than is available on a computer, performance will drop drastically. Often very small textures will do the job admirably. Note: The size of the image file or level of compression has no effect whatsoever on the amount of video memory required. To calculate the video memory requirements of a texture that conforms to the rule of 2n from above, do this calculation: width X height X 4. If the texture is mipmapped (advanced option), add 33%

to this.

 

因为大型纹理会占用更多有限的影像记忆存储,如果已用记忆存储大于电脑所能承受的范围,图像效果会急剧下降,而小型纹理经常能完成出色的任务。备注:图像文件的尺寸或压缩程度对影像文件的要求没有任何影响。对纹理中影像记忆要求的必须符合上述2n的规则,可这样计算:宽 X X 4。如果纹理已被优先选择,计算时需增加30%

 

To test it in TurnTool, you’ll have to set up (at least) one camera and light source.For the test purpose, set up two cameras and a few Omni Lights.Tip: Position one of the lights close to Camera01 and link them together using ‘Select and Link’ from the top Toolbar (figure 30). This will make the light follow the camera in TurnTool, and make sure that the model always is proper lit from the point of view.

 

TurnTool进行测试,您需要建立至少一个镜头和光源。为了测试方便,您需要建立2个镜头和几个整体光源。建议:将一个光源放在*01号镜头边,点击顶部工具条中的‘Select and Link’将他们相互连接(步骤30)。这能使光在TurnTool中跟随镜头移动,确保模型从视口中得到的光亮正常。

 

Figure 30: Link Button

 

Now you’re ready to do a test export to TurnTool.

 

Go to the Utilities Panel and open the TurnTool panel. If you haven't added a TurnToolBox button, click theMore…’ button and choose TurnToolBox (figure 31).

 

30. Link

 

现在你已经准备好要对TurnTool测试了,找到Utilities版面,打开TurnTool版面。如果你还没有添加TurnToolBox键,请点击‘More…’并选择TurnToolBox(步骤31

 

Figure 31: Finding the TurnToolBox

 

In the rollout click ‘Export’. The TurnToolBox will now export the geometry, merge the bitmaps into the file and create an HTML-file.

 

You can see your result so far by pressing the ‘View’ - button. This will open the HTML-file in which the TurnTool file (tnt-file) is embedded.

 

Add a new material to the buttons and choose the picture ‘refmap_chrome.png’ as reflection map for a chrome effect.

 

31. 寻找 TurnToolBox

 

在首次演示中点击‘Export’,接着TurnToolBox将输出几何图形。合并位图并放入文件,建立一个HTML文件。这时按‘View’键,您可看到结果。HTML文件将在嵌入TurnTool文件的地方被打开。给按键添加一个新材料,并选择图片‘refmap_chrome.png’作为印色的参考图片。

 

Figure 32: refmap_chrome.png

 

Make a green on button and a red off button, both without reflection map. In addition, make the navigation button between them.

 

Select the Object ‘Screen’. Assign a new material to it and set the file 'Screen.ifl' as Diffuse Map. The IFL contains a list of images, the two screenshots (screen_0000.png and screen_0001.png), and acts like a movie with just two frames. We will control this movie from the script later. Find the bottom rollout in the Material Editor where you can control the playback of the IFL. Set the timing according to figure 33.

 

32. refmap_chrome.png Link

 

在没有参考图片的情况下,按下绿色的‘开’和红色的‘关’,并在中间按下导航键。选择对象‘Screen’,添加一个新材料,把文件'Screen.ifl'设置为Diffuse MapIFL包括一列图像和两个screenshots (screen_0000.png and screen_0001.png),就像1个有着2个框架的电影一样,我们将通过文字控制电影。把鼠标拉到Material Editor底部,控制IFL的播放。设定记时,见步骤33

 

Figure 33: Setting the playback timing

 

TIP: For more information on IFL-files, see your Max documentation.

 

To make an animation of the screen fading in when turned on, you’ll have to create a black copy of the screen on top of it, and animate it to fade to transparent:Make a copy of the Screen, and move it slightly up the z-axis so it is positioned right above the original screen.Rename it ‘ScreenCover’. Assign a new all black material to it.

 

Go to frame 10.

 

Enable ‘Auto Key’ by clicking the button (figure 34), or keyboard shortcut [N].

33. 设定playback计时

 

建议:获取更多IFL文件信息,请见MAX文件。如果要给动画做一个渐进效果,你需要在屏幕顶端建立一份黑色的拷贝,把它变成透明色。再做一份屏幕的拷贝,慢慢移动Z轴到原屏幕的上方。重命名‘ScreenCover’,加入一个新的黑色材料,进入frame 10。运用‘Auto Key’,可通过点击(见步骤34)或使用快捷键[N]

 

Figure 34: Auto Key Button

 

Open the Material Editor and type the value 0 in the Opacity field (figure 35).

 

34. Auto Key

 

打开Material Editor,在Opacity field键入value 0。(步骤35

 

Figure 35: Setting Opacity

 

When ‘Auto Key’ is enabled, will the program auto generate a key in frame 0 with the previous value 100 and anew in the current frame with the value typed in.Click the ‘Auto Key’ to disable it again.Move the animation slider to make sure the display is off at frame 0 and fully on at frame 10.

 

Figure 35. 设置Opacity

 

当‘Auto Key’可使用时,程序会同时在旧制式frame 0value 100)和新制式(新键入)中自动运行密钥。再次点击‘Auto Key’可停止运行。移动动画,确定显示位置开启在frame 10frame 0则关闭。

 

Figure 36: Display Is On

 

To add clickable interaction in TurnTool, you will have to create a dummy sphere, which will define the area where mouse click will be detected.Make a Sphere and set the number of Segments to 4 to keep the number of polygons down. TurnTool will still detect mouse clicks on a full sphere.

Adjust the size (radius) and position the sphere over the on button. Rename the sphere to ‘on’ Repeat the process with the other two buttons, one called ‘off’ and one called ‘navigation’. See figure 37.

 

Figure 36. 启动展示 

 

TurnTool中加入可点击的互动,建立一个可定义鼠标点击区域的dummy sphere。建立Spherenumber of Segments设定为4,以确定多边形。TurnTool会用鼠标继续跟踪full sphere。调整半径尺寸,点击on,sphere定位,重命名sphere。以相同步骤重复另外2个键,‘off’和‘navigation’,见步骤37

 

 

Figure 37: Adding Control Objects For the Buttons. Yes, those are spheres

 

With all the buttons selected, go to the TurnToolBox and scroll all the way down to the Event rollout and click to open it:Check ‘Mouse Click’ and 'Mouse Enter & Exit' as shown in figure 38.

 

37. 为按键加入控制对象

 

选定按键,进入TurnToolBox,将鼠标下拉至Event rollout,点击打开:在Mouse Click‘和'Mouse Enter & Exit'前打勾,如步骤38所示

 

Figure 38: Setting Up Mouse Events

 

Scroll to the Miscellaneous rollout and check Invisible > Permanent. This will prevent TurnTool from rendering the buttons (figure 39).

 

38. 设置Mouse Events

 

鼠标移动至Miscellaneous rollout,在Invisible > Permanent前打勾,防止TurnTool影响按键(步骤39

 

Figure 39: Making the Buttons Invisible

 

Because you want to control all the animations in the scene yourself, you must disable the automatic playback.Scroll To the 'Scene Display' rollout and remove the check mark from 'Play Default Animation' (figure 40).

 

39. 隐藏按键

 

由于您要自己手动控制所有动画,所以必须阻止软件的自动播放功能。光标移至'Scene Display',在'Play Default Animation'处把勾去掉。

 

Figure 40: Setting Default Animation Behavior

 

Export the model.

 

To create a shadow under the PDA, you need to create a suitable texture.

 

Hide or delete all objects below the PDA.

 

Go to the top Viewport and zoom/place the viewpoint so that the PDA fills most of the width of the Viewport.

 

Leave about a third of the PDA's width on both sides free (figure 41).

40. 设置错误动画行为

 

导出模型,给PDA建立新阴影。你需要建立一个合适的纹理,隐藏或删除PDA下的所有对象。进入top Viewport,拉伸镜头,给视口定位,这样能给PDA填充宽度。在两边空白处预留出1/3 PDA的宽度。

 

Figure 41: Position the View Like This

 

Render a still image, 128 pixels wide and 256 pixels high (note the 2n dimensions).

 

We are only interested in the alpha channel of the resulting image. Click the alpha channel button to review the results (figure 42).

 

41. 视觉定位

 

先给出一个宽为128象素,高为256象素的静止图像(2维),我们仅需要结果图像的alpha channel,点击alpha channel键查看结果。(步骤42

 

Figure 42: Alpha Channel of the Rendering

 

Save the image as a PNG file with RGB 24 bit and Alpha channel. Name the file 'ShadowMap.png'.Open the picture in Photoshop.Select the RGB channels in the channels window.Change the background color to black.Choose the marquee tool (keyboard shortcut [M]) and select the entire image (keyboard shortcut [Ctrl] + [A]).Press the delete key. See figure 43.

 

42. 给出alpha channel

 

Alpha channel,以PNG 文件格式保存图像,命名文件为'ShadowMap.png'。在Photoshop中打开图片,在channels窗口选择RGB channels。把背景改为黑色,选择marquee工具(快捷键[M]),选定整个图像(快捷键[Ctrl] + [A]),按delete,见步骤43

 

Figure 43: Delete All Contents of the RGB Channels Using a Black Background Color Now the entire image should be completely black.

 

The alpha channel should remain unchanged.Select the Alpha channel from the channels window. It will appear as a white silhouette on a black background.A black pixel means completely transparent and a white pixel means completely opaque. Anything in between is partially transparent. We want to make the shadow a little diffuse.Deselect all Menu: Select > Deselect Use Menu: Filter > Blur > Gaussian Blur … to soften up the edges of the shadow. Use a Radius around 8 (figure 44).

 

43. 删除所有RGB Channels内黑色背景的内容

 

现在整个图像都显示为黑色,alpha channel保持不变。在channel窗口中选择Alpha channel,使黑色背景上出现白色影阴轮廓。此时black pixel指的是全透明,white pixel指全非透明,而中间内容则为部分透明。我们需要把阴影部分向外散播,删除lMenu: Select > Deselect,选用Filter > Blur > Gaussian Blur,这样能柔化阴影的边缘,Radius选用8。(步骤44

 

Figure 44: Blurred Alpha Channel

 

Save the picture.

 

Go back to max and create a plane in the top view, 220 long and 110 wide. Move it so that it is clearly below the PDA, 10 units down the Z-axis should do it.Enter the Material editor and make a new material in an empty slot. Make the diffuse color of the material completely black.

Assign the 'ShadowMap.png' file to the Opacity channel, open the Bitmap Parameters of the map and set the 'Mono Channel Output' to Alpha. This is not really used by TurnTool, but it ensures that max renders itcorrectly (figure 45).

 

44. 模糊Alpha Channel

 

保存图片。回到最大化,在top view创建一个220110宽的新平面,把它移动至PDA下,Z轴下方10个单位。进入Material editor,在空槽内使用新材料,把材料的散播色完全变黑。在Opacity channel指定'ShadowMap.png'文件,打开Bitmap Parameters,为Alpha选择'Mono Channel Output'。这步并非用于TurnTool,而是确保最大化时图像清晰。

 

Figure 45: Setting Rendering Parameters For Shadow Map

 

You can play around with the size and position of the shadow plane to place it just right. When you are  satisfied, export as TNT file and view the results (figure 46).

 

45. 设置Rendering Parameters For Shadow Map

 

随意选择或调试阴影平面的尺寸和位置直至最佳状态,导出TNT 文件,查看结果。(步骤46

 

Figure 46: The Finished Model

 

46. 完成模型

 

Part Three: Scripting

 

In this part you will modify the JavaScript of the HTML file to make the model respond to mouse actions.

 

Open your file manager (like explorer) and browse to the generated files. Make a copy of the HTML file (in thesame folder) and rename it to something else. Open the copy in a text editor (such as Notepad). If you are not familiar with HTML code, the contents of this file may seem a bit overwhelming at first. We will concentrate our attention on the script section.

 

Skeleton handler functions for all TurnTool events are already present. This is what we want to do: The device should switch on/off when the on/off buttons are clicked.

 

Find the section looking like this:

 

第三部分:Scripting

 

在这部分中,您将修改HTML fileJavaScript,使模型对鼠标活动做出应答。用文件管理器(如explorer)浏览生成文件。在同文件夹内做一份HTML文件拷贝,注意另外命名。用文本编辑器打开拷贝(如Notepad)。如果您对HTML码比较生疏,一开始您会发现文本内容难以理解,这时我们可以集中精力在文稿部分。Skeleton handler的功能已经展示了所有TurnTool的活动需求。我们希望的是,当点击on/off键时,设备也能随即打开/关闭。操作部分如下:

 

Figure 47: Old onClick Function

 

This is the function "onClick". It is automatically activated each time every time the viewer clicks an object in the scene with the "Mouse Click" event property. If you want more details on JavaScript programming the Internet Explorer, a complete reference can be found in Microsoft's Developer Network http://msdn.microsoft.com.For now, replace the text above with this code:

 

47. onClick的原有功能

 

每当viewer点击图像中的一个景象时,onClick会被自动激活。想获得更多JavaScript程序信息,可以登陆http://msdn.microsoft.com获得更详尽内容。

 

Figure 48: New onClick Function

 

Briefly described, If the object clicked was 'navigate' this piece of code sets the frame of the object 'Screen' to 0 or 1 depending on what it currently is. If the object clicked was 'on' or 'off', it activates the animation of the object 'ScreenCover'. It will play it forwards to frame 10 (full on), or backwards to frame 0 (full off) from the current frame.

 

Save the HTML file and double click it to open it in Internet Explorer. You can now click the on/off buttons to switch the device on/off.

 

Return to Notepad and open the HTML file again.

 

Find the section looking like this:

 

48. onClick Function新功能

简述如下:如果点击的对象呈阴性,该条密码设定'Screen'frame01由现状决定.如果点击对象'on' 'off',则会激活动画'ScreenCover',当前frame状态继续向前移至frame 10,或退后移至frame 0。保存HTML文件,双击打开用Internet Explore浏览,这时您可以点击on/off来打开/关闭设备。回到Notepad,再次打开HTML文件,该部分如下:

 

Figure 49: Old Mouse Enter & Exit Functions

 

These two functions are called automatically when the mouse moves into or out of an object with the 'Mouse Enter & Exit' event property. Replace all the text shown above with the following code:

 

49. 原有Mouse Enter & Exit功能

 

当鼠标以移入或移出文件对象时,'Mouse Enter & Exit'这两个功能会自动响应。以上所有显示文本将被下列代码所替代:

 

Figure 50: New Mouse Enter & Exit Functions

 

This code hides or shows specifically named elements of the page, when the mouse points at the buttons or stops doing so. We need to insert the elements referred to above somewhere. Find The section looking like this:

 

50. Mouse Enter & Exit功能

 

该代码会具体出现或隐藏在页面中已命名的素材中,当鼠标指向按键或停止其运行时,我们需要插入上述来自其他地方的素材。该部分如下

 

Figure 51: Old Button Section

 

We don't need all the buttons at the bottom of the page. We are going to replace them with some tool tip items.Replace all the shown text with this code:

 

51. Old Button部分

 

在页面底部我们并不需要所有按键,我们将用tool tip选项代替他们。用代码代替所有已示的文本。

 

Figure 52: New Tool Tip Section

 

These are the items that are hidden/shown in the onMouseEnter/onMouseExit functions from before. Save the HTML file and open it in Internet Explorer.

 

52. New Tool Tip部分

 

这些选项都隐藏/显示于先前的onMouseEnter/onMouseExit功能中。保存HTML文件,在Internet Explorer中打开。

 

Figure 53: The Finished Interactive 3D Model

 

53. 已完成的互动3D模型

 

What's Next?

 

You have created a stunning interactive 3D model, from the relatively simple steps of this tutorial. It is all ready to upload to your own homepage. Just take the TNT file, the HTML file and the background picture and upload the files, just as you normally do when updating your homepage.

 

Imagine what can be accomplished with a little more practice and a little more time. Your imagination is the limit.

 

By the way: Don't discard your work so far; you will need it in a later tutorial in this series.

For additional inspiration, have a look at the online showcase on TurnTool's own web site www.turntool.com

 

下一步?

 

您已经通过简单步骤创建了一个很棒的互动3维模型,可以准备上传至主页了。您只需上传TNT文件,HTML文件和背景文件即可,就像上传普通文件一样操作。如果花上更多时间和更多精力,您所能完成的将足以超出您的想象。建议:请不要马上删除您的作品,在本系列的后续操作中它们仍会被使用。要获取更多灵感和创意,可以浏览TurnTool的在线展示www.turntool.com

 

标签:Turntool操作手册
上一篇:我司成功制作东山领汇建筑模型
下一篇:参加青岛拥湾开发项目说明会的通知
网友评论:Turntool官方操作手册中英文对照
评论
留名: 验证码:
您可能还需要关注一下内容:
·Turntool官方操作手册中英文对照
☏ 推荐产品

Ladybug5全景
商家:力方国际

ProJet®
商家:力方国际

ProJet®
商家:视科创新

Premium1.5
商家:视科创新

巴可HDX主动立体投
商家:德浩科视

巴可HDF-W26投
商家:德浩科视

巴可30000流明2
商家:德浩科视

巴可4万流明2K投影
商家:德浩科视
☞ 外设导航
☏ 企业名录
【广州】中科院广州电子技术有限公司
【北京】第二空间(北京)科技有限公司
【北京】幻维世界(北京)网络科技有限公司
【厦门】厦门惠拓动漫科技有限公司
【厦门】厦门幻眼信息科技有限公司
【深圳】深圳南方百捷文化传播有限公司
【北京】北京思源科安信息技术有限公司
【上海】上海殊未信息科技有限公司
【北京】北京赢康科技开发有限公司
【武汉】武汉科码软件有限公司
友情链接 关于本站 咨询策划 行业推广 广告服务 免责声明 网站建设 联系我们 融资计划
北京第三维度科技有限公司 版权所有 京ICP备09001338
2008-2016 Beijing The third dimension Inc. All Rights Reserved.
Tel:010-57255801 Mob:13371637112(24小时)
Email:d3dweb@163.com  QQ:496466882
扫一扫 第三维度
官方微信号