Webdesign Trends 2021 – 3D Interaktionen mit three.js

Interaktionen auf einer neuen Ebene

Mit fortschreitender Technik kommen zum Glück neue technische Möglichkeiten. Die Idee 3D in Webseiten zu integrieren ist nicht neu – die Art der Interaktion allerdings schon. Wo früher Video verwendet werden mussten, finden Anwender heute einzelne 3D-Elemente, die sie mit dem Cursor bewegen können. Diese neue Dimension ermöglicht Interaktionen auf einer ganz neuen Ebene. Somit ist die 3D-Interaktion für mich einer der spannendsten Trends für das Jahr 2021.

In den nächsten Abschnitten zeige ich dir, wie ich die unten abgebildete Szene umgesetzt habe.

Schritt 1: Three.js einbinden

Damit wir mit 3D-Elementen arbeiten können, müssen wir in unserem Fall three.js in unser Projekt einbinden.

yarn add three

Schritt 2: Importieren der nötigen Assets

In meinen Projekten arbeite ich mit WebPack als Compiler meiner Source-Assets. Somit lege ich eine index.js an und importiere alles relevanten Module in meine Source-Index.

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js";
import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader.js";

Schritt 3: Die Grundelemente

Three.js arbeitet mit mehren Elementen um eine 3D-Umgebung zu erzeugen:

• Szene
• Camera
• Licht
• Renderer
• Model

Diese verschiedenen Grundelemente legen wir als erstes an. In dem gezeigten Beispiel, ist der Canvas Bildschirm füllend, daher habe ich eine Aspectratio von Browserbreite / Browserhöhe gewählt.

const canvas = document.getElementById("canvas");
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ alpha: false, antialias: true });

Schritt 4: Der Renderer

Im Schritt 4 implementieren wir den Renderer. Dieses Element ist für die Verarbeitung und korrekte Darstellung unserer eingegebenen Daten verantwortlich. Auf der Webseite von Three.js findest du eine Auswahl verschiedener, zur Verfügung stehender Renderer. In unserem Fall nutzen wir den WebGLRenderer.

const renderer = new THREE.WebGLRenderer({ alpha: false, antialias: true });
renderer.setClearColor(new THREE.Color(0x3542eb), 1);
renderer.setSize(window.innerWidth, window.innerHeight);

Um den Renderer nutzen zu können, genügt es nicht, ihn in einer Variablen zu speichern und mit Optionen zu füttern. Wir müssen den angelegten Renderer in unsere Szene einbinden.

canvas.appendChild(renderer.domElement);

Schritt 5: Das 3D-Objekt

Noch hat sich auf unserem Bildschirm nicht viel getan. Um mit unserem 3D-Object interagieren zu können müssen wir es der Szene und dem Renderer zur Verfügung stellen. Das machen wir mit einem Loader. In meinem Fall habe ich ein 3D-Model des Typs “obj”. Welche Modelltypen unterstütz werden findest du in der Dokumentation von Three.js

const objLoader = new OBJLoader();
objLoader.setPath(`${location.origin}/builds/threejs/assets/`);
objLoader.load("mesh.obj", (object) => {
    object.position.y -= 12;
    scene.add(object);
});

Schritt 6: Es werde Licht

Ohne Licht bleibt dein 3D Model im Verborgenen. Wie in der realen Welt musst du deiner Szene eine Lichtquelle hinzufügen um Objekte sehen zu können.

const light = new THREE.HemisphereLight(0x2cf8ca, 0x080820, 1.1);
scene.add(light);

Schritt 7: Das Finale

Fast geschafft. Nur noch den Loop zum Ausführen der zuvor festgelegten Optionen und Aktionen.

const render = function () {
	requestAnimationFrame(render);
	renderer.render(scene, camera);
};

render();

Geschafft, du hast dein erstes 3D-Element in ein Web-Projekt implementiert. Vielleicht ist dir aufgefallen das dein Objekt angezeigt wird, du aber nicht interagieren kannst. Ohne Interaktionen hätten wir auch auf die alten Methoden von Video und Foto zurückgreifen können. Bevor du den Loop ausführst, lege deine Controls fest und füge sie deiner Szene hinzu.

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.campingFactor = 0.25;
controls.enableZoom = false;

Zusammenfassung

Dank der technischen Entwicklung sind wir nun in der Lage die Interaktionen auf einer Webseite in eine neue Ebene zu heben. Mit dieser kurzen Anleitung wollte ich dir einen Einblick geben, welche Schritte notwendig sind um deine zukünftigen  Webdesign Projekte auf das nächste Level zu bringen. Der zusammengefasste Code ist nicht länger als 44 Zeilen und somit in kurzer Zeit eingebunden.

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js";
import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader.js";

const cameraPosition = 30;
const canvas = document.getElementById("canvas");
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = cameraPosition;

const renderer = new THREE.WebGLRenderer({ alpha: false, antialias: true });
renderer.setClearColor(new THREE.Color(0x3542eb), 1);
renderer.setSize(window.innerWidth, window.innerHeight);
canvas.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.campingFactor = 0.25;
controls.enableZoom = false;

const light = new THREE.HemisphereLight(0x2cf8ca, 0x080820, 1.1);
scene.add(light);

const mtlLoader = new MTLLoader();
mtlLoader.setPath(`${location.origin}/builds/threejs/assets/`);
mtlLoader.load("texture.mtl", (materials) => {
	materials.preload();

	const objLoader = new OBJLoader();
	objLoader.setMaterials(materials);
	objLoader.setPath(`${location.origin}/builds/threejs/assets/`);
	objLoader.load("mesh.obj", (object) => {
		object.position.y -= 12;
		scene.add(object);
	});
});

const render = function () {
	requestAnimationFrame(render);
	renderer.render(scene, camera);
};

render();

Hier kannst du die Scene bildschirmfüllend austesten: 3D-Interaktion mit Three.js