A simply fabulous pano-based 3D-Viewer

This project is designed to enable the computer science department of the Friedrich-Alexander University Erlangen-Nuremberg to display its 50 years computer science department exhibition online. This 3D Viewer web application can be easily accessed via https://50-jahre-informatik.cs.fau.de.

The software to be developed shall be able to:

  ● View arbitrary rooms based on a 3D model
  ● Allow users to walk through these rooms

Properties

Functional properties of the software shall be:

    ● The panorama shall be scalable (within a window)
    ● Users should be able to
      ○ Rotate the panorama
      ○ Walk through a room (switches panoramas)
      ○ Switch between rooms
      ○ Switch between floors (levels)
    ● A room layout including the user’s location shall be available

Non-functional properties of the software shall be:

    ● Runs in most common browsers (hence Javascript/Typescript)
    ● Speedy non-frustrating interaction possible
    ● Can be integrated into other web applications

The computer science department would like to use this viewer to display its 50 years of computer science department exhibition on the web.

3D Panorama Viewer | AMOS Project 5

Software Build and Deployment Document

• Project Repository
• Bill of Material

Project Repository

Github organisation structure

base folder: /main:

• /deliverables: textual deliverables, i.e. documents (pdf, doc, etc.), or software deliverables

• /src: stands for source, and is the raw code before minification or concatenation or some other compilation - used to read/edit the code

• /gitignore: is a text file that tells Git which files or folders to ignore in a project

• /license: MIT License A short and simple permissive license with conditions only requiring preservation of copyright and license notices. Licensed works, modifications, and larger works may be distributed under different terms and without source code.

Folder Structure

base folder: /src: Frontend

It includes css(inside PanoViewer div),js,libs and index.html

• /src/js/viewer: includes the general viewer files

• /src/libs: includes jQuery, OpenLayers and Three.js Library files

Folder Structure

base folder: /src: Backend

Includes the js files and main.js

Bill of Material

• Node.js: JavaScript runtime environment Backend

• the three.js NPM package: JavaScript library and API for animated 3D graphics

• WebGL Overview - The Khronos Group Inc: JavaScript API for rendering interactive 2D and 3D graphics

• License | jQuery Foundation: JavaScript library for simple HTML DOM manipulation

• OpenLayers: JavaScript library for displaying a dynamic map and markers on it

You can find further details about the project in the associated documents.

1. User Documentation
2. Build/Deployment Documentation
3. Technical Documentation