---
title: "3D Websites mit THREE.js"
url: "https://www.intersim.ch/insights/3d-websites-mit-three-js"
description: "Mit der von THREE.js zur Verfügung gestellten Vereinfachung von WebGL werden spannende 3D Interaktionen und Visualisierungen massentauglich."
---

# 3D Websites mit THREE.js

[Technik & Innovation](/insights/?filter=technology-innovation)

 ![3D Büro als Beispiel](/_astro/3d-office-beispiel.sQDeSslU_Z1xE2yt.jpg)

Mit der von THREE.js zur Verfügung gestellten Vereinfachung von WebGL werden spannende 3D Interaktionen und Visualisierungen massentauglich.

Autor:in

Dominik Albrecht

Veröffentlicht

26\. November 2021

## 3D Websites mit THREE.js

Browser unterstützen WebGL (Web Graphics Library), und die damit verbundene Darstellung von 2D/3D Inhalten, bereits seit einiger Zeit nativ durch das «canvas»-Element. Allerdings ist die Arbeit mit der WebGL API ziemlich umständlich, und limitiert die damit umgesetzten Resultate durch die Komplexität der Entwicklung. Die Library THREE.js bietet Abstraktionen für die Erzeugung und Darstellung von 3D Objekten, Kameras und Szenen. Mittlerweile findet sich THREE.js in fast jedem Bereich der Webentwicklung. So werden zum Beispiel [Animationen](https://github.com/home) dargestellt, [Geschichten](https://cloud.google.com/infrastructure) erzählt, [Produkte](https://webxr-sneakers.lusion.co/) präsentiert, oder sogar virtuelle [Showrooms](https://showroom.littleworkshop.fr/) in Webseiten integriert. Von der Erzeugung primitiver Objekte (Würfel, Kugel, Pyramide etc.) über Echtzeit-Belichtung bis zum Import bestehender 3D-Objekten bietet THREE.js praktische Hilfsmittel.

Als Beispiel aus der Praxis hier die Schritte, um einen kleinen 3D-Raum im Browser darzustellen. Derselbe Vorgang könnte zum Beispiel zur Anzeige eines Produktes verwendet werden.

Zur Vereinfachung der Erstellung sämtlicher Objekte wurde der Raum zuerst in [Blender](https://www.blender.org/) modelliert, mit Texturen versehen und im GLTF-Format exportiert.

![Raum in Blender modelliert](/_astro/blender-3d.DWCDcFcU_ZRgdq6.webp)

Mithilfe von THREE.js kann diese Geometrie dann importiert und mit den Texturen kombiniert werden. Zur Visualisierung wird eine Kamera platziert und die Steuerung initialisiert. Da die Szene bereits in Blender belichtet wurde, und diese Informationen auf der [«Baked»](http://wiki.polycount.com/wiki/Texture_Baking) Textur vorhanden sind, müssen keine Lichter hinzugefügt werden.

![Import der 3D Geometrie](/_astro/object-load-3js.BGoXAwB4_Nls7r.webp) ![Platzierung einer Kamera zur
Visualisierung](/_astro/camera-controls.DWOdBImc_1n5CCD.webp)

Zur Veranschaulichung findet sich [hier](https://codesandbox.io/p/sandbox/romantic-heyrovsky-45uzo) eine vereinfachte Implementation.

Durch die Popularität der Library sind mittlerweile auch Integrationen für bekannte Frameworks wie zum Beispiel React entstanden. [React Three Fiber](https://github.com/pmndrs/react-three-fiber) ermöglicht noch einfachere Interaktionen, durch die Verbindung von Komponenten und deklarativem 3D-Rendering. Diese [simple Demonstration](https://codesandbox.io/p/sandbox/rrppl0y8l4?file=%2Fsrc%2FApp.js) ist exemplarisch für die Möglichkeiten mit diesem Ansatz.

Die Anwendungsmöglichkeiten von 3D im Web kennen keine Grenzen. Immer mehr wird auf die Technologie zurückgegriffen, um beeindruckende und sich von der Masse abhebende Seiten zu kreieren. Die Zukunft im Web-Bereich bleibt also mit wachsenden Möglichkeiten sicherlich spannend.

## Verwandte Themen

Weiterführende Projekte und Inhalte zum Thema

[Coaching](/projects/?filter=coach)