index

+ +

Needle Engine als Web Component

Needle Engine bietet eine einfach zu bedienende Web Component, die verwendet werden kann, um umfassende, interaktive 3D-Szenen direkt in HTML mit nur wenigen Codezeilen anzuzeigen. Es ist dieselbe Web Component, die unsere Integrationen antreibt.

Sobald Sie die Konfigurationsmöglichkeiten der Web Component ausschöpfen, können Sie diese mit benutzerdefinierten Skripten und Components sowie vollem programmatischem Zugriff auf den Scene Graph erweitern.

:::tip Nutzen Sie die Integrationen! Für komplexe 3D-Szenen und schnelle Iteration empfehlen wir die Verwendung von Needle Engine mit einer unserer Integrationen. Diese bieten einen leistungsstarken Erstellungs-Workflow, einschließlich Live-Vorschau, Hot Reloading und einer fortschrittlichen Build Pipeline mit 3D-Optimierungen. :::

Schnellstart

::: code-tabs @tab index.html @code html

@tab Ergebnis

<iframe src="/docs/code-samples/basic-webcomponent.html" style="
    width: 100%; 
    aspect-ratio: 16/9; 
    outline: none; 
    border: none;
    "
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; xr-spatial-tracking"
    allowfullscreen
    ></iframe>

:::Dieses Beispiel auf Stackblitz öffnen

Installation von npm

Sie können direkt mit Needle Engine arbeiten, ohne eine Integration zu verwenden. Needle Engine verwendet three.js als Scene Graph und Rendering Library, sodass alle Funktionalitäten von three.js auch in Needle verfügbar sind.

Sie können Needle Engine von npm installieren, indem Sie Folgendes ausführen: npm i @needle-tools/engine

Installation von needle-engine über ein CDN

Während unsere Standardvorlage vite verwendet, kann Needle Engine auch direkt mit Vanilla Javascript verwendet werden – ohne einen Bundler zu benutzen.

Sie können eine vollständige, prebundled Version von Needle Engine mit nur einer Codezeile zu Ihrer Website hinzufügen. Dies umfasst unsere Core Components, Physics, Particles, Networking, XR und mehr. Verwenden Sie dies, wenn Sie sich nicht sicher sind!

<script type="module" 
    src="https://cdn.jsdelivr.net/npm/@needle-tools/engine@4/dist/needle-engine.min.js">
</script>

Viele Beispiele finden Sie auf StackBlitz.

Rapid Prototyping auf StackBlitz

Für schnelle Experimente bieten wir einen praktischen Link zur Erstellung eines neuen, startbereiten Projekts: engine.needle.tools/new Eine große Sammlung von Beispielen ist auch in unserer Needle Engine Stackblitz Collection verfügbar.

Lokale Entwicklung mit VS Code

Wenn Sie mit Needle Engine ohne Integration arbeiten möchten, sollten Sie wahrscheinlich einen lokalen Server für Ihre Website ausführen. So können Sie das mit Visual Studio Code tun:

  1. Öffnen Sie den Ordner mit Ihrer HTML-Datei in Visual Studio Code.

  2. Installieren Sie die LiveServer-Erweiterung.

  3. Aktivieren Sie live-server (es gibt einen Knopf "Go Live" in der Fußzeile von VSCode)

  4. Öffnen http://localhost:5500/index.html in Ihrem Webbrowser, falls es nicht automatisch geöffnet wird.

three.js und Needle Engine

Da Needle Engine three.js als Scene Graph und Rendering Library verwendet, sind alle Funktionalitäten von three.js auch in Needle verfügbar und können von Component Scripts aus verwendet werden. Wir verwenden einen Fork von three.js, der zusätzliche Features und Verbesserungen enthält, insbesondere in Bezug auf WebXR, Animation und USDZ Export.

::: tip Stellen Sie sicher, dass Sie den Pfad <needle-engine src="myScene.glb"> zu einer bestehenden glb-Datei aktualisieren oder diese Beispiel-glb herunterladen und sie in denselben Ordner wie die index.html legen, sie myScene.glb nennen oder den src-Pfad aktualisieren. :::

@code

Auf github ansehen

Seite automatisch mit KI übersetzt

PreviousthreeNextunity

Last updated