3D im Web mit Three.js: eine gemütliche Ecke in einer HTML-Datei

Ein rotierendes 3D-Modell auf einer Landingpage zieht die Aufmerksamkeit auf eine Weise auf sich, wie es ein flaches Bild nicht kann. Die gute Nachricht: GLB ist das native Format der Web-3D-Welt, daher braucht es überraschend wenig Code, um unsere Modelle im Browser zu zeigen.

In diesem Tutorial bauen wir mit Three.js eine kleine interaktive Szene: eine Leseecke mit dem Holzsessel, der Keramik-Tischleuchte, dem Eichen-Nachttisch und der Geigenfeige im Korb.

Was Sie brauchen

• Die GLB-Dateien der Modelle, abgelegt in einem Ordner models neben Ihrer HTML-Datei.

• Einen lokalen Webserver. Browser blockieren das Laden von Dateien direkt von der Festplatte, starten Sie also zum Beispiel npx serve oder die Erweiterung Live Server in VS Code.

• Keine Build-Tools: Wir laden Three.js per Import Map von einem CDN.

Der vollständige Code

Erstellen Sie eine index.html mit diesem Inhalt:

<!doctype html>
<html>
  <head>
    <style>body { margin: 0; background: #f3efe8; }</style>
    <script type="importmap">
      { "imports": {
        "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
        "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
      } }
    </script>
  </head>
  <body>
    <script type="module">
      import * as THREE from 'three';
      import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
      import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
      import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';

      const renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setSize(innerWidth, innerHeight);
      renderer.setPixelRatio(devicePixelRatio);
      document.body.appendChild(renderer.domElement);

      const scene = new THREE.Scene();
      scene.background = new THREE.Color('#f3efe8');
      const pmrem = new THREE.PMREMGenerator(renderer);
      scene.environment = pmrem.fromScene(new RoomEnvironment()).texture;

      const camera = new THREE.PerspectiveCamera(40, innerWidth / innerHeight, 0.1, 100);
      camera.position.set(2.5, 1.6, 3);
      const controls = new OrbitControls(camera, renderer.domElement);
      controls.target.set(0, 0.6, 0);
      controls.enableDamping = true;

      const loader = new GLTFLoader();
      const place = (file, x, z, rotY = 0) =>
        loader.load('models/' + file, (gltf) => {
          gltf.scene.position.set(x, 0, z);
          gltf.scene.rotation.y = rotY;
          scene.add(gltf.scene);
        });

      place('wooden-armchair.glb', 0, 0, 0.4);
      place('oak-bedside-table.glb', 0.9, -0.2);
      place('ceramic-table-lamp.glb', 0.9, -0.2);
      place('fiddle-leaf-fig.glb', -0.9, -0.4);

      renderer.setAnimationLoop(() => { controls.update(); renderer.render(scene, camera); });

      addEventListener('resize', () => {
        camera.aspect = innerWidth / innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(innerWidth, innerHeight);
      });
    </script>
  </body>
</html>

Benennen Sie Ihre heruntergeladenen Dateien passend zu den Namen im Code um oder ändern Sie die Namen im Code. Starten Sie Ihren lokalen Server und öffnen Sie die Seite. Mit der Maus können Sie die Szene drehen, mit dem Mausrad zoomen.

Was der Code macht

Renderer und Szene. Wir erstellen einen WebGL-Renderer, der das Fenster ausfüllt, und eine Szene mit warmer Hintergrundfarbe.

Umgebungsbeleuchtung. RoomEnvironment erzeugt eine weiche, studioähnliche Lichtumgebung. PBR-Materialien brauchen eine Umgebung, die sie spiegeln können, und dieser Einzeiler verleiht unseren Modellen glaubwürdige Reflexionen, ohne ein HDRI laden zu müssen.

Kamera und Steuerung. Eine perspektivische Kamera blickt auf die Ecke, und OrbitControls ermöglicht Besuchern das Drehen und Zoomen. Damping sorgt dafür, dass sich die Bewegung flüssig anfühlt.

Modelle laden. GLTFLoader liest jede GLB samt Materialien und Texturen ein und liefert uns ein Szenenobjekt, das wir positionieren und drehen können. Unsere Modelle nutzen reale Maße in Metern und haben ihren Ursprung am Fuß – sie auf den Boden zu stellen, heißt also einfach y = 0.

Tipps zur Positionierung

• Objekte stapeln. Die Lampe muss auf dem Tisch stehen. Heben Sie sie um die Tischhöhe an: Ersetzen Sie in der Positionszeile die 0 durch die Höhe des Tisches oder berechnen Sie sie mit new THREE.Box3().setFromObject(table).

• Drehung. rotation.y wird in Radiant angegeben: Math.PI / 2 dreht ein Modell um 90 Grad.

• Maßstab. Alle unsere Modelle haben denselben Maßstab, Sie sollten also nichts skalieren müssen.

Fit für den Produktiveinsatz

• Schatten. Fügen Sie ein DirectionalLight mit castShadow = true hinzu und setzen Sie castShadow auch auf den Meshes der Modelle, damit die Objekte geerdet wirken.

• Ladebildschirm. Mit THREE.LoadingManager zeigen Sie den Fortschritt an, während die Modelle geladen werden.

• Komprimierung. Bei großen Szenen können Tools wie gltf-transform Geometrie und Texturen weiter komprimieren. Dateien für Ihr eigenes Projekt zu konvertieren, ist nach unserer Lizenz erlaubt.

• Einfachere Alternative. Wenn Sie nur ein einzelnes Modell mit Drehen und Zoomen brauchen, zeigt die Webkomponente model-viewer von Google eine GLB mit einem einzigen HTML-Tag an.

Jetzt sind Sie dran

Tauschen Sie die Leseecke gegen eine Küche, ein Kinderzimmer oder ein winziges Dorf. Jedes Modell im Shop ist eine GLB, die mit genau diesem Code funktioniert.