Altizure Javascript 3D SDK

Altizure Javascript 3D SDK allows you to integrate rich 3D experience with our realistic 3D models to your business workflow.

Simplify the loading and rendering of large-scale realistic 3D models.
Simplify the fusion and rendering data from different sources.
Simplify the development of integrating realistic 3D models to different business workflows.

Combined with tools like Electron and React Native, you can easily develop high quality 3D applications with realistic models for desktop and mobile apps.

1. Quick Start

Include SDK

In the <head> section of the html page, include our SDK as

<!-- Set the encoding to make sure that utf8 character is shown correctly -->
<meta charset="utf-8">
<!-- Set the viewport to make the page look correct on mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<!-- Include SDK -->
<script type="text/javascript" src="https://beta.altizure.com/sdk"></script>

Here we provide three links for our SDK.

Latest: <script type="text/javascript" src="https://beta.altizure.com/sdk"></script>
Stable: <script type="text/javascript" src="https://www.altizure.com/sdk"></script>
Latest for Mainland China: <script type="text/javascript" src="https://beta.altizure.cn/sdk"></script>
Stable for Mainland China: <script type="text/javascript" src="https://www.altizure.cn/sdk"></script>

Create a div as a container for 3D rendering

Our SDK will take over the downloading and rendering of realstic 3D models. Developers should create a div and attach a sandbox object to it. This div specifies where 3D contents will be rendered.

<body>
  <div id="page-content"></div>
</body>

Create a sandbox object

We now create a sandbox object and attach it to the div we created to hold this sandbox. Then the sandbox object will render all 3D contents in such a div.

// Create an option for configuring the sandbox
let options = {
  altizureApi:{
    // your app key
    key: 'your-app-key'
  }
}

// Create a sanbox object and attach it to the div page-content.
let sandbox = new altizure.Sandbox('page-content', options)

'page-content' is the id of div where the 3D contents are rendered. options is used to configure the sandbox. Please refer to our sample section for more information about how to configure a sandbox.

Summary

All codes can be put together as:

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <script type="text/javascript" src="https://beta.altizure.com/sdk"></script>
</head>
<body>
  <div id="page-content"></div>
  <script>
    let options = {
      altizureApi:{
        // your app key
        key: 'your-app-key'
      }
    }

    let sandbox = new altizure.Sandbox('page-content', options)
  </script>
</body>
</html>

Save this code fragment to <path>/altizure-sdk-test/earth.html. Then start a http server in your console by typing

cd <path>/altizure-sdk-test/
python -m SimpleHTTPServer

This page can be accessed at http://127.0.0.1:8000/earth.html to load Altizure Earth

You can check this demo on our site to see how it looks.

In the following, you can learn more about our SDK via samples and demos.

2. Samples

2.1 Concepts

Here we start with some concepts in our SDK.

Sandbox: altizure.Sandbox is the core of the 3D engine. It is the entry point of the development and handles all 3D rendering and data management.

2.2 List of Samples

Up-to-date live samples are at altizure.github.io/sdk.examples/examples.sdk.html.

The source code of these samples can be downloaded at github.com/altizure/sdk.examples. You can easily setup your server and run these samples following the tutorial.

Any questions and bugs, please feel free to write on our issue page.

3. FAQ

Please check FAQ page for more information and demo page for more sophisticated demos. Please also check the Reference documents.

4. Learn More

Last modified at Wed Jan 08 2020 09:31:35 GMT+0000 (Coordinated Universal Time)

JavaScript 3D SDK