Damals träumten wir von 3D-Grafiken (WebGL) – Three.js und Blender ausprobiert

Früher habe ich mir Webseiten angesehen und war fasziniert von Objekten, die im Hero-Bereich herumwirbeln, und von Animationen mit Tiefenwirkung. Damals dachte ich mir: "Das möchte ich auch mal machen!" und habe dann Three.js und Blender ausprobiert.

Bei Liberogic angefangen bin ich mit diesem Traum – aber ehrlich gesagt, arbeite ich heutzutage eher an Business-Anwendungen und headless CMS-Lösungen, also an etwas Solidererem (lacht). Das soll keine Kritik sein, verstehen Sie mich nicht falsch!

Jetzt im vierten Jahr, möchte ich mich dieser alten Leidenschaft für "bewegte Web-Inhalte" wieder zuwenden und die Grundlagen rund um WebGL kurz zusammenfassen.

Was ist WebGL?

WebGL ist eine Technologie zur Darstellung von 3D-Grafiken auf Webseiten und funktioniert in allen gängigen Browsern wie Chrome, Firefox und Safari.

Früher war Flash Player das Standard-Plugin, aber dieses funktionierte auf Smartphones nicht gut.

WebGL hingegen wird nativ unterstützt und kann daher als die Technologie angesehen werden, die 3D-Grafiken im mobilen Zeitalter eröffnet hat.

Es selbst ausprobieren

3D im Browser mit Three.js anzeigen

Three.js ist eine Bibliothek mit verfügbarem Trademark, mit der Sie mit JavaScript ganz einfach 3D-Inhalte erstellen können.

Zunächst benötigen Sie als WebGL-Konzepte einen Renderer, eine Scene und eine Camera.

Der Renderer ist das Hauptobjekt von Three.js. Wenn Sie Scene und Camera an den Renderer übergeben, wird der Teil der 3D-Scene innerhalb des Kamerastumpfes des Renderers als 2D-Bild auf die Canvas gerendert (gezeichnet).

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 dann mit einem Mesh-Anzeigeobjekt erstellt. Um ein Mesh zu erstellen, benötigen Sie eine Geometrie (Form) und ein Material (Oberflächeneigenschaft).

//ジオメトリ（立方体）
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 dieses Mal übersprungen!

function animate() {
  requestAnimationFrame(animate);

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

animate()

Wenn Sie die konfigurierte Camera, Geometry, Material und Light in der Scene rendern, wird sie im Browser angezeigt.

3D-Modellierung in Blender erstellen

Blender ist eine Open-Source-Software zur 3D-Produktion, die den gesamten Workflow von 3D-Modellierung, Animation, Rendering, Spieleentwicklung bis zur Videobearbeitung kostenlos abdeckt. Mit Blender allein können Sie jedoch keine WebGL-Websites erstellen.

Wie bei Three.js erstellt man auch in Blender Formen mit Mesh-Objekten und versieht diese mit Materialien für Farbe und Oberflächenbeschaffenheit. Dann passt man die Lichteinfälle und Schattierungen mit Licht an, stellt die Kamera-Position und -Ausrichtung ein und führt das Rendering durch.

Durch die Kombination von Knoten können Sie Verläufe erzeugen, metallische Effekte kreieren, Leuchten hinzufügen und realistische Oberflächenbeschaffenheiten erstellen.

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

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

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

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

OrbitControls ist ein Utility zur Kamerakontrolle mit der Maus, während GLTFLoader und DRACOLoader Utilities zum Laden von 3D-Modellen im GLTF-Format bzw. im DRACO-Format (komprimierte Version) sind.

Ich habe ein in 3D modellierter Apfel im Browser angezeigt!

Allerdings wird bei der Anzeige eines in Blender erstellten Modells im Browser mit Three.js die Farbe und Textur durch Unterschiede in der Rendering-Umgebung und Material-Kompatibilität unterschiedlich dargestellt. Eine kleine Anpassung ist notwendig, um das gewünschte Aussehen zu erreichen.

In meinen täglichen Projekten kümmere ich mich hauptsächlich um CMS-Integrationen und Frontend-Design und -Entwicklung von Geschäftsanwendungen, daher habe ich weniger Gelegenheit, mit 3D-Grafiken zu arbeiten.

Aber wenn ich damit herumspielen, merke ich wieder: "Das ist ja wirklich cool."

Vielleicht war es genau diese damalige Faszination für interaktives Web, die mich auch zu modernen Technologien hingezogen hat.

Nun, heute ist wieder Next und Nuxt angesagt!

Zurück auf der Baustelle schaffe ich wieder interaktives Web auf andere Weise. 🚀