The goal of the following tutorial is to allow a developer to build an application from a simple primitive to small sandtable application. The tutorial is broken up into four stages, each building upon itself to create a more complex application.
Stage 1 - Primitive Scene
In the first stage, we’ll add in a basic primitive collada file, and set up the initial camera position. The application will contain the default navigation of a walk mode.
The following code creates a child node of the application named blueCube, of type node3, and defines the source file. In the scripts section, the camera transform is initialized, and will be set during the application load.
The above is all that is needed to create an application. The default walk mode allows the user to navigate with the standard WASD keys, as well as Q and E to rotate and R and C to move up and down.
Example: Primitive Scene
Stage 2 - Terrain Model and Orbit Navigation
In the second stage, we’ll replace the blue cube with a higher fidelity terrain model, set some overall scene properties, and update the navigation mode to orbit around a single point.
Since the terrain model in this case is of a much higher fidelity, we can add some properties to set its position, rotation, and scale.
We can then add in some global properties. Here the active camera is explicitly defined, an RGB value is set for the background color to give the appearance of sky, and the navmode is set to ‘orbit’, as opposed to the default value of ‘walk’.
For this navigation mode, we can add an additional child to the application, called ‘sceneCenter’, setting a translation property. This point will then be used to set the ‘lookAt’ property for the camera. Additional camera properties are set in the initialize function, including ‘far’ and ‘near’, setting up the clipping planes for this much larger terrain model.
In this application, the WASD controls can be used for navigation; however, the camera will continue to focus on the sceneCenter point.
Example: Terrain Model and Orbit Navigation
Stage 3 - Multiple Models and Behaviors
In the third stage, we’ll add an additional child node for a predator vehicle called ‘predator’ with similar property definitions. We’ll then apply a behavior to the ‘predator’ node, which is defined in a separate yaml file. Setting the property ‘fly-flying’ to true will enable the flying behavior immediately upon application load.
Example: Multiple Models and Behaviors
Stage 4 - HTML Overlays and Interaction
First, we’ll create a file called ‘index.vwf.html’ that will load separately or on top of the application. The name must match that of the ‘index.vwf.yaml’ file, and the framework will automatically look for that file. We’ll define the body with a simple HTML toolbar div containing the two button images. This will allow us to select either navigation mode, or pindrop mode.
Example: HTML Overlays and Interaction