WalkinsideJS Getting Started Guide¶

Table of Contents¶

1. Adding WalkinsideJS to your application
2. Creating a View
3. Loading a Project

1. Adding WalkinsideJS to your application¶

To get started with WalkinsideJS, follow these three easy steps:

1. Set up COMOS Walkinside Server: Ensure you have a COMOS Walkinside Server, including the Rendering Service feature. This requires that the server has a GPU supported by COMOS Walkinside.

2. Load WalkinsideJS Script: Add the walkinside.js script to your HTML application:

   <script src="[walkinside-server-address]/walkinside-js/walkinside.js"></script>
   

   (If you customized your installation, the /walkinside-js/ path may be different.) 3. Add a Container Element: Include an HTML element in your page that will serve as a container for the 3D view. Any block element, like a <div>, will work.

After the script is loaded, you can start using the global walkinside object. Its interface is described in the "API Reference" section below.

Versioning¶

WalkinsideJS follows the semantic versioning scheme (http://semver.org) to indicate to clients when there is compatibility breakage.

2. Creating a View¶

Global "walkinside" object

walkinside.createViewAsync(options) → Promise<View>

Initializes a new 3D viewer within a specified container element and connects it to the Walkinside backend.

Parameters¶

• options (Object):
  • backendAddress (string): The server URL where the Walkinside backend is hosted.
  • targetElement (HTMLElement): The DOM element that will host the 3D view.

Example¶

walkinside.createViewAsync({
    backendAddress: 'https://example.com/walkinside-backend',
    targetElement: document.getElementById('wi-viewer-container')
}).then(function(view) {
    console.info('View created successfully.');
}).catch(function(error) {
    console.error('Error creating view:', error);
});

3. Loading a Project¶

view.loadProjectAsync(options) → Promise<Project>

Loads a specified project into the initialized view.

Parameters¶

• options (Object):
  • projectAddress (string): The URL of the Walkinside project.
  • token (string): Authentication token.

Example¶

view.loadProjectAsync({
    projectAddress: 'https://example.com/projects/123',
    token: 'your_access_token'
}).then(function(project) {
    console.info('Project loaded successfully:', project);
}).catch(function(error) {
    console.error('Error loading project:', error);
});