3D Modell einem Artikel hinzufügen

Laden von 3D-Modellen
Obwohl three.js viele Lader zur Verfügung stellt, spart die Wahl des richtigen Formats und Workflows später Zeit und Frustration. Einige Formate sind schwer zu verarbeiten, für Echtzeit-Erlebnisse ineffizient oder werden derzeit einfach nicht vollständig unterstützt.

Wenn möglich, empfehlen wir die Verwendung von glTF (GL Transmission Format). Sowohl die .GLB- als auch die.GLTF-Version des Formats werden gut unterstützt. Da glTF auf die Bereitstellung von Runtime-Assets ausgerichtet ist, ist es kompakt zu übertragen und schnell zu laden. Zu den Funktionen gehören Netze, Materialien, Texturen, Skins, Skelette, Morph-Ziele, Animationen, Lichter und Kameras.

Katalog: Kategorien / Artikel

Wählen Sie bei dem Artikel unter Aktion das 3D-Objekt aus.

Artikel

Überprüfen Sie, ob Sie den richtigen Artikel ausgewählt haben.

Punkt 1. Hier sehen Sie das Artikelbild
Punkt 2. Hier steht der Artikelname
Punkt 3. Die Kategorie
Punkt 4. Sollte der falsche Artikel angezeigt werden, können Sie mit einem Klick auf Zurück zur Auswahl zurück.

3D Modell

Punkt 1. Tragen Sie hier den 3D-Modellnamen ein.

Punkt 2. Tragen Sie hier den HTML Titel ein

Punkt 3. Beschreiben Sie für Suchmaschinen Ihr 3D-Modell

Diese Informationen verwendet das MyOOS Shopsystem im HTML-Header auf der Seite mit dem 3D-Modell.

Urhebernennung

Mit der Erfassung von 3-D Künstler und der URL vom 3-D Künstler wird die Namensnennung im Online Shop angezeigt.

Darstellung im Shop:

Die Darstellung kann im Template
~/myoos/templates/phoenix/webgl/scene3d.html geändert werden.

	

		three.js -
		glTF 2.0 loader

		{$model.models_name} by {$model.models_author}	
	

Kameraposition

Die Kameraposition wir als ein geordnetes Triplett von Zahlen (mit den Bezeichnungen x, y und z) angegeben. Eine Richtung und Länge im 3D-Raum.
In three.js ist die Länge immer der euklidische Abstand (geradliniger Abstand) von (0, 0, 0, 0) bis (x, y, z) und die Richtung wird ebenfalls von (0, 0, 0, 0) bis (x, y, z) gemessen.

Objekt-Rotation

Hier verwendet three.js den Euler-Winkel. Euler-Winkel beschreiben eine Rotationsumwandlung durch Drehen eines Objekts auf seinen verschiedenen Achsen in bestimmten Mengen pro Achse und einer bestimmten Achsenreihenfolge.
Eulersche Winkel

Panorama Hintergrundbild

Für den Hintergrund stehen Fotos im High Dynamic Range Image Format zur Auswahl.

Licht

Fügt 3 Lichtquellen Ihrer 3D Szene zu

Quellcode aus https://github.com/r23/MyOOS/blob/master/myoos/includes/content/scene3d/product_info_webgl_gltf.js.php

				if ( sceneInfo.addLights ) {

					var ambient = new THREE.AmbientLight( 0x222222 );
					scene.add( ambient );

					var directionalLight = new THREE.DirectionalLight( 0xdddddd, 4 );
					directionalLight.position.set( 0, 0, 1 ).normalize();
					scene.add( directionalLight );

					spot1 = new THREE.SpotLight( 0xffffff, 1 );
					spot1.position.set( 5, 10, 5 );
					spot1.angle = 0.50;
					spot1.penumbra = 0.75;
					spot1.intensity = 100;
					spot1.decay = 2;

					if ( sceneInfo.shadows ) {

						spot1.castShadow = true;
						spot1.shadow.bias = 0.0001;
						spot1.shadow.mapSize.width = 2048;
						spot1.shadow.mapSize.height = 2048;

					}

					scene.add( spot1 );

				}

1. THREE.AmbientLight
2. THREE.DirectionalLight
3. THREE.SpotLight

Standardmäßig ist dieses Licht im MyOOS Shopsystem aus.

Grund

Optional können Sie Ihrer 3D Szene einen Grund hinzufügen

Quellcode aus https://github.com/r23/MyOOS/blob/master/myoos/includes/content/scene3d/product_info_webgl_gltf.js.php

				if ( sceneInfo.addGround ) {

					var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xFFFFFF } );
					var ground = new THREE.Mesh( new THREE.PlaneBufferGeometry( 512, 512 ), groundMaterial );
					ground.receiveShadow = !! sceneInfo.shadows;

					if ( sceneInfo.groundPos ) {

						ground.position.copy( sceneInfo.groundPos );

					} else {

						ground.position.z = - 70;

					}

					ground.rotation.x = - Math.PI / 2;

					scene.add( ground );

				}

Standardmäßig ist der Grund MyOOS Shopsystem aus.

Shadows

Wenn Sie Licht und einen Grund Ihrer 3D Szene hinzugefügt haben können Sie auch einen Schatten berechnen lassen.

Environment Mapping

Für eine fotorealistische Darstellung der 3D Computergrafik wird das gewählte Panorama Hintergrundbild als Umgebung auf die Oberfläche gespiegelt.

glTF-Formt auswählen

Das MyOOS Shopsystem ünterstützt folgende Formate glTF, glTF-Embedded, glTF-pbrSpecularGlossiness, glTF-Binary, und glTF-Draco.

Datei upload

Je nach glTF Format besteht die 3D Computergrafik aus einer oder mehreren Dateien. Folgende Tools beinhalten den glTF-Export:

glTF-Blender-IO von der Khronos Group
COLLADA2GLTF von der Khronos-Gruppe
FBX2GLTF von Facebook
OBJ2GLTF von Analytical Graphics Inc.
…und viele mehr

Der glTF-Export einer 3D Grafik besteht zum Beispiel aus folgenden Dateien

Fassen Sie diese mit einem Zip Programm zusammen. Sie können mehrere Dateien in einem Archiv zusammenfassen.

Das Zip Archive sollte den Namen der 3D Grafik erhalten. In unserem Beispiel BoomBox.

Bei dem Dateinamen empfehlen wir: Verwenden Sie …

• konsequente Kleinschreibung für Dateinamen und -endungen, um Missververändnissen vorzubeugen
• Dateinamen nur bis zu 255 Zeichen Länge, auch wenn einige Systeme längere Namen erlauben.
• Vermeiden Sie deutsche Umlaute und ß in den Dateinamen
• Als Sonderzeichen ist der Unterstrich „_“ erlaubt. Andere Satzzeichen sollten Sie vermeiden. *Fragezeichen „?“ und Sternzeichen „*“ sollten Sie auf jeden Fall vermeiden. Auch auf Leerzeichen sollten Sie unbedingt verzichten.

Menue Datei-Upload


Nach dem erfolgreichen Upload erhalten Sie die Meldung:



Sie können im MyOOS System 3D Objekte als Augmented Reality Inhalte veröffentlichen.
Augmented Reality Inhalte hinzufügen