Wenn Sie bereits Grundkenntnisse in Three.js haben und sich für die Erstellung eines 360-Grad-Panorama-Viewers interessieren, sind Sie hier genau richtig. In diesem Artikel werden wir Schritt für Schritt durch die Erstellung eines solchen Viewers mit Three.js gehen. Ein 360-Grad-Panorama-Viewer ermöglicht es Benutzern, sich in einem immersiven 3D-Raum umzusehen, als ob sie sich tatsächlich vor Ort befinden würden. Wir werden die notwendigen Schritte erläutern, um ein eindrucksvolles Panorama zu erstellen und es mithilfe von Three.js in eine Webanwendung zu integrieren.

Vorbereitungen

Bevor wir mit der eigentlichen Implementierung beginnen, müssen wir sicherstellen, dass wir die richtigen Werkzeuge und Ressourcen zur Hand haben. Stellen Sie sicher, dass Sie über Node.js und npm (Node Package Manager) auf Ihrem Computer verfügen. Falls nicht, können Sie diese von der offiziellen Node.js-Website herunterladen und installieren.

1.1 Three.js und Abhängigkeiten installieren

Öffnen Sie Ihre Kommandozeile oder Ihr Terminal und navigieren Sie zu dem Verzeichnis, in dem Sie Ihr Projekt erstellen möchten. Führen Sie dann den folgenden Befehl aus, um Three.js und seine Abhängigkeiten zu installieren:

npm install three

Dieser Befehl installiert die neueste Version von Three.js in Ihrem Projekt.

1.2 Panorama-Bilder beschaffen

Um ein 360-Grad-Panorama zu erstellen, benötigen Sie entsprechende Bilder. Es gibt verschiedene Quellen, um kostenlose oder kostenpflichtige Panoramabilder zu finden. Stellen Sie sicher, dass die ausgewählten Bilder von hoher Qualität sind und das gewünschte Panorama gut darstellen.

1.3 Projektstruktur erstellen

Erstellen Sie eine Projektstruktur, die für Ihre Anwendung geeignet ist. Hier ist eine einfache Beispielstruktur:

my-panorama-app/
|-- index.html
|-- js/
|   |-- main.js
|-- assets/
|   |-- panorama.jpg
|-- node_modules/

- index.html wird unsere Haupt-HTML-Datei sein, in der wir die WebGL-Anzeige erstellen und unsere Panorama-View integrieren werden.
- js/main.js wird unseren JavaScript-Code enthalten, um Three.js zu initialisieren und das Panorama zu erstellen.
- assets/ ist der Ordner, in dem Sie Ihre Panorama-Bilder ablegen können.
- node_modules/ ist der Ordner, in dem npm die installierten Pakete speichert.
Mit diesen Vorbereitungen sind wir bereit, mit der Implementierung unseres 360-Grad-Panorama-Viewers in Three.js zu beginnen.

Three.js-Grundlagen und Szene erstellen

In diesem Abschnitt werden wir die Grundlagen von Three.js besprechen und eine grundlegende Szene für unseren 360-Grad-Panorama-Viewer erstellen.

2.1 Three.js-Grundlagen
Three.js ist eine JavaScript-Bibliothek, die es ermöglicht, 3D-Grafiken in Webanwendungen zu erstellen. Bevor wir weitermachen, stellen Sie sicher, dass Sie mit den wichtigsten Konzepten von Three.js vertraut sind, einschließlich:

Szene (Scene): Die Szene ist der Container, der alle 3D-Objekte, Lichter und Kameras enthält.

Kamera (Camera): Die Kamera definiert den Betrachtungswinkel und die Perspektive der Szene.

Renderer: Der Renderer ist verantwortlich für die Darstellung der 3D-Szene auf dem Bildschirm.

Mesh: Ein Mesh ist ein 3D-Objekt, das aus Geometrie (Vertices und Faces) besteht und Materialien zur Darstellung verwendet.

2.2 Szene erstellen

Um unsere 360-Grad-Panorama-View zu erstellen, müssen wir zuerst eine Three.js-Szene erstellen. Hier ist ein einfaches Beispiel, wie Sie dies tun können:

// main.js

// Importieren Sie Three.js
import * as THREE from  three ;

// Erstellen Sie eine Szene
const scene = new THREE.Scene();

// Erstellen Sie eine Kamera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 0.1); // Stellen Sie die Kameraposition ein

// Erstellen Sie den Renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Fügen Sie die Szene und die Kamera zum Renderer hinzu
renderer.render(scene, camera);

In diesem Code haben wir eine Szene, eine Kamera und einen Renderer erstellt. Die Kamera wurde so positioniert, dass sie leicht nach vorne schaut. Der Renderer wurde dem DOM hinzugefügt, um die Szene auf dem Bildschirm anzuzeigen. Beachten Sie, dass dies nur der Anfang ist; wir werden die Szene später um unser Panorama erweitern.

