Eine interessante Möglichkeit, sich abzuheben und die Aufmerksamkeit Ihrer Benutzer zu gewinnen, ist die Verwendung von 3D-Elementen in Ihren Web-Erlebnissen. In diesem Beitrag werden wir sehen, wie wir interaktive 3D-Icons mit React und React Three Fiber (R3F) unter Verwendung von TypeScript erstellen können. Wenn Sie TS nicht verwenden möchten, können Sie die Typen einfach entfernen, wo immer es nötig ist.

Am Ende dieses Beitrags finden Sie den Link zum vollständigen Code.

Abhängigkeiten

Um zu beginnen, installieren Sie die folgenden Abhängigkeiten in Ihrer React-App: three: Die Kernbibliothek Three.js, die es uns ermöglicht, mit 3D-Objekten im Browser zu arbeiten. react-three/fiber: Ein React-Renderer für Three.js. @react-three/drei: Ein hilfreiches Toolkit für react-three/fiber.

Um sie zu installieren, geben Sie in Ihrem Terminal ein

npm install three @react-three/fiber @react-three/drei 

Erstellung der 3D-Icons

Einrichtung der Leinwand und Beleuchtung

Als Nächstes müssen wir unsere 3D-Elemente in die Canvas-Komponente von @react-three/fiber einwickeln:

import { Canvas } from "@react-three/fiber";

function App() {
  return (
    <div className="App">
      <Canvas
        style={{ width: "100vw", height: "90vh" }} //um unsere Leinwand fast den ganzen Bildschirm einzunehmen
        camera={{ position: [0, 0, 15] }} // 'zoom out' von 15 Metern
      >
        <directionalLight position={[0, 1, 2]} intensity={5} color="white" />
        <ambientLight intensity={0.6} />
        {icons.map((icon, index) => {
        const gap = 5;
        // prettier-ignore
        const horizontalPosition = gap - (index * gap);

        return (
          <Icon3D
            imagePath={icon}
            position={[horizontalPosition, 1, 0]}
            shape={shape}
          />
        );
      })}

      </Canvas>
}

• directionalLight: verbessert das Schattieren und die Beleuchtung und bietet Tiefe. Wir können mit der 'Position' und 'Intensität' nach unserem Geschmack spielen.

• ambientLight: bietet ein gleichmäßiges Licht für die Szene.

• icons.map: in diesem Code durchlaufen wir ein Array von Icons, aber wenn Sie möchten, können Sie nur ein 'Icon3D' hinzufügen, indem Sie als imagePath das von Ihnen gewünschte Icon übergeben.

Definition der Icon3D-Komponente

Hier werden wir die Icons platzieren und die Formen generieren. Lassen Sie uns den vollständigen Code sehen, dann besuchen wir Schritt für Schritt, was passiert:

import { Decal, Float, useTexture } from "@react-three/drei";
import { useFrame } from "@react-three/fiber";
import { useRef, useState } from "react";
import { Mesh } from "three";
import { white, blue } from "../../App";

const RADIUS = 2;

export function Icon3D({ imagePath, position, shape }: Icon3DProps) {
  const texture = useTexture(imagePath);

  return (
        <mesh>
 	<dodecahedronGeometry args={[RADIUS, 0]} />
            <meshStandardMaterial
           	 	metalness={0.6} //um ein realistischeres metallisches Gefühl für das Icon hinzuzufügen
           		roughness={0.5}
                />
          <Decal
            position={[0, 0, 2]}
            rotation={[2 * Math.PI, 0, 6.25]}
            scale={1}
            map={texture}
          />
        </mesh>
  );
}

• useTexture lädt Texturen für unsere Icons.

• 'mesh': in R3F sind unsere 3D-Elemente in einem Mesh eingewickelt. Das Mesh benötigt Geometrie und Material. Denken Sie an das Mesh als den kompletten Körper, die Geometrie als die Knochen und das Material als die Haut.

• 'dodecahedronGeometry': Die spezifische Form dieses Meshs, aber es gibt andere Möglichkeiten. Alle in Three.js verfügbaren Geometrien können in R3F verwendet werden. Für weitere Informationen, überprüfen Sie die Three.js-Dokumentation oder R3F-Dokumentation. 'meshStandardMaterial': Die Haut unseres Meshs, beeinflusst, wie die Schatten und Lichter mit dem Mesh interagieren. Für weitere Informationen suchen Sie in der Dokumentation.

• 'Decal': Dies ist eine Komponente, die von '@react-three/drei' kommt, und es uns ermöglicht, ein Bild auf einer Oberfläche hinzuzufügen. Wir können mit der Position, Rotation und Skalierung spielen, um es richtig anzupassen. Dann übergeben wir unsere Textur an seine Map-Eigenschaften.

Interaktivität zu 3D-Elementen hinzufügen

Jetzt, da wir das Grundgerüst unseres 3D-Icons haben, können wir anfangen, zusätzliche Funktionen hinzuzufügen, wie Benutzerinteraktion.

Eines der coolsten Dinge an R3F ist die Möglichkeit, mit 3D-Elementen als React-Komponenten zu interagieren, sodass wir Reacts Event-Handling-Muster verwenden können. Zum Beispiel, falls wir Hover- und Klickevents hinzufügen möchten, ist es ziemlich praktisch:

const mesh = useRef<Mesh | null>(null); //wir initialisieren die Referenz zum Mesh, damit wir damit interagieren können 
const [hovered, setHovered] = useState(false);
const [clicked, setClicked] = useState(false);

// Innerhalb der Rückgabeerklärung der Komponente
<mesh
  ref={mesh} // wir übergeben die Ref an das Mesh
  onPointerEnter={() => setHovered(true)} // Mesh erkennt auch andere Events
  onPointerLeave={() => setHovered(false)}   
  onClick={() => setClicked(!clicked)}
>
  {/* ... */}  // wir können dann personalisieren, was die Interaktionen mit dem Mesh machen
</mesh>

• Die Meshes erkennen verschiedene Ereignisse. Um alle zu sehen, überprüfen Sie die R3F-Dokumentation zu Ereignissen.

Fazit

Durch die Nutzung von React und R3F eröffnen wir eine neue Welt der Möglichkeiten für Web-Erlebnisse. Wir können die vertrauten Eigenschaften von React mit der Kraft von Three.js durch R3F auf intuitive Weise nutzen.

Hoffentlich hat Ihnen dieser Beitrag das grundlegende Wissen vermittelt, um mit dieser leistungsstarken Kombination zu beginnen.

Um mehr zu erkunden, können Sie den vollständigen Code hier zugreifen.

Bis zum nächsten Mal!