Skip to main content

Installation Guide

Project Structure​

A typical 3D application developed with Cumulia ORE consists of the following project structure:

  • index.html
    This file serves as the entry point or default homepage in a web application. It defines the initial structure and typically references other resources to build the complete user interface.

    <!DOCTYPE html>
    <html lang="en">

    <head>
      <meta charset="UTF-8" />
      <link rel="icon" type="image/svg+xml" href="/vite.svg" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>CAD Viewer</title>
    </head>

    <body>
      <script type="module" src="./src/main.ts"></script>
    </body>

    </html>

  • src/
    This folder contains the actual code that defines the functionality of the software package. Its internal structure depends on how your package is organized and its complexity. Typically, it includes:

    • main.ts: The main entry point of the application, which imports functions or classes from other files or exports them for use in other applications.
    • Other TypeScript files: To better organize the core logic of the application, the functionality may be split into multiple files and imported into main.ts or other parts of the package.

  • public/
    This folder contains resources that need to be served to the webpage, such as 3D models, textures, images, etc.

  • package.json
    This file specifies custom scripts (executed via npm run <script_name>), as well as the dependencies and their versions, helping developers automate tasks like building and testing while ensuring compatibility.

SDK Libraries Provided by ORE​

Cumulia ORE offers a core SDK and a variety of plugins for you to use:

  • ore.core
  • ore.material
  • ore.geometry
  • ore.color
  • ore.annotator
  • ore.gadget
  • ore.postprocessing
  • ore.snapshot
  • ore.selector
  • ore.locator
  • gti.animation
  • ore.camera
  • ore.manipulator
  • ore.debugger

Installation Steps​

For modern web applications, npm simplifies dependency management, streamlines development workflows, and improves efficiency.

Setting Up the Development Environment​

  1. Install Node.js:
    npm is bundled with Node.js, which is a JavaScript runtime environment that allows you to execute JavaScript outside the browser. Download and install the latest stable version of Node.js from the official website. This installation will automatically include npm.

  2. Choose a Code Editor or IDE:
    Select a code editor or integrated development environment (IDE) that suits your preference. Popular options include Visual Studio Code, Atom, or WebStorm. These tools provide features like syntax highlighting, code completion, and debugging.

Installing Packages​

Once your environment is set up, you can start building your application. The package.json file specifies the required packages to integrate. Run the npm install command, and npm will retrieve these packages and their dependencies from the npm registry. The dependencies will be stored in a newly created node_modules/ folder in your project directory.

Copying the SDK Libraries​

Copy the Cumulia ORE SDK libraries into the node_modules/ folder to make them available for use in your application.

Running the Application​

Use the npm run dev command to start the development server. You will see a URL like http://localhost:3001/ in the terminal. Open this URL in your browser to view your application.