How to use 3DHOP


3DHOP was designed to allow the creation of interactive multimedia Web presentations based on 3D digital models in a simple way. The design idea of 3DHOP is to have a simple JavaScript component that can be included in a standard HTML page (by including some .js files and adding a specific HTML element and JavaScript startup function), and that can be configured in a declarative fashion. More advanced behaviour and integration in the HTML DOM can be achieved by registering call-backs and invoking exposed functions from other HTML page elements.

We do believe the best way to learn the use of 3DHOP is the "by example" approach. The following how-to describe the different components and function using simple examples with commented code, which can be used as examples. The full package found in the download section contains the code for all the examples presented in the following sections, and a "minimal" folder containing just the essential files for a simple example. A novice developer should start from an existing how-to/commented example/template and modifying it until the desired result is achieved.


These step-by-step tutorials will describe the content of the 3DHOP package and how to deploy it remotely or work with it locally; the different kind of 3D geometries managed by 3DHOP, and how to prepare your 3D models for the use of 3DHOP.

Basic setup

These three commented examples will describe the basic setup of the tool: a description of the HTML page elements used by 3DHOP, the standard interface elements, and the loading of 3d models inside the viewer.

Advanced setup

These four commented examples will describe more complex configuration of the 3D scene: how to configure the trackball, compose a complex scene by rotating/scaling/translating 3D models, customize visibility/transparency/color of the 3D models, and setup advanced camera and lighting parameters inside 3DHOP.


These six commented examples will describe the components and functions of 3DHOP that are used to interact with the user: how to animate the trackball, create and use clickable hotspots, take measurement and picking points on the 3D scene, use the sections.


This documentation page describes all the functions exposed by 3DHOP.

Other resources


The ideal tool for preparing 3D meshes and point-clouds for 3DHOP is MeshLab, an open source tool for the visualization and editing of 3D geometries. MeshLab reads a wide variety of 3D formats, and can be used to optimize the 3D model as needed (geometrical simplification, topological cleaning, geometry cropping, convert from texture mapping to per-vertex color). A set of videotutorials on how to use MeshLab may be found here.


To manage high-resolution 3D models, 3DHOP uses the NEXUS multi-resolution format. More information on this structure can be found in the Nexus website. Visit the download section to get the NEXUS executable package and then follow this tutorial to create a multi-resolution model.


3DHOP is based on the SpiderGL library, a computer graphics oriented wrapping of the WebGL API of HTML5. SpiderGL provides a series of high-level helpers and structures that make easier the creation of interactive 3D web applications.