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 |
|---|---|---|
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 |
|---|---|---|
camera | Kamera | Die Kamera steuert die Perspektive im Viewer. Sie hat folgende Einstellungsmöglichkeiten:
|
lights | Beleuchtung | Die Beleuchtung ist ein Array aus mehreren Lichtquellen. Eine Lichtquelle hat i.d.R. mindestens folgende Einstellungsmöglichkeiten:
|
background | Hintergrund | Der Hintergrund ist ein Objekt, welches folgende Einstellungsmöglichkeiten zulässt:
|
Beleuchtung
Für die Beleuchtung können verschiedene Lichtquellen genutzt werden. Brandbox unterstützt produktseitig folgende Lichtquellen:
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:
|
DirectionalLight | Eine Lichtquelle, die in der Szene platziert wird und Licht in Richtung des Szenenursprungs ausstrahlt. Sie hat folgende Einstellungsmöglichkeiten:
|
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)
}
}