Die <needle-engine> web-component verfügt über eine schöne Sammlung integrierter attribute, die verwendet werden können, um das Erscheinungsbild der geladenen scene zu ändern, ohne die three.js scene direkt hinzufügen oder bearbeiten zu müssen. Die folgende Tabelle zeigt eine Liste der wichtigsten:

Attribut	Beschreibung
Laden
`src`	Pfad zu einer oder mehreren glTF- oder glb-Dateien. Unterstützte Typen sind `string`, `string[]` oder ein stringifiziertes array (durch `,` getrennt)
`dracoDecoderPath`	URL zum draco decoder
`dracoDecoderType`	draco decoder type. Optionen sind `wasm` oder `js`. Siehe three.js documentation
`ktx2DecoderPath`	URL zum KTX2 decoder
Rendern
`background-color`	optional, hex color zur Verwendung als Hintergrundfarbe. Beispiele: `rgb(255, 200, 100)`, `#dddd00`
`background-image`	optional, URL zu einem skybox Bild (Hintergrundbild) oder ein preset 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 preset 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 animations 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 scene gefunden werden
`auto-rotate`	hinzufügen, um auto-rotate zu aktivieren (wird nur mit `camera-controls` verwendet)
Ereignisse
`loadstart`	Name der function, die beim Laden aufgerufen werden soll. Beachten Sie, dass die arguments `(ctx:Context, evt:Event)` sind. Sie können `evt.preventDefault()` aufrufen, um das Standard-loading overlay auszublenden
`progress`	Name der function, die bei Ladeupdates aufgerufen werden soll. `onProgress(ctx:Context, evt: {detail: {context:Context, name:string, index:number, count:number, totalProgress01:number}) { ... }`
`loadfinished`	Name der function, 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-style`	Optionen sind `light` oder `dark`
`loading-background-color`	PRO – Ändert die loading background color (z.B. `=#dd5500`)
`loading-text-color`	PRO – Ändert die loading text color
`loading-logo-src`	PRO – Ändert das loading logo image
`primary-color`	PRO – Ändert die primary loading color
`secondary-color`	PRO – Ändert die secondary loading color
`hide-loading-overlay`	PRO – Zeigt das loading overlay nicht an, hinzugefügt in Needle Engine > 3.17.1
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.

Beispiele

<!-- Setting the path to a custom glb to be loaded -->
<needle-engine src="path/to/your.glb"></needle-engine>

<!-- Overriding where the draco decoder is located -->
<needle-engine src="path/to/your.glb" dracoDecoderPath="path/to/draco/folder"></needle-engine>

Setting environment images, playing animation and automatic camera controls. See it live on stackblitz

<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>

Receiving an event when the needle-engine context has finished loading:

<needle-engine loadfinished="onLoadFinished"> </needle-engine>
<script>
    function onLoadFinished() {
        console.log("Needle Engine has finished loading");
    }
</script>

Benutzerdefinierte Ladeanzeige (PRO)

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

See code on github Page automatically translated using AI