Export from CINEMA 4D
360° - Step by Step
360° - Mini Cooper
Full XY Revolution - Step by Step
Full XY Revolution - Ladybird
360° - Step by Step
This tutorial explains how to render frames of a 3D model in Maxons CINEMA 4D R11 that can be directly used with JavaScriptObject to build a 360° rotation. Therefore we will build a simple animation in CINEMA 4D and export the animation frames. The 3D model we are using here is the Mini Cooper by Gilles Tran.
Step 1 - Preparing the Scene
As we only want to present the 3D model - and keep the imagesize as small as possible - we can strip all environmental elements but the Sky Object from the original version. That leaves us with the Mini Cooper Object and an Sky Object. First of all the Axis Center of the Mini Cooper Object has to be aligned to the View Center. That can be done by selecting the Mini Cooper and choosing Structure -> Axis Center -> View Center. Then we change the background color by setting the DisplayColor in the Basic Properties of the Sky Object to white. It should now look like in the screenshot below:
Aligned Mini Cooper Object and white Sky Object - Download the prepared scene (4,71MB)
Step 2 - Animation
Before we build the animation we need to calculate the step width between the animation frames: StepWidth = 360° / imagesPerRevolution
That is simple: If we want to build an animation from 36 frames we end up with 10 degree steps between each animation frame (360° / 36 = 10°). If we want a smooth animation with 60 frames the step width will be 6 degrees (360° / 60 = 6°). Lets stick to that 60 frame example and memorize 6°.
Now let's take a look at the Animation Toolbar beneath the 3D view. By default the animation is set to 101 frames (the frame counting is zero based!). We want 60 frames instead, so we change the value from 100F to 59F. Now we want to build an animation stretching from 0F to 59F that rotates the Mini Cooper around the y-axis from 0° to 354° (360° minus the calculated step width 6° = 354°). Why not 360°? Because 360° is the same as 0°, which we already have at 0F.
We are using the Autokeying feature to build the animation. Choose Animation -> Autokeying to enable it. Go to 0F by clicking on the zero in the timeline of the Animation Toolbar. Then select the Mini Cooper from the Object Manager and check the Coord. attributes. Type a 0 in the R.H field and hit enter. The red circle left to the field should become solid. Now go to 59F and type 354 in the R.H field and hit enter. Then disable the Autokeying feature by choosing Animation -> Autokeying again. Congratulations! You just created an animation! You can test it by hitting the green play button in the Animation Toolbar.
Setting the R.H value of the Mini Cooper Object to 354° at animation frame 59F - Download the animated scene (4,85MB)
Step 3 - Rendering
In the last step we choose the correct rendering parameters, therefore we open Render -> Render Settings. Under "General" the Render Engine should be set to Full Render. Under "Output" we set the width and height of the frames to 750 x 450px. Then we set the Frame Range to All Frames. It should look like:
Under "Save" we set the correct file format and naming. Set a valid path to save the frames to. Make sure, that you name it like "c:\directory\000_" (000_ will be the prefix for the frames). Choose JPEG as the file format. Change Name to Name000.TIF. This will cause CINEMA 4D to name the frames like 000_000.jpg ... 000_059.jpg which can directly be used with JavaScriptObject! The settings should look like:
Now we can close the Render Settings window and start the rendering by choosing Render -> Render to Picture Viewer. Depending on your machine this takes some time. When the rendering is complete the images can be directly used with JavaScriptObject: 360° - Mini Cooper
Download the final CINEMA 4D scene (4,85MB)
360° - Mini Cooper
Mini Cooper by Gilles Tran - 60 frames, 750 × 450 px (3,08 MB)
XHTML
<img id="opera" class="javascriptobject" src="content/object_minicooper/000_014.jpg" width="750" height="450" longdesc="1 60 lazy inverseX" alt="Mini Cooper" />
Full XY Revolution - Step by Step
This tutorial explains how to render frames of a 3D model in Maxons CINEMA 4D R11 that can be directly used with JavaScriptObject to build a full revolution around the x and y-axis. Basically this could be done with an animation like in the 360° tutorial, but that would require an awful lot of stupid work - like setting 40 key frames with different H and P rotation values by hand. And since we have more important stuff to do I made two C.O.F.F.E.E. scripts that automatically do the boring work for us. The 3D model we are using here is the Ladybird by Gilles Tran.
Step 1 - Installing the C.O.F.F.E.E. Scripts
Download the latest JavaScriptObject package and unpack it. In the "exportFromCINEMA4D" folder you'll find two C.O.F.F.E.E. script files:
CSCBatch Renaming for JavaScriptObject.CSC
TXTObject Rotator for JavaScriptObject.txt
Let's begin with installing the Batch Renaming for JavaScriptObject.CSC script file. Start up CINEMA 4D and open the Script Manager (Window -> Script Manager). Choose File -> Import..., navigate to the "exportFromCINEMA4D" folder, select the file Batch Renaming for JavaScriptObject.CSC and click open. Voila, you have just installed the first C.O.F.F.E.E. script. After clicking the Save All button you can close the Script Manager.
The second script has to be attached to an object via a C.O.F.F.E.E. Tag. Therefore select the object we want to rotate in the Object Manager and choose Tags -> CINEMA 4D Tags -> C.O.F.F.E.E. This will open an Expression Editor where you select Load.... Again you navigate to the "exportFromCINEMA4D" folder, but now you need to select the file Object Rotator for JavaScriptObject.txt. Click Open and the Editor will be filled with nice C.O.F.F.E.E. code. Now hit the button Compile... and the Expression Engine should show you a "No Errors!" message at the bottom. If everything went OK it should look like:
Ladybird object with attached C.O.F.F.E.E. Tag - Download the prepared scene (303 KB)
Step 2 - Configuration and Render Settings
Before we start the renderer we need to set the imagesPerRevolution variable in the attached C.O.F.F.E.E. Tag to a reasonable value. By default it is set to 20. That means there are twenty frames per revolution per axis. Twenty frames on the x-axis by twenty frames on the y-axis gives us a total of 400 frames. That's a lot, but a browser can still handle that amount of images. We stick to that value and close the Expression Editor. Now we need to set the timeline in the Animation Toolbar beneath the 3D view. By default the animation is set to 101 frames (the frame counting is zero based!). We want 400 frames instead, so we change the value from 100F to 399F.
That's it. Now the attached C.O.F.F.E.E. script controls the H and P Rotation of the ladybird object in relation to the framenumber in the animation timeline. Test it by hitting the play button or dragging the slider in the timeline.
Set the correct rendering parameters at Render -> Render Settings. Under "General" the Render Engine should be set to Full Render. Under "Output" we set the width and height of the frames to 400 x 400px. Then we set the Frame Range to All Frames. It should look like:
Under "Save" set a Path to save the frames to and an image Format like JPEG. Please note, that any frame name you set will be reset by the attached C.O.F.F.E.E. script. Close the Render Settings window and start the rendering by choosing Render -> Render to Picture Viewer. Depending on your machine this takes some hours. If you have more than one machine you should consider rendering the project as a job in a renderfarm. In this case the NET Render module really speeds up things.
Step 3 - Batch Renaming
After CINEMA 4D completed the rendering of the frames you end up with 400 files named from "_tmp_020_0000.jpg" to "_tmp_020_0399.jpg". Now that are really ugly filenames, for JavaScriptObject needs something like "003_011.jpg" (check the Documentation for details). And since we don't want to rename 400 frames by hand let's use the second C.O.F.F.E.E. script for this job.
Because we already installed that script in Step 1 we can now use it by choosing Plugins -> User Scripts -> Batch Renaming for JavaScriptObject. That will open an window that wants you to "locate the directory containing the temporary (_tmp_) images to batch rename them". Nice! Let's do what we're told. Select the folder that contains the frames and hit OK.
The window will close and CINEMA 4D will batch rename all images so that you can use them directly with JavaScriptObject. Please note, that there will be no further popup messages of the script. You can check if everything went alright by either opening the folder and look for yourself or starting up the Console (Window -> Console) which should be filled with messages like "Renamed: C:\Ladybird\_tmp_020_0016.jpg -> C:\Ladybird\000_016.jpg".
Full XY Revolution - Ladybird
Ladybird by Gilles Tran - 400 frames, 400 × 400 px (9,1 MB)
XHTML
<img id="ladybird" class="javascriptobject" src="content/object_ladybird/019_018.jpg" width="400" height="400" longdesc="20 20 lazy inverseX" alt="Ladybird" />