In this tutorial we will create a simple project that has an html page that contains
a simple Bridgeworks™ scene with a 3D Box.
Getting Started (Setting up the project’s directory structure)
- Create a directory called BwProject. This will contain all the content for
this tutorial.
- Create a subdirectory in BwProject called UI. This will contain all
the content used to decorate the html page.
- Inside the UI folder create the following subdirectories: images,
scripts, and styles. The images folder will contain all images used
on the main html page. The scripts folder will contain any JavaScript files used
for the project. The styles folder will contain any cascading style sheet files
used to style the main html page.
- Create a subdirectory in BwProject called BwContent. This will contain
all the content for the Bridgeworks™ scene.
- Inside the BwContent folder create the following subdirectories: images
and objects. The images folder will contain all images used in the
Bridgeworks™ scene. The objects folder will contain all the objects (lightwave
objects, shapefiles, etc.) rendered in the Bridgeworks™ scene.
Now the project's directory structure has been
set up.
Creating the main html page
- Launch the text editor of your choice. Create a file in BwProject called
default.html with the following content:
This creates a webpage that will contain the Bridgeworks™ player.
Adding the Bridgeworks™ player
- Now let's add Bridgeworks™ to the webpage. Create a file called fixit.js in the UI/scripts
folder with the following content:
This creates a function called createObject() that allows us to add an
object tag to the webpage defining several Bridgeworks™ parameters.
The object tag defines the parameters for the Bridgeworks™ player including
the codebase, scene, width, and height.
codebase references the url to the latest version of the Bridgeworks™
player.scene is a path to the Bridgeworks™ xml file that defines a
Bridgeworks™ scene (e.g. value=”./BwContent/myFirstBwScene.xml”). Leaving
its value empty will load the Bridgeworks™ player onto the page without
a scene.width specifies the width (in pixels) of the Bridgeworks™
player.height specifies the height (in pixels) of the Bridgeworks™
player.
- Now let's reference this javaScript file from our webpage. Copy and paste the following into the
head section of default.html
This allows us access to the createObject() function, which puts Bridgeworks™
on the webpage.
- Now let's call the
createObject() function to put Bridgeworks™ on the webpage.
Copy and paste the following into the body section of default.html:
This creates a blank Bridgeworks™ window, which is 500 pixels in height and 500 pixels wide.
Note that the window will be blank because the scene parameter of the
createObject() function is empty.
- So far we have defined the bare minimum required to load the Bridgeworks™ player
onto a webpage. The following is what the page should look like in a web browser:
Creating a Bridgeworks™ scene
- Now that we’ve embedded the Bridgeworks™ player onto a webpage let’s view some content. Let's
create a simple scene with a single box object.
- Download the 3D box model. Right-click the following link, click "Save Target As...", and save the file in the
BwProject/BwContent/objects folder:
- Download the box textures. Right-click the following links, click "Save Target As...", and save the files in the
BwProject/BwContent/images folder:
- Download the scene and interaction preferences file. Right-click the following links, click "Save Target As...", and save the files in the
BwProject/BwContent folder:
- Now that all the content is in place, let's create and view a Bridgeworks™ scene.
Change the first parameter of the
createObject() function to
'BwContent/01_LoadBox.xml'. The call to the createObject() function should
now look like this: createObject('BwContent/01_LoadBox.xml', 500, 500);
- Launch default.html and you should now see the following:
|