2.3 Panorama-Textur laden

Um unser 360-Grad-Panorama darzustellen, müssen wir die Panorama-Textur laden und auf eine Kugelprojektion anwenden. Dies ermöglicht es dem Benutzer, sich im Panorama umzusehen.

// Fortsetzung in main.js

// Laden Sie die Panorama-Textur
const loader = new THREE.TextureLoader();
const texture = loader.load( assets/panorama.jpg );

// Erstellen Sie ein Material mit der Panorama-Textur
const material = new THREE.MeshBasicMaterial({ map: texture });

// Erstellen Sie eine Kugelgeometrie für das Panorama
const geometry = new THREE.SphereGeometry(1, 32, 32);

// Erstellen Sie ein Mesh mit der Geometrie und dem Material
const panorama = new THREE.Mesh(geometry, material);

// Fügen Sie das Panorama zur Szene hinzu
scene.add(panorama);

// Aktualisieren Sie den Renderer
renderer.render(scene, camera);

In diesem Abschnitt haben wir die Panorama-Textur geladen, ein Material erstellt, eine Kugelgeometrie für das Panorama erstellt und ein Mesh erstellt. Schließlich haben wir das Panorama zur Szene hinzugefügt und den Renderer aktualisiert.

Jetzt haben wir eine grundlegende Three.js-Szene mit unserem 360-Grad-Panorama. Im nächsten Abschnitt werden wir interaktive Steuerungselemente hinzufügen, damit Benutzer das Panorama erkunden können.

Interaktive Steuerung hinzufügen

In diesem Abschnitt werden wir interaktive Steuerungselemente in unseren 360-Grad-Panorama-Viewer integrieren, damit Benutzer das Panorama erkunden können.

3.1 Steuerung mit OrbitControls

Um die Interaktivität zu ermöglichen, können wir die OrbitControls von Three.js verwenden. Diese erlauben es dem Benutzer, das Panorama zu drehen und zu zoomen. Sie müssen zuerst die OrbitControls in Ihr Projekt importieren und dann der Kamera hinzufügen:

// Fortsetzung in main.js

// Importieren Sie OrbitControls
import { OrbitControls } from  three/examples/jsm/controls/OrbitControls ;

// Erstellen Sie OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);

// Konfigurieren Sie die Steuerungsoptionen
controls.enableZoom = true;
controls.enablePan = false;
controls.minDistance = 1; // Minimale Entfernung zur Kamera
controls.maxDistance = 2; // Maximale Entfernung zur Kamera

In diesem Code haben wir die OrbitControls importiert und konfiguriert. Sie können die Steuerungsoptionen an Ihre Anforderungen anpassen.

3.2 Reaktion auf Fenstergrößenänderungen

Damit der Viewer auf Änderungen der Fenstergröße reagieren kann, sollten wir die Kamera und den Renderer entsprechend aktualisieren:

// Fortsetzung in main.js

// Reagieren Sie auf Änderungen der Fenstergröße
window.addEventListener( resize , () => {
  const newWidth = window.innerWidth;
  const newHeight = window.innerHeight;

  camera.aspect = newWidth / newHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(newWidth, newHeight);
});

// Eine Funktion zum Aktualisieren der Szene
function animate() {
  requestAnimationFrame(animate);
  
  // Fügen Sie hier gegebenenfalls Animationen hinzu
  
  renderer.render(scene, camera);
}

// Rufen Sie die animate-Funktion auf, um die Szene zu rendern
animate();

Die resize-Event-Listener-Funktion aktualisiert die Kamera und den Renderer, wenn sich die Fenstergröße ändert, um sicherzustellen, dass das Panorama korrekt angezeigt wird.

3.3 Vollbildmodus aktivieren (optional)

Wenn Sie Ihrem Panorama-Viewer eine Vollbild-Option hinzufügen möchten, können Sie dies mithilfe des folgenden Codes tun:

// Fortsetzung in main.js

// Funktion zum Aktivieren des Vollbildmodus
function toggleFullscreen() {
  if (document.fullscreenElement) {
    document.exitFullscreen();
  } else {
    document.documentElement.requestFullscreen();
  }
}

// Fügen Sie eine Event-Listener für den Vollbildmodus hinzu
document.addEventListener( keydown , (event) => {
  if (event.key ===  f ) {
    toggleFullscreen();
  }
});

In diesem Code können Benutzer den Vollbildmodus aktivieren, indem sie die Taste "F" drücken.

Jetzt haben wir interaktive Steuerungselemente und eine reaktionsfähige Szene für unseren 360-Grad-Panorama-Viewer erstellt.

Zusätzliche Funktionen hinzufügen

In diesem Abschnitt werden wir einige zusätzliche Funktionen hinzufügen, um das Benutzererlebnis unseres 360-Grad-Panorama-Viewers mit Three.js zu verbessern.

4.1 Hotspots für interaktive Elemente

Ein beliebtes Feature in 360-Grad-Panorama-Viewern sind Hotspots, die auf interaktive Elemente oder Informationen hinweisen. Wir können Hotspots erstellen, die beim Klicken auf sie Aktionen auslösen. Zuerst erstellen wir eine Klasse für Hotspots:

// Fortsetzung in main.js

// Klasse für Hotspots
class Hotspot {
  constructor(position, onClick) {
    const hotspotGeometry = new THREE.SphereGeometry(0.02, 32, 32);
    const hotspotMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
    this.mesh = new THREE.Mesh(hotspotGeometry, hotspotMaterial);
    this.mesh.position.copy(position);
    this.onClick = onClick;
    this.mesh.on( click , this.handleOnClick.bind(this));
  }

  handleOnClick() {
    if (typeof this.onClick ===  function ) {
      this.onClick();
    }
  }
}

Jetzt können wir Hotspots zur Szene hinzufügen:

// Fortsetzung in main.js

// Erstellen Sie einige Hotspots
const hotspot1 = new Hotspot(new THREE.Vector3(0.5, 0.1, -0.5), () => {
  // Aktion beim Klicken auf Hotspot 1
  console.log( Hotspot 1 geklickt! );
});

const hotspot2 = new Hotspot(new THREE.Vector3(-0.3, -0.1, 0.7), () => {
  // Aktion beim Klicken auf Hotspot 2
  console.log( Hotspot 2 geklickt! );
});

// Fügen Sie die Hotspots zur Szene hinzu
scene.add(hotspot1.mesh);
scene.add(hotspot2.mesh);

4.2 Textanmerkungen hinzufügen

Zusätzlich zu Hotspots können wir Textanmerkungen hinzufügen, um Informationen über bestimmte Bereiche im Panorama bereitzustellen. Hier ist eine einfache Methode, um Textanmerkungen zu erstellen:

// Fortsetzung in main.js

// Funktion zum Hinzufügen von Textanmerkungen
function addAnnotation(position, text) {
  const spriteMaterial = new THREE.SpriteMaterial({ map: new THREE.TextureLoader().load( assets/annotation.png ) });
  const sprite = new THREE.Sprite(spriteMaterial);
  sprite.position.copy(position);
  scene.add(sprite);

  // Fügen Sie Text hinzu
  const loader = new THREE.FontLoader();
  loader.load( assets/font.json , (font) => {
    const textGeometry = new THREE.TextGeometry(text, {
      font: font,
      size: 0.02,
      height: 0.001,
    });
    const textMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 });
    const textMesh = new THREE.Mesh(textGeometry, textMaterial);
    textGeometry.computeBoundingBox();
    const textWidth = textGeometry.boundingBox.max.x - textGeometry.boundingBox.min.x;
    textMesh.position.set(position.x - textWidth / 2, position.y - 0.04, position.z);
    scene.add(textMesh);
  });
}

// Beispiel für das Hinzufügen von Textanmerkungen
addAnnotation(new THREE.Vector3(0.3, 0.1, -0.3),  Interessanter Ort );
addAnnotation(new THREE.Vector3(-0.2, -0.05, 0.6),  Historische Stätte );

4.3 Laden von externen Panoramen

Um die Vielseitigkeit des Viewers zu erhöhen, können wir die Möglichkeit hinzufügen, externe Panoramabilder zu laden. Dies kann mithilfe von Benutzereingabe oder einer Liste von Panorama-URLs erfolgen. Implementieren Sie eine Funktion, die das aktuelle Panorama durch ein anderes ersetzt:

// Fortsetzung in main.js

// Funktion zum Laden eines neuen Panoramas
function loadPanorama(panoramaURL) {
  // Laden Sie das neue Panorama
  const newTexture = loader.load(panoramaURL);
  material.map = newTexture;
}

// Beispiel: Laden eines neuen Panoramas bei Benutzeraktion
document.getElementById( load-panorama-button ).addEventListener( click , () => {
  const newPanoramaURL = prompt( Geben Sie die URL des neuen Panoramas ein: );
  if (newPanoramaURL) {
    loadPanorama(newPanoramaURL);
  }
});

In diesem Beispiel verwenden wir eine Schaltfläche (load-panorama-button), um den Benutzer nach der URL eines neuen Panoramas zu fragen und dann die Funktion loadPanorama aufzurufen.

Mit diesen zusätzlichen Funktionen haben wir unseren 360-Grad-Panorama-Viewer mit Three.js erweitert, um interaktive Hotspots, Textanmerkungen und die Möglichkeit zum Laden externer Panoramen hinzuzufügen. Ihr Panorama-Viewer ist jetzt bereit, um beeindruckende 360-Grad-Erfahrungen zu bieten.