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.
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.
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 AbsoluteWorldCenter: 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.tifAssign the material to the plane and click Show Map in Viewport in the Material Editor (figure 5):
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).
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:
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.
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.
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.
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.
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,
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 the‘More…’ button and choose TurnToolBox (figure 31).
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 Map。IFL包括一列图像和两个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].
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.
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。建立Sphere，number 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).
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).
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.
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).
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).
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 aresatisfied, 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.
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:
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.
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:
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.
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
