ThreeJsViewer

Introduction

The ThreeJsViewer component provides the code to initialize a Three.js scene and render it in a canvas element. It extends from Component so it comes with all the benefits of that class and its parents.

Getting started

Javascript

The class is meant to be extended into a child class of the specific type of viewer that is meant to be managed. Example: A viewer containing a simple product viewer could be extended into a class called productViewer.

class ProductViewer extends ThreeJsViewer {
    constructor(args = {}) {
        args.entities = [
            new ExampleModel(),
        ];
        super(args);
    }


    // example directional light
    let light = new THREE.DirectionalLight(0xffffff, 1.2);
    light.position.set(5, 3, 0);
    light.target.position.set(0, 0, 0);

    // Three.js can't set the name of the object directly during construction
    let temp = light.uuid;
    this._scene.add(light);
    this._scene.getObjectByProperty("uuid", temp).name = "WhiteDirectionalLight";
}

When initialising:

const productViewer = new ProductViewer({
    $el: document.querySelector('#product-viewer'),
});

DOM Element

The DOM element should resemble the following structure. The entire viewer will be rendered inside the element, so there is no need to add any additional elements.

<div id="product-viewer"></div>

API

constructor(args = {})

The constructor method initialises the new ThreeJsViewer instance.

Parameters

• args: The configuration object used by the constructor to initialise the ThreeJsViewer in the desired way.
  • debug: A boolean that determines if debug mode is enabled. Default is false.
  • transparentBackground: A boolean that determines if the background of the scene is transparent.
  • qualityPreset: A string that determines the quality preset of the scene. Possible values are low-power, default, and high-performance. Default is default. These are the same presets used by the browser itself so it's possible to pass them from the browser.
  • camera: Object that contains the camera configuration for ThreeJsViewerCamera properties.
  • ... Component properties

Methods

tick()

The tick method is called every frame and is used to update the scene and render it. It is called automatically by the ThreeJsViewer class.

destroy()

The destroy method is used to clean up the instance and remove all event listeners.

Getters & Setters

get cameraManager()

Triggers when the user closes the popup using the escape key, dispatched before the hide process is started. Event detail contents:

• originalEvent: Contains the original keyup event object.

Private properties

_cameraManager

The camera manager instance that is used to control the camera in the scene.

_renderer

The renderer instance that is used to render the scene.

_composer

The composer instance that is used to apply post-processing effects to the scene.

_stats

The stats instance that is used to display the performance of the scene.

_scene

The scene instance that is used to contain all the objects in the scene.

External dependencies

• Three.js: The main library used to create the 3D scene.
• postprocessing: The library used to apply post-processing effects to the scene.

Todo

• Add a placeholder viewer to use in development.