THREEjs: Objekt und Material laden

Canvas mit 3D Animationen

THREEjs importiert Modelle und Materialien aus 3D-Programmen wie Blender mithilfe von Loadern.

Material und Objekte aus Blender exportieren

POV-Ray erschien in den 90er Jahren als Freeware-Raytracer, basierte auf mathematischen Formeln und die 3D-Szene wurde mit SDL, einer C++-ähnlichen Szenen-Beschreibungssprache eingestellt.

Maustaste drücken und Ziehen, um die Kamera zu rotieren; Scrollen zum Zoomen
Touchscreen: Ziehen zum Rotieren; Zoomen: zwei Finger-Geste

Wenn wir heute 3D-Szenen für die Darstellung in einem Browser erstellen, stehen wir vor einer ähnlichen Situation: Szenen werden mit Javascript beschrieben. Genaus wie in den 90ern werden die 3D-Modelle am besten in einem 3D-Programm erstellt und z.B. mit der WEBGL-Library THREEjs importiert.

Blender ist ein freies 3D-Programm für die Modellierung, das Rendern und die Animation von Objekten und Szenen und kommt bereits mit den nötigen Export-Funktionen.

blender-add-mesh

Blender CTRL ALT U

Damit stellt Blender weitere 3D-Objekte wie den Utah-Teapot zur Verfügung. Der Export als Wavefront OBJ ist zuverlässig und einfach und ist bereits in Blender ohne die Installation von Addons implementiert, während der Export als JSON, der sich über ein Blender-Addon realisieren lässt, heute als deprecated gilt.

blender-export-obj

Der Export als OBJ erzeugt zwei Dateien: modell.obj (Objekt beschrieben durch v für Vertex, vn für Normale, f für Faces) und modell.mtl, die Materialdatei.

Material und Objekt importieren

Zwei Module sind für den Import von 3D-Dateien für Objekte und Material zuständig: MTLLoader und OBJLoader.

<script src="…three.min.js"></script>
<script src="…OrbitControls.js"></script>
<script src="…MTLLoader.js"></script>
<script src="…OBJLoader.js"></script>

Das Modul OrbitControls wird für die Bewegung gebraucht.

Bevor ein Objekt in THREEjs importiert wird, muss das Material mit mtlLoader.load () angelegt sein.

// instantiate a loader
var mtlLoader = new THREE.MTLLoader();
mtlLoader.load (
   'teapot.mtl',
   function (materials) {
      materials.preload();
      var loader = new THREE.OBJLoader ();
      loader.setMaterials (materials);
      loader.load (
         'teapot.obj',
         function (mesh) {
            mesh.traverse (function (node) {
               if (node instanceof THREE.Mesh) {
                  node.castShadow = true;
                  node.receiveShadow = true; 
               } 
            });
            scene.add(mesh);
         });
});

Objekte bestehen aus kleinen Meshes. mesh.traverse durchläuft jede Komponente und fügt Eigenschaften wie Schatten hinzu.

WEBGL CANVAS 3D