👩‍💻Edit Code

Learn how to edit code and parse data in your JavaScript project.

Now that you are able to use our JavaScript SDK, it's time to build a web app.

SDK Code Example

You can find a robust open-source code example on our GitHub page.

This example project utilizes the echo3D JavaScript SDK to allow users to interact with the echo3D API via JavaScript code.

Setup and Run

1. Register for an account.

2. Add 3D models, videos, and images to the console.

3. Open a new terminal.

4. Run the following in the terminal:

• git clone https://github.com/echo3Dco/echo3D-JavaScriptSDK-Example-Project.git

• cd echo3D-JavaScriptSDK-Example-Project

• start echo3D-JavaScriptSDK-Example.html

1. Copy your API key from the top of the console and paste it into the application.

2. Optionally do the same for the secret key on the Security page of the console, if your project has it enabled.

3. Click Load Key. This will allow you to keep making API calls from the same API key.

4. Copy an entry ID by clicking the icon next to the name of any model you have uploaded to the console and paste it into the application.

5. Outputs of API calls will display as JSON in the center textbox.

Video Tutorial

Simple Code Example

Now that you are able to successfully fetch data into JavaScript, it's time to parse the data in your code.

You can iterate over all entries in the fetched database and parse them based on the data structures detailed in our API. For example:

app.js

...

/* Parse echo3D database */
var entries = []
for (let entry of db) { // Iterage over all database entries
  // Parse entry
  var srcFile = "https://api.echo3D.com/query?key=" + apiKey + "&file=";
  var typeFile = entry['hologram'].filename.toLowerCase().split('.').pop();
  switch (entry['hologram'].type) {
    case 'VIDEO_HOLOGRAM':
    case 'IMAGE_HOLOGRAM':
      srcFile += entry['hologram'].storageID;
      break;
    case 'MODEL_HOLOGRAM':
      switch (typeFile) {
        case 'glb':
          srcFile += entry['hologram'].storageID;
          break;
        case 'gltf':
        case 'obj':
        case 'fbx':
          srcFile += entry['additionalData'].glbHologramStorageID;
          break;
      }
      break;
    }
    
    // Parse additional data
    var x = (entry['additionalData'].x) ? 
              parseFloat(entry['additionalData'].x) : 0;
    
    // Do something with the entry
    ...
    
  }
  
  ...