Die Zeit, in der ich mich an der beeindruckenden 3D-Darstellung (WebGL) versuchte ― Erste Experimente mit Three.js und Blender

Früher habe ich mir viele Websites angesehen und war von Objekten, die im First View dynamisch in Bewegung kamen, oder von Animationen mit räumlicher Tiefe regelrecht begeistert. Damals wollte ich selbst so etwas erschaffen und habe mich deshalb an Three.js und Blender versucht.

Mit dieser Begeisterung bin ich bei Liberogic eingestiegen, doch um es kurz zu sagen ... Inzwischen arbeite ich überwiegend an Geschäftsanwendungen und dem Aufbau von Headless CMS, also eher soliden Umsetzungen. (lacht) Ich habe das nicht schlechtgeredet, ehrlich!

Inzwischen bin ich im vierten Jahr und möchte, mit der damaligen Begeisterung für das „bewegliche Web“ im Hinterkopf, die Grundlagen rund um WebGL noch einmal kurz durchgehen.

Was ist WebGL?

WebGL ist eine Technologie, mit der 3D-Grafiken direkt auf Websites dargestellt werden. Sie funktioniert in allen gängigen Browsern, darunter Chrome, Firefox und Safari.

Früher dominierten Plug-ins wie der Flash Player, die auf Smartphones jedoch oft nicht gut funktionierten.

WebGL hingegen wird nativ unterstützt, weshalb es als Technologie gelten kann, die den Weg für 3D-Darstellungen im mobilen Zeitalter geebnet hat.

Praxistest

Ein 3D-Objekt im Browser mit Three.js darstellen

Three.js ist eine lizenzfrei nutzbare Bibliothek, mit der sich mithilfe von JavaScript einfach 3D-Inhalte erstellen lassen.

Zunächst werden die grundlegenden WebGL-Konzepte benötigt: Renderer, Scene und Camera.

Der Renderer ist das zentrale Objekt von Three.js. Wenn Scene und Camera an ihn übergeben werden, wird der Teil der 3D-Scene, der sich im Sichtkegel der Kamera befindet, als 2D-Bild auf dem Canvas gerendert (gezeichnet). Der Renderer übernimmt diesen Vorgang.

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  1000, // 視野角
  window.innerWidth / window.innerHeight, // 側面
  75, // 近く
  1000 // 遠い
);
camera.position.set(0, 0, 400);

//マウスで制御
const controls = new OrbitControls(camera, document.body);

//html側の<canvas id="myCanvas"></canvas>を取得
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector("#myCanvas"),
  antialias: true,
});

//setSize()メソッドでサイズを設定
renderer.setSize(window.innerWidth, window.innerHeight);
//背景色も変更可能
renderer.setClearColor("#000")

//htmlの<canvas id="myCanvas"></canvas>へ流し込み
document.body.appendChild(renderer.domElement);

Der 3D-Würfel wird anschließend mithilfe eines Mesh-Objekts erstellt. Um ein Mesh zu erzeugen, benötigt man eine Geometrie (Form) und ein Material (Oberflächenbeschaffenheit).

//ジオメトリ（立方体）
const geometry = new THREE.BoxGeometry(100, 100, 100)

//マテリアル（色）
const material = new THREE.MeshNormalMaterial
const box = new THREE.Mesh(geometry, material);
//Sceneに追加
scene.add(box);

//ライト
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1);
//Sceneに追加
scene.add(light);

Abschließend wird eine Animation hinzugefügt.

Die Implementierung der umgebenden Partikel wird in diesem Beitrag ausgelassen!

function animate() {
  requestAnimationFrame(animate);

  box.rotation.x += 0.005;
  box.rotation.y += 0.005;
  renderer.render(scene, camera);
}

animate()

Wird die Scene mit der eingerichteten Camera sowie Geometrie, Material und Licht gerendert, erscheint sie im Browser.

3D-Modellierung mit Blender ausprobieren

Blender ist eine kostenlose Open-Source-Software für die gesamte 3D-Produktion, von der Modellierung, Animation und dem Rendering über die Spieleentwicklung bis zur Videobearbeitung. Mit Blender allein lassen sich jedoch keine WebGL-Websites erstellen.

Wie bei Three.js erstellt man in Blender Formen mit Mesh-Objekten, weist Farben und Materialeigenschaften über Materialien zu, passt mit Lichtern die Beleuchtung und Schattenwürfe an und stellt Kameraposition und -ausrichtung ein, bevor das Rendering erfolgt.

Durch Kombination von Nodes lassen sich Verläufe erstellen, metallische Oberflächen gestalten oder Leuchteffekte erzeugen, um realistische Materialien zu entwickeln.

Referenz: https://www.youtube.com/watch?v=DsNZzUZPhw4

Ein in Blender erstelltes 3D-Modell im Browser mit Three.js anzeigen

Das in Blender erstellte 3D-Modell wird als .glb-Datei exportiert und in Three.js eingebunden.

Die Funktionen OrbitControls, GLTFLoader und DRACOLoader werden aus der Three.js-Bibliothek importiert.

OrbitControls ist ein Hilfsprogramm zur Steuerung der Kamera mit der Maus, während GLTFLoader und DRACOLoader jeweils zum Laden von 3D-Modellen im GLTF-Format bzw. in ihrer komprimierten Variante im DRACO-Format dienen.

Ich habe einen modellierten Apfel im Browser angezeigt!

Als ich das in Blender erstellte Modell mit Three.js im Browser dargestellt habe, wirkten Farbe und Textur jedoch anders, was an Unterschieden in der Rendering-Umgebung und der Materialkompatibilität lag. Um das gewünschte Aussehen zu erreichen, sind etwas Anpassungen nötig.

Im Alltag drehen sich meine Projekte vor allem um CMS-Anbindungen und das Frontend-Design und den Aufbau von Business-Anwendungen, weshalb ich mich selbst kaum noch mit 3D-Darstellungen beschäftige.

Doch wenn ich so damit herumexperimentiere, merke ich wieder: "Das macht einfach Spaß."

Vielleicht bin ich modernen Technologien so selbstverständlich nähergekommen, weil ich mich damals nach einem bewegten Web gesehnt habe.

Also dann, heute wieder: Next, Nuxt und los!

Zurück im Projektalltag entstehen jetzt auf andere Weise wieder bewegte Webseiten. 🚀