Altizure JavaScript 3D SDK Demo

Here we show how to use Altizure Javascript 3D SDK to solve some real applications to demonstrate how to integrate realistic 3D models to business application.

If you have any questions, please feel free to write on our issue page.

1. Timeline

Timeline is very useful for presenting a time series of a changing site. This is a essential tool for monitoring the progress of construction. We show several variation of timeline visualization.

1.1 Timeline in Grid Style

Demo link: altizure.github.io/experimental-demo/timeline.html
Keywords: Loading and setting multiple Altizure projects, text tags.
Brief introduction: In this demo, a series of 3D models of a construction site are laid out in grid style. Each model is attached with a text tag to show the time stamp of the construction site.

1.2 Timeline with Sliders

Demo link: altizure.github.io/experimental-demo/timeline-slider.html
Keywords: Visibility of markers, interaction, camera flight, marker loading and destruction.
Brief introduction: In this demo, a series of 3D models of a construction site are laid out with a slider. Users can drag the slider to switch the models in different time. The demo also shows how to control the camera flight animation to help users to fly around 3D models.

2. Sensors

Modern handheld mobile devices contain lots of sensors, measuring positions, poses, and velocities. In this section, we demonstrate how to integrate the information of sensors with 3D models to make the scenes more interactive.

2.1 GPS Tracking

Demo link: altizure.github.io/experimental-demo/gps-tracker.html
Keywords: Image tag, tag position, camera following, coordinate transformation, canvas with 3D elements, altitude reading.
Brief introduction: This demo is only on mobile phones. After you press tracking, the demo will track your GPS location and show your track with aspect to the center of the scene. Your position is shown at realtime as an Altizure logo.

3. Performance Benchmark

3.1 Text Tag Rendering

Demo link: altizure.github.io/experimental-demo/performance-test.html
Keywords: Text tag, Rendering benchmark, Altitude reading.
Brief introduction: The demo renders 1000 text tags by default. Users can change the number of text tags and click Generate to generate a new scene. The more tags can be rendered smoothly, the more powerful is your system.

3.2 Line Rendering

Demo link: altizure.github.io/experimental-demo/polycylinder-limittest.html
Keywords: Cylinder line, Rendering benchmark.
Brief introduction: The demo renders 100 cylinder lines with 7 points for each line by default. Users can change the number of cylinder lines along with the number of points for each line and click Generate to generate a new scene. The more cylinder lines with more points can be rendered smoothly, the more powerful is your system.

4. How to Get the Code?

All the demos are open source. You can get the codes by running:

git clone https://github.com/altizure/experimental-demo.git
cd experimental-demo
python -m SimpleHTTPServer

Open your browser and access http://127.0.0.1:8000/ to run and check the demos.

5. Learn More

—

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

Demo