Export from Google SketchUp
Step by Step
360° Example - Opera House
Full XY Revolution Example - Nokia 6300
Improve Rendering Quality
Step by Step
Step 1 - Install the plugin
Make sure, that you have installed the latest Google SketchUp version. Download the JavaScriptObject package and unpack it. Copy the ObjectFrameGenerator.rb from the the "exportFromSketchUp" folder into the plugin directory of SketchUp. On Windows, the plugins are installed into the same folder where you installed SketchUp. This location may vary depending on where you installed SketchUp. The default locations of the plugins directory for Windows and OS X are:
WindowsC:\Program Files\Google\Google SketchUp [X]\Plugins
OS X/Library/Application Support/Google SketchUp [X]/SketchUp/plugins
Step 2 - Configuration
Open the ObjectFrameGenerator.rb with a text editor of your choice and take a look at the settings in line 37.
Ruby# Settings@outputFolder = "C:/Temp/" @imagesPerRevolution = 24 @distanceToOrigin = 1500 @imageWidth = 500 @imageHeight = 500 @jpegQuality = 80 @oneRevolution = false @oneRevolutionAngle = 22.5# Output directory for the images # Images per revolution around the x and y-axis # Distance to the 3D world origin at [0,0,0] # Width of the output image in pixel # Height of the output image in pixel # 100 is best 0 is worst # Set 'true' for only one revolution around the x-axis # X-axis camera angle for the 360° rotation in degrees
Change the @outputFolder string to an existing directory on your system. Set the @imagesPerRevolution variable to a number of your choice (For a singel 360° rotations something around 36 would be okay, for an full object I suggest something around 20 to keep the HTTP requests for the images at a reasonable level).
Change the @distanceToOrigin variable to a value that fits your model size. And finally set the image dimensions and compression with the variables @imageWidth, @imageHeight and @jpegQuality.
If you only need one 360° rotation around the x-axis at a defined angle simply set @oneRevolution true and change the @oneRevolutionAngle to any degree you like.
Step 3 - Render!
Now open SketchUp. (If you had it already open while copying or changing the ObjectFrameGenerator.rb you have to restart it.) In the menu under Plugins you will now find the entry ObjectFrameGenerator. Open a 3D model of your choice and start the rendering by clicking Plugins -> ObjectFrameGenerator
The Ruby Skript will automatically rotate the camera around the zero point and save an image at each rotation step to the @outputFolder. You can see the status of the process in the status bar on the right bottom. When it's done the status says "Done!" and you can use the images with JavaScriptObject right away.
Please Note: The camera will always rotate around the orgin of the 3D world space at [0,0,0]. You need to move the center of your model to the zero point if you want a smooth object rotation. This is not done automatically, for sometimes you don't want to rotate the camera around the center of your model - for example when you are doing a 360° rotation around a building with a dropshadow on the ground.
360° Example - Opera House
This example shows you how to export a single revolution around the x-axis of a SketchUp model. That kind of rotation is good for large objects like buildings where a look "under" the object would transport very few interesting informations. The 3D model we're using here is the opera house in Leipzig by Dipl.-Ing. Johan Wagner.
First we set the @oneRevolution variable true and the camera angle to 22° for a nice tracking shot. As we're doing only one rotation the @imagesPerRevolution can be set to 36. Since the opera house is not a high-rise building one can set the image resolution to 600 × 400 px. And for the building has a huge scale we set the @distanceToOrigin at 9000.
Ruby# Settings@outputFolder = "C:/Temp/" @imagesPerRevolution = 36 @distanceToOrigin = 9000 @imageWidth = 600 @imageHeight = 400 @jpegQuality = 90 @oneRevolution = true @oneRevolutionAngle = 22# Output directory for the images # Images per revolution around the x and y-axis # Distance to the 3D world origin at [0,0,0] # Width of the output image in pixel # Height of the output image in pixel # 100 is best 0 is worst # Set 'true' for only one revolution around the x-axis # X-axis camera angle for the 360° rotation in degrees
After saving the above settings to the ObjectFrameGenerator.rb we can open the model in SketchUp and align the model center to the rotation center (origin).
After: Centered model by moving and rotating it
Before: Center of the model is outside the rotation center
Then one can start the rendering by clicking Plugins -> ObjectFrameGenerator and use the generated frames with JavaScriptObject:
Opera House in Leipzig - 36 frames, 600 × 400 px (1,02 MB)
XHTML
<img id="opera" class="javascriptobject" src="content/object_cube/000_014.jpg" width="600" height="400" longdesc="1 36 lazy" alt="Opera House Leipzig" />
Full XY Revolution Example - Nokia 6300
This example shows you how to export a full rotation around the x and y-axis of a SketchUp model. A revolution around two axes is good for objects that one would also like to rotate and look at in the real world - like a mobile phone. The 3D model we're using here is the Nokia 6300 by Joost.
First we set the @imagesPerRevolution variable to 20 (keep in mind that the total images produced will be @imagesPerRevolution by the power of two). As the mobile phone has small dimensions we set the @distanceToOrigin at 1000. Since the Nokia 6300 is higher than wide we can choose a portrait format resolution of 300 × 400 px.
Ruby# Settings@outputFolder = "C:/Temp/" @imagesPerRevolution = 20 @distanceToOrigin = 1000 @imageWidth = 300 @imageHeight = 400 @jpegQuality = 90 @oneRevolution = false @oneRevolutionAngle = 22# Output directory for the images # Images per revolution around the x and y-axis # Distance to the 3D world origin at [0,0,0] # Width of the output image in pixel # Height of the output image in pixel # 100 is best 0 is worst # Set 'true' for only one revolution around the x-axis # X-axis camera angle for the 360° rotation in degrees
After saving the above settings to the ObjectFrameGenerator.rb we can open the model in SketchUp and optimize it for the rendering. Therefore we need to rotate and move the model to let it stand and has its center in the origin. To get a smoother rendering result we disable the shadows and outlines.
After: Object stands, lines and shadows disabled
Before: Model lies flat on the ground, lines and shadows enabled
Then one can start the rendering by clicking Plugins -> ObjectFrameGenerator and use the generated frames with JavaScriptObject:
6300 - 400 frames, 300 × 400 px (2,77 MB)
XHTML
<img id="nokia" class="javascriptobject" src="content/object_nokia/000_019.jpg" width="300" height="400" longdesc="20 20 lazy" alt="Nokia 6300" />
Improve Rendering Quality
As the standard SketchUp write_image method just comes with the option to enable or disable antialiasing (which is enabled by default in the ObjectFrameGenerator.rb) here are two "tweaks" that optimize the image quality of the renderings and decrease the file size:
No Edges: Disable the outlines/edges in the view menu. This not only decreases the file size but also increases the "realism" of the object.
Bicubic Interpolation: Double the SketchUp output resolution and - after rendering the frames to a directory - resize the images by 50% using Bicubic interpolation with Photoshop. You do not need to resize every frame by hand, instead you can automate that behaviour by creating a new action and use it via File -> Automate -> Batch on every image in a directory. If you're not sure how to do that: There are plenty tutorials online.
Default - 18,33 KB
No Edges - 16,88 KB
No Edges and Bicubic - 15,37 KB