OpenSeadragonThreejsOverlay

An OpenSeadragon plugin that adds Three.js overlay capability.

Compatible with OpenSeadragon 2.0.0 or greater.

License: The BSD 3-Clause License. The software was forked from OpenseadragonPaperjsOverlay, that also is licensed under the BSD 3-Clause License.

Demo web page

See the online demo where some Three.js lines are shown on top of an OpenSeadragon window. More lines can be drawn by left clicking anywhere in the Image.

Introduction

To use, include the oopenseadragon-threejs-overlay.js file after openseadragon.js on your web page.

To add Three.js overlay capability to your OpenSeadragon Viewer, call threejsOverlay() on it.

     var viewer = new OpenSeadragon.Viewer(...);
     var overlay = viewer.threejsOverlay();
     
     // Initialize Threejs variables
     var renderer = overlay.renderer();
     var camera = overlay.camera();
     var scene = overlay.scene();
     
     // Performance Monitor
     var stats = overlay.stats();
     
     // openseadragon Imaging helper
     var imagingHelper = overlay.imagingHelper(); // onImageViewChanged already attached

This will initalize and return a threejs environment complete with a WebGLRenderer, scene, and camera.

Only PerspectiveCamera is supported for now. Will be adding support for the OrthographicCamera shortly.

The new object is returned return with the following methods:

• renderer(): Returns a Threejs WebGLRenderer
• camera(): Returns a Threejs PerspectiveCamera
• scene(): Returns a Threejs Scene
• stats(): Returns a Javascript Performance monitor stats.js
• imagingHelper(): Returns the openseadragonImagingHelper. onImageViewChanged event is already attached and is used to sync the osd viewport to threejs camera system.