WebVis Basic Examples

1. Overview
2. Structure
3. Usage
4. Resources
5. Your Own Industrial 3D App in Three Steps
6. Technical details
7. License
8. How to report an issue

Overview

WebVis Basic Examples is the central hub for code examples, demos, and static resources showcasing the WebVis API and its features. This collection helps developers and users explore, learn, and prototype with the WebVis platform across a wide range of real-world scenarios. Each subdirectory demonstrates a specific feature, integration, or workflow—ranging from basic viewer setup to advanced 3D visualization, markup, measurement, and XR capabilities.

This repository serves as a comprehensive resource for both new and experienced users, providing practical examples that can be easily adapted for various applications. The examples are structured for quick understanding and implementation, making it easier to leverage the full potential of WebVis in your projects.

Structure

• getting-started/: Introductory examples to help new users quickly set up and use WebVis viewers.
• core-resources/: Foundational examples and resources for working with WebVis, including context management, events, and rendering.
• markup/: Demonstrations of annotation, drawing, and markup capabilities, including 2D and 3D markers.
• searching-and-filtering/: Examples for searching and filtering scene
• setup/: Integration and setup examples, including iframe integration.

Each subfolder typically contains:

• index.html: The main example page.
• index.js: The JavaScript logic for the example.
• README.md: Documentation for the specific example.
• thumb.png or thumb.jpg: Thumbnail image for the example.
• assets/: Additional resources (images, data files, etc.) used by the example.

Usage

To use the examples, follow these steps:

Prerequisites

• Development Server: VS Code Live Server extension (recommended)
• Browser: Modern web browser with WebGL support
• Network: Internet connection for WebVis library and 3D models
• instant3Dhub: Access to a running instance

Setup Development Environment

# Install Live Server extension in VS Code
# Or use any local web server

Launch the Example

• Open this folder in VS Code
• Right-click on index.html
• Select "Open with Live Server"
• Navigate to the opened URL (typically http://127.0.0.1:5500)

Resources

• Company Website
• Documentation Portal
• Demo Instance
• WebVis API Reference

Your Own Industrial 3D App in Three Steps

Step 1: Get a License via Threedy

To start instant3Dhub, you will need to enter a serial key.
Please reach out and we will get you sorted out.

➡️ Get a Serial Key

---

Step 2: Download via Threedy Repository

You can get the latest instant3Dhub release from our public repository as a Helm package.

➡️ Public Repository
📚 Code Examples, Guides & Tutorials

---

Step 3: Install via Helm on Kubernetes

instant3Dhub is a containerized software that can be deployed on top of a container orchestration layer.
The primary target is the Kubernetes platform, which is also highly recommended for productive environments.

📦 Installation Guide

Technical details

• All the examples are based on the version of instant3Dhub that is hosted on our demo instance. For further information about other versions, please check out our documentation portal.
• You can change these examples to use our own instant3dhub installation. To do that, You need to change the link of webvis.js?next in the index.html file:
  <script src="YOUR_HUB_INSTANCE/repo/webvis/webvis.js?next"></script>

Code Structure for Developers

This example includes clear markers to help developers identify WebVis-specific code:

Finding WebVis API Calls

All WebVis API interactions are marked with WEBVIS_API: comments in the code. Search for this keyword to quickly locate:

• Context creation and management
• Model loading and manipulation
• Property settings and configurations
• All direct WebVis library calls

Primitive and Placeholder Objects

instant3Dhub provides a small set of basic 3D models for testing and development. These primitives can be used as placeholders or for prototyping applications. Each model is referenced by a URN:

• urn:x-i3d:shape:box
• urn:x-i3d:shape:cube
• urn:x-i3d:shape:cone
• urn:x-i3d:shape:cylinder
• urn:x-i3d:shape:sphere
• urn:x-i3d:shape:torus
• urn:x-i3d:shape:monkey
• urn:x-i3d:shape:key
• urn:x-i3d:shape:switch
• urn:x-i3d:shape:cap
• urn:x-i3d:shape:418 (teapot)

License

All the examples are licensed under the terms of the MIT License. Please see the LICENSE file for full details.

How to report an issue

For any issues please contact us.