Attribute der Needle Engine Webkomponente

Needle Engine ist als Webkomponente verfügbar: <needle-engine>. Diese Komponente kann verwendet werden, um 3D-Szenen, Modelle und mehr in einem Webbrowser zu laden und anzuzeigen. Sie verfügt über eine Reihe von Attributen, mit denen Sie ihr Verhalten, Aussehen und Gefühl konfigurieren können. Alle diese Einstellungen können per Code überschrieben werden, aber die Attribute sind eine bequeme Möglichkeit, sie in HTML einzurichten.

Die Webkomponente befindet sich in index.html

Egal ob Sie ein Projekt über Unity oder Blender oder direkt im Code erstellen, Sie können die <needle-engine> Webkomponente verwenden und anpassen. Normalerweise finden Sie sie in der Datei index.html Ihres Webprojekts.

Die folgende Tabelle zeigt eine Liste der verfügbaren Attribute und deren Beschreibungen.

Attribut	Beschreibung
Laden
`src`	Pfad zu einer oder mehreren glTF- oder glb-Dateien. Unterstützte Typen sind `string`, `string[]` oder ein stringifiziertes Array (`,` getrennt)
`dracoDecoderPath`	URL zum draco decoder, z.B. `./include/draco/` zur Verwendung des lokalen Draco decoders
`dracoDecoderType`	draco decoder type. Optionen sind `wasm` oder `js`. Siehe three.js documentation
`ktx2DecoderPath`	URL zum KTX2 decoder, z.B. `./include/ktx2/` zur Verwendung des lokalen KTX2 decoders
Rendern
`background-color`	optional, hex color zur Verwendung als Hintergrundfarbe. Beispiele: `rgb(255, 200, 100)`, `#dddd00`
`background-image`	optional, URL zu einem skybox image (Hintergrundbild) oder ein Voreinstellungs-String: `studio`, `blurred-skybox`, `quicklook`, `quicklook-ar`
`background-blurriness`	optional, bluriness Wert zwischen 0 (keine Unschärfe) und 1 (maximale Unschärfe) für das `background-image`. Beispiel: `background-blurriness="0.5"`
`environment-image`	optional, URL zu einem environment image (environment light) oder ein Voreinstellungs-String: `studio`, `blurred-skybox`, `quicklook`, `quicklook-ar`
`contactshadows`	optional, rendert contact shadows
`tone-mapping`	optional, unterstützte Werte sind `none`, `linear`, `neutral`, `agx`
`tone-mapping-exposure`	optionale Zahl, z.B. Erhöhung der exposure mit `tone-mapping-exposure="1.5"`, erfordert die Einstellung von `tone-mapping`
Interaktion
`autoplay`	hinzufügen oder auf `true` setzen, um Animationen automatisch abzuspielen, z.B. `<needle-engine autoplay`
`camera-controls`	hinzufügen oder auf `true` setzen, um automatisch OrbitControls hinzuzufügen, wenn keine camera controls in der Szene gefunden werden
`auto-rotate`	hinzufügen, um auto-rotate zu aktivieren (wird nur mit `camera-controls` verwendet)
Ereignisse
`loadstart`	Name der Funktion, die beim Laden aufgerufen werden soll. Beachten Sie, dass die Argumente `(ctx:Context, evt:Event)` sind. Sie können `evt.preventDefault()` aufrufen, um das Standard-loading overlay auszublenden
`progress`	Name der Funktion, die bei Lade-Updates aufgerufen werden soll. `onProgress(ctx:Context, evt: {detail: {context:Context, name:string, index:number, count:number, totalProgress01:number}) { ... }`
`loadfinished`	Name der Funktion, die aufgerufen werden soll, wenn das Laden abgeschlossen ist
Ladeanzeige	Verfügbare Optionen zur Änderung des Aussehens der Needle Engine loading display. Verwenden Sie `?debugloadingrendering` für einfacheres Bearbeiten
`loading-background`	PRO — Standard: `transparent`. Ändert die loading background color (z.B. `#dd5500`)
`loading-logo-src`	PRO — Ändert das loading logo image (z.B. `https://yourdomain.com/logo.png` oder `/logo.png`)
`hide-loading-overlay`	PRO — Zeigt das loading overlay nicht an
Intern
`hash`	Wird intern verwendet, wird an die geladenen Dateien angehängt, um ein Update zu erzwingen (z.B. wenn der Browser eine glb-Datei zwischengespeichert hat). Sollte nicht manuell bearbeitet werden.

Upgrade-Hinweis:

Entfernte Attribute in Needle Engine 4.5.0 loading-style, loading-background-color, loading-text-color, primary-color, secondary-color

Beispiele

<!-- Setzt den Pfad zu einem benutzerdefinierten glb, das geladen werden soll -->
<needle-engine src="path/to/your.glb"></needle-engine>

<!-- Überschreibt den Speicherort des draco decoders -->
<needle-engine src="path/to/your.glb" dracoDecoderPath="./include/draco/"></needle-engine>

Setzen von environment images, Abspielen von Animationen und automatische camera controls. Live auf stackblitz ansehen

<needle-engine
      camera-controls
      auto-rotate
      autoplay
      skybox-image="https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/industrial_sunset_puresky_1k.hdr"
      environment-image="https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/industrial_sunset_puresky_1k.hdr"
      src="https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/DamagedHelmet/glTF-Embedded/DamagedHelmet.gltf"
      >
      </needle-engine>

Empfangen eines Events, wenn der needle-engine context das Laden abgeschlossen hat:

<needle-engine loadfinished="onLoadFinished"> </needle-engine>
<script>
    function onLoadFinished() {
        console.log("Needle Engine hat das Laden abgeschlossen");
    }
</script>

Benutzerdefinierte Ladeanzeige (PRO)

Sie können das Aussehen von Needle Engine einfach ändern, indem Sie die entsprechenden Attribute für die <needle-engine> Webkomponente festlegen. Details finden Sie in der obigen Tabelle.

Code auf github ansehen

Seite automatisch mit KI übersetzt