Zum Inhalt springen
Alle Technologien

Three.jsdie Bibliothek für 3D und WebGL im Browser

Three.js ist die etablierte JavaScript-Bibliothek für 3D im Browser: Sie steuert WebGL an und bringt 3D- und Partikel-Effekte ohne Plugin und ohne separate App auf die Seite. Wir arbeiten meist mit React Three Fiber, der React-Anbindung von Three.js, und importieren 3D-Modelle als GLTF oder GLB, die wir für den Web-Einsatz optimieren (Polygon-Reduktion, Textur-Kompression, LOD-Stufen). Eingesetzt wird Three.js für gezielte Akzente: Partikel-Hintergründe, interaktive Hero-Sections oder scroll-getriebene 3D-Stories, immer mit Fallbacks für schwache GPUs und einem Auge auf die Performance auf Mobilgeräten. Für komplexe Konfiguratoren oder AR/VR verweisen wir ehrlich an spezialisierte Studios. Die 3D-Akzente selbst liefern wir diskret unter Ihrem Namen.

Wofür sich Three.js eignet

  • Partikel- und Hintergrund-Animationen auf Marketing-Sites
  • Interaktive 3D-Akzente (Hero-Sections, Product-Showcases)
  • Einfache 3D-Produktvisualisierungen (GLTF-Modelle)
  • Datenvisualisierungen mit 3D-Charakter
  • Scroll-getriebene 3D-Stories

Three.js in der Praxis

scene.ts
import * as THREE from 'three'

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100)
camera.position.z = 4

const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
document.body.append(renderer.domElement)

const mesh = new THREE.Mesh(
  new THREE.IcosahedronGeometry(1, 0),
  new THREE.MeshStandardMaterial({ color: 0x38bdf8, flatShading: true }),
)
scene.add(mesh, new THREE.HemisphereLight(0xffffff, 0x080820, 1.5))

// Render-Loop (setAnimationLoop ist WebXR- und Tab-freundlich)
renderer.setAnimationLoop((time) => {
  mesh.rotation.y = time * 0.0005
  renderer.render(scene, camera)
})

So arbeiten wir mit Three.js

  1. 3D-Konzept und -Design
  2. Three.js Setup und Scene-Konfiguration
  3. 3D-Modell-Integration
  4. Performance-Optimierung (LOD, Culling)
  5. Interaktivität und Animationen
  6. Mobile-Optimierung

Das liefern wir bei Three.js

  • Three.js-Anwendung
  • 3D-Scene-Setup
  • Performance-Optimierungen
  • Mobile-Responsive Lösung
  • Dokumentation

Häufige Fragen zu Three.js

Passt zu Three.js

GSAPFramer Motion

Interesse an Three.js?

Lassen Sie uns über Ihr Projekt sprechen. Wir beraten Sie gerne unverbindlich.

Jetzt kontaktieren