Detail

Setup und Rendering einer einfachen Geometrie

3D im Web

Diese Serie beschäftigt sich mit der Darstellung von 3D-Inhalten auf Websites und den notwendigen APIs und Tools die dafür genutzt werden können.

Es wird im ersten Teil um das Setup und das Rendern einer einfachen Geometrie gehen. In den folgenden Artikeln wird ein eigenes 3D-Objekt importiert, und die Interaktion mit der Szene implementiert.

WebGL (Web Graphics Library) ist ein plattformübergreifender Standard für das Rendern von interaktiven 2D- und 3D-Grafiken im Netz. Die WebGL API bietet die Möglichkeit via JavaScript 3D-Grafiken über das HTML <canvas> Element darzustellen. Da die Schnittstelle Zugriff auf die *shader language* der OpenGL ES (Open Graphics Library for Embedded Systems) hat, werden die Grafiken von der GPU berechnet.

Mit reinem WebGL interaktive Applikationen zu erstellen ist mühsam und umständlich, es existieren frameworks mit denen die Umsetzung vereinfacht wird. Die Bekanntesten dürften wohl THREE.js und Babylon.js sein, wobei der Fokus von Babylon.js auf dem Erstellen von Spielen liegt und THREE.js einen eher unvoreingenommen Ansatz hat. In dieser Serie wird THREE.js eingesetzt.

Als Grundlage zur Darstellung von WebGL-Inhalten wird das HTML <canvas> Element und ein *rendering context* benötigt. Im script tag wird THREE.js in das Dokument eingebunden, danach die Datei main.js, die unseren Code beinhalten wird.

 

<body>
    <script  src="src/js/three.js"></script>
    <script  src="src/js/main.js"></script>
</body>

 

 

Es werden drei Komponenten benötigt, um etwas darzustellen:

  •  eine Szene
  •  eine Kamera
  •  der WebGL Renderer (rendering context)

Diese werden in main.js wie folgt angelegt:

 

/* main.js */
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
    75, // FOV (field of view) in Grad
    window.innerWidth / window.innerHeight, // Verhältnis des render context
    0.1, // near - Objekte mit einer kleineren Distanz als dieser Wert werden nicht angezeigt
    1000 // far - Objekte mit einer größeren Distanz als dieser Wert werden nicht angezeigt
);

const renderer = new THREE.WebGLRenderer(); // ein von THREE.js erzeugtes  Element
renderer.setSize(window.innerWidth, window.innerHeight); // Größe des Canvas
document.body.appendChild(renderer.domElement);

 

 

Um etwas dargestellt zu bekommen, kann eine der in THREE.js enthaltenen Geometrie-Klassen instanziiert werden.
 

 

const geometry = new THREE.TorusKnotGeometry(13, 2.5, 250, 10, 9, 6);
const material = new THREE.MeshBasicMaterial({ color: 0xe6db74 });
const torus = new THREE.Mesh(geometry, material);
scene.add(torus); // Der Torus wird zur Szene hinzugefügt

// Damit das noch etwas besser aussieht wird ein wireframe auf den Torus gelegt
const wireframe = new THREE.WireframeGeometry(geometry);
const line = new THREE.LineSegments(wireframe);
line.material.depthTest = false;
line.material.opacity = 0.25;
line.material.color = new THREE.Color("#000");
line.material.transparent = true;

scene.add(line);
camera.position.z = 70; // Die Position der Kamera muss angepasst werden, damit die Objekte zu sehen sind```javascript

 

 

Jetzt fehlt noch der render loop, eine rekursive Funktion die requestAnimationFrame aufruft. Diese wird aufgerufen, um dem Browser mitzuteilen, dass er einen Repaint durchführen soll - ergo der nächste Frame gerendert wird. Ein typischer Wert für diese frame rate ist 60 Mal pro Sekunde. Damit das Objekt rotiert, wird der Rotations-Wert für die X und Y-Achse bei jedem Aufruf der draw() Funktion inkrementiert.
 

 

const meshes = [torus, line]
function draw() {
    requestAnimationFrame(draw);
    meshes.forEach(element => {
        element.rotation.x += 0.001;
        element.rotation.y += 0.001;
    });
    renderer.render(scene, camera);
}
draw();

 

 

Das Ergebnis sieht jetzt so aus:

 

Jetzt sollte ein sich drehender Torus mit einem Wireframe im Canvas gerendert werden.

Das war ein einfaches Setup um zu zeigen, dass man mit wenig Aufwand erste Ergebnisse erzielen kann.

Im zweiten Teil der Serie wird das Laden von eigenen 3D-Objekten und das Nutzen der verschiedenen Lichtquellen betrachtet.

 

Daniel Tofaute

Webentwickler bei eyeworkers
kontakt@eyeworkers.de
+ 49 721 183960

Cookie-Einstellungen

Auch wir verwenden Cookies. Durch die weitere Nutzung unserer Website sind Sie mit der Verwendung dieser Cookies einverstanden. Darüber hinaus sind auf dieser Website Dienste anderer Dienstleister eingebunden. Dazu werden ebenfalls Cookies gesetzt, die sie jeder Zeit ändern können. Wir verwenden keine Cookies für Werbezwecke oder Social Media. Weitere Details: Datenschutzerklärung und Impressum

Details anzeigen
Name Cookie Dauer Zweck
eye-cookie Consent Cookie 10 Jahre

Dieses Cookie speichert Informationen zum Verwalten Ihrer Cookie-Einstellungen für diese Webseite

Details anzeigen

Wir verwenden Dienste von Drittanbietern.

Name Cookie Dauer Zweck
Goolge Maps google-maps 10 Jahre

Google Maps Cookie

Google Recaptcha google-recaptcha 6 Monate

Formular / Spam-Erkennung

Google Analytics GA 2 Jahre

Statistische Zwecke