+ 
+ 
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.
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-group ::: code-group-item index.html
<!DOCTYPE html>
<html>
<head>
<!-- Optional import map if you want to add additional JS modules and let's use use `import { Behaviour } from "@needle-tools/engine"` -->
<script type="importmap">
{
"imports": {
"@needle-tools/engine": "https://cdn.jsdelivr.net/npm/@needle-tools/engine/dist/needle-engine.min.js"
}
}
</script>
<!-- Import the Needle Engine module -->
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@needle-tools/engine/dist/needle-engine.min.js">
</script>
</head>
<body style="margin:0; padding:0;">
<!--
Add the <needle-engine> HTML component to your page, and specify a source file.
This .glb file contains interactions, sounds, a skybox, and animations,
because it was exported from our Unity integration.
-->
<needle-engine src="https://cloud.needle.tools/-/assets/ZUBcksQ0gIz-Q0gIz/file" background-blurriness="0.8"></needle-engine>
</body>
</html>::: ::: code-group-item Ergebnis
::: :::: [Dieses Beispiel auf Stackblitz öffnen](https://stackblitz.com/edit/needle-engine-prebundled?file=index.html)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/dist/needle-engine.min.js">
</script>Wenn Sie wissen, dass Ihr Projekt keine Physics-Funktionen benötigt, können Sie auch eine kleinere Version von Needle Engine verwenden, ohne die Physics Engine. Dies reduziert die gesamte Downloadgröße.
<script type="module"
src="https://cdn.jsdelivr.net/npm/@needle-tools/engine/dist/needle-engine.light.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:
- Öffnen Sie den Ordner mit Ihrer HTML-Datei in Visual Studio Code.
- Installieren Sie die LiveServer-Erweiterung.
- Aktivieren Sie live-server (es gibt einen Knopf "Go Live" in der Fußzeile von VSCode)
- Öffnen Sie
http://localhost:5500/index.htmlin 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.
Tips
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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="favicon.ico">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>Made with Needle</title>
<!-- importmap -->
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three/build/three.module.js",
"three/": "https://cdn.jsdelivr.net/npm/three",
}
}
</script>
<!-- parcel require must currently defined somewhere for peerjs -->
<script> var parcelRequire; </script>
<!-- the .light version does not include dependencies like Rapier.js (so no physics) to reduce the bundle size, if your project needs physics then just change it to needle-engine.min.js -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@needle-tools/engine/dist/needle-engine.min.js"></script>
<style>
body { margin: 0; }
needle-engine {
position: absolute;
display: block;
width: 100%;
height: 100%;
background: grey;
}
</style>
</head>
<body>
<!-- load a gltf or glb here as your scene and listen to the finished event to start interacting with it -->
<needle-engine src="myScene.glb" loadfinished="onLoaded"></needle-engine>
</body>
<script>
function onLoaded(ctx) {
console.log("Loading a glb file finished 😎");
console.log("This is the scene: ", ctx.scene);
}
</script>
</html>Seite automatisch mit KI übersetzt