Szene

Es ist möglich Szenen für 3D-Model-Viewer zu erstellen. Diese Szenen werden genutzt, um diverse Parameter des Viewers anzupassen, wie z.B. die Positionierung der Kamera, wieviele Lichtquellen und wo sie platziert werden etc.
Diese Szenen werden durch die Entität ThreeDimensionalViewerScene realisiert.

Konfiguration

Eine Szene hat folgende Eigenschaften.

Eigenschaft	Bezeichnung	Beschreibung

Eigenschaft	Bezeichnung	Beschreibung
label	Label	Zeichenkette. Eine Bezeichnung, um die Szene einfacher identifizieren zu können.
hdriFileId	HDRI-Datei	Ganzzahl. ID der HDRI-Datei. Diese Datei wird zur Beleuchtung genutzt.
sceneConfiguration	Szenenkonfiguration	Zeichenkette. Die Konfiguration der Szene im JSON-Format. Diese Konfiguration definiert die Szene. Die Möglichen Inhalte werden im Artikel aufgeschlüsselt.

Szenenkonfiguration

Um die verschiedenen Eigenschaften einer Szene zu manipulieren, können entsprechende Eigenschaften durch Objekte in der sceneConfiguration hinterlegt werden.

Eigenschaft	Bezeichnung	Beschreibung

Eigenschaft

Bezeichnung

Beschreibung

camera

Kamera

Die Kamera steuert die Perspektive im Viewer. Sie hat folgende Einstellungsmöglichkeiten:

fov: Ganzzahl. Vertikales Sichtfeld.
near: Ganzzahl.
far: Ganzzahl.
position: Bestimmt die Position der Kamera.
- x: Ganzzahl. Positionierung auf der x-Achse.
- y: Ganzzahl. Positionierung auf der y-Achse.
- z: Ganzzahl. Positionierung auf der z-Achse.
lookAt: Bestimmt den Punkt, auf den die Kamera gerichtet ist.
- x: Ganzzahl. Positionierung auf der x-Achse.
- y: Ganzzahl. Positionierung auf der y-Achse.
- z: Ganzzahl. Positionierung auf der z-Achse.

lights

Beleuchtung

Die Beleuchtung ist ein Array aus mehreren Lichtquellen. Eine Lichtquelle hat i.d.R. mindestens folgende Einstellungsmöglichkeiten:

x: Ganzzahl. Positionierung auf der x-Achse.
y: Ganzzahl. Positionierung auf der y-Achse.
z. Ganzzahl. Positionierung auf der z-Achse.
intensity: Ganzzahl. Gibt an wie stark das Licht scheinen soll.
color: Zeichenkette. Farbe des Lichts. Wird angegeben als Hex code mit 0x-Präfix (bspw. 0xffffff für die Farbe Weiß)

background

Hintergrund

Der Hintergrund ist ein Objekt, welches folgende Einstellungsmöglichkeiten zulässt:

color: Zeichenkette. Hex-Wert der Hintergrundfarbe.
intensity: Gleitkommazahl. Ein Wert, der die Intensität der Farbe bestimmt.

Beleuchtung

Für die Beleuchtung können verschiedene Lichtquellen genutzt werden. Brandbox unterstützt produktseitig folgende Lichtquellen:

Bezeichnung	Beschreibung

Bezeichnung

Beschreibung

HemisphereLight

Eine Lichtquelle über der Szene, welche die Szene gleichmäßig beleuchtet. Das Licht verläuft von der Farbe skycolor zur Farbe groundcolor. Dieses Licht wirft keine Schatten. Sie hat folgende Einstellungsmöglichkeiten:

x: Ganzzahl. Positionierung auf der x-Achse.
y: Ganzzahl. Positionierung auf der y-Achse.
z: Ganzzahl. Positionierung auf der z-Achse.
skyColor: Zeichenkette. Farbe des Lichts. Wird angegeben als Hex code mit 0x-Präfix (bspw. 0xffffff für die Farbe Weiß)
groundColor: Zeichenkette. Farbe des Lichts. Wird angegeben als Hex code mit 0x-Präfix (bspw. 0xffffff für die Farbe Weiß)
intensity: Ganzzahl. Ein Wert, der die Intensität des Lichts bestimmt.

DirectionalLight

Eine Lichtquelle, die in der Szene platziert wird und Licht in Richtung des Szenenursprungs ausstrahlt. Sie hat folgende Einstellungsmöglichkeiten:

x: Ganzzahl. Positionierung auf der x-Achse.
y: Ganzzahl. Positionierung auf der y-Achse.
z: Ganzzahl. Positionierung auf der z-Achse.
color: Zeichenkette. Farbe des Lichts. Wird angegeben als Hex code mit 0x-Präfix (bspw. 0xffffff für die Farbe Weiß)
intensity: Ganzzahl. Ein Wert, der die Intensität des Lichts bestimmt.

Diese Lichtquellen können über Objekte im "lights"-Array eingebunden werden. Ein light-Objekt muss abgesehen von der Konfiguration die Eigenschaft type enthalten. type entspricht dabei der Bezeichnung des Lichts aus der vorherigen Tabelle.

Beleuchtung - Beispielkonfiguration

{
  "shadows": 1,
  "lights": [
    {
      "type": "DirectionalLight",
      "x": 2,
      "y": 3,
      "z": 0,
      "intensity": 7
    },
    {
      "type": "HemisphereLight",
      "x": 0,
      "y": 100,
      "z": 0,
      "skyColor": "0xffffff",
      "groundColor": "0xff9933"
    },
    {
      "type": "/public/TestLight.js",
      "x": 0,
      "y": 100,
      "z": 0
    }
  ]
}

Erweiterung

Es ist möglich eigene Beleuchtungen einzubinden. Um dies zu erreichen, muss in type der Pfad zu einer JavaScript-Datei stehen, die ein Light implementiert. Dazu muss neben dem Konstruktor die Methode addLight existieren. Der Pfad zu dieser Datei muss öffentlich abrufbar sein. Eine solche Lichtquelle könnte folgendermaßen aussehen.

Light Example

import * as THREE from "/plugin/remote/brandbox/component-3d-viewer/src/ThreeDimensional/Viewer/js/three/three.module.js"

export default class SpotLight {

    /**
     * @param {Viewer} viewer
     */
    constructor(viewer) {
        this.viewer = viewer
    }

    addLight(lightConfiguration) {
        let lightX = lightConfiguration.hasOwnProperty('x') ? lightConfiguration.x : 0
        let lightY = lightConfiguration.hasOwnProperty('y') ? lightConfiguration.y : 100
        let lightZ = lightConfiguration.hasOwnProperty('z') ? lightConfiguration.z : 0
        let intensity = lightConfiguration.hasOwnProperty('intensity') ? lightConfiguration.intensity : 5

        let spotLight = new THREE.PointLight( 0xffffff, intensity);
        spotLight.position.set( lightX, lightY, lightZ );

        this.viewer.scene.add(spotLight)
    }
}