Google SketchUp is a software package for creating 3D models, from simple to complex. These models can be subsequently used in other 3D application frameworks such as O3D. Using a 3D drawing package simplifies application development by eliminating various boilerplate tasks and allowing the developer to focus on higher-level implementation of the application itself.
First, decide on the complexity of the 3D models needed for your application. You can use SketchUp to create the models yourself or use models from 3D Warehouse. Your models can be in one file or multiple files.
Before and during the model building stage, consider how you will use the models in the O3D application. In particular, the application will need to correctly position your model and possibly translate and rotate it. This means that the model, or any parts of it, will need to be uniquely identifiable by O3D.
In SketchUp, this goal can be accomplished by creating components. To create a component, select the model elements that you want to be part of the component and then use the right-click menu to select "Make Component." Once the component is created, assign it a unique name. As shown below, use the right-click menu to select "Entity Info" and fill in the "Name" field. O3D will use this unique name to find and control the component.
Every component created in SketchUp has a set of 3D axes associated with it. To correctly control the component in O3D, you will need to know the placement and orientation of these axes. You can change a component's axes using the right-click Change Axes menu. For example, to animate a rotating wheel, create a wheel component and place the axes in the center of the wheel. This will simplify the work needed to rotate the wheel in the O3D application.
To implement an interesting animation application, you will need to independently control different parts of your model. For example, if your model is a car and you want to spin and turn the wheels while the car is moving, you will need a component hierarchy. To create a component hierarchy, use the Outliner tool under Windows->Outliner and parent components as appropriate.
Once you're satisfied with the first version of your SketchUp model, you can export it from SketchUp and then import and test it in the O3D application. This process involves several steps. The first step is to export the model into a generic graphics format such as COLLADA. Use File->Export->3D Model.... The next step is to convert the COLLADA file into a format accessible to O3D. Use the O3D Converter tool to create a zipped archive (.tgz) containing all the graphics assets from the SketchUp model.
The resulting .tgz archive can be imported into your O3D JavaScript application using one of the provided utilities methods such as o3djs.scene.loadScene(). The importing of the model is asynchronous, so all processing should be done in a callback method that is called after the model has been loaded:
|
// Create a pack to manage our resources/assets.
g_pack = g_client.createPack();
// Create a transform to parent the loaded scene.
g_root = g_pack.createObject('Transform');
// Load the tgz file given the full path and call the callback function
// when it's done loading.
o3djs.scene.loadScene(g_pack, g_root, path, callback);
// Callback function to control the scene after loading.
function callback(pack, parent, success) {
}
After the model has been loaded, your application can access its components and component hierarchy. Each component is accessed through its transform. For example, if your model is a car and you named the car component "Car", then the following code accesses the transform:
var carTransArray = g_root.getTransformsByNameInTree('Car');
carTransform = carTransArray[0];
If your car's x axis points forward, you can animate the car by moving it along the x axis:
for (var i = 0; i < 100; i++) {
carTransform.translate(10, 0 , 0);
}
While the car is moving forward, you can simulate the spinning wheels by rotating the wheel transform:
var wheelTransArray = g_root.getTransformsByNameInTree('Wheel');
wheelTransform = wheelTransArray[0];
If you set up your wheel axes such that the y axis is orthogonal to the wheel plane, then you can rotate the wheel along the y axis:
for (var i = 0; i < 100; i++) {
wheelTransform.rotateY(rotationAngle);
}
By using a hierarchy of transforms, you can implement more advanced animations such as turning and spinning the wheels at the same time. This is done by using a different transform for each animation.
If you decide to enhance your application by adding additional models or animating more parts, you will need to go back to your original SketchUp model and make the desired changes (for example, add new graphics, create new components or component hierarchies, change component axes, and so on). Then follow the exporting and importing steps and implement the JavaScript code to handle the new updates.