+ 
+ 
Needle Engine en tant que composant web
Needle Engine fournit un composant web facile à utiliser qui peut être utilisé pour afficher des scènes 3D riches et interactives directement en HTML avec seulement quelques lignes de code. C'est le même composant web qui alimente nos intégrations.
Une fois que les options de configuration du composant web ne suffisent plus, vous pouvez l'étendre avec des scripts et des composants personnalisés, et un accès programmatique complet au graphe de scène.
Utilisez les intégrations !
Pour les scènes 3D complexes et l'itération rapide, nous recommandons d'utiliser Needle Engine avec l'une de nos intégrations. Elles offrent un flux de travail de création puissant, incluant une prévisualisation en direct, le rechargement à chaud (hot reloading) et un pipeline de build avancé avec des optimisations 3D.
Démarrage rapide
:::: 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 Résultat
::: :::: [Ouvrir cet exemple sur Stackblitz](https://stackblitz.com/edit/needle-engine-prebundled?file=index.html)Installation depuis npm
Vous pouvez travailler directement avec Needle Engine sans utiliser d'intégration. Needle Engine utilise three.js comme graphe de scène et bibliothèque de rendu, donc toutes les fonctionnalités de three.js sont également disponibles dans Needle.
Vous pouvez installer Needle Engine depuis npm en exécutant : npm i @needle-tools/engine
Installation de needle-engine depuis un CDN
Bien que notre modèle par défaut utilise vite, Needle Engine peut également être utilisé directement avec du vanilla Javascript – sans utiliser de bundler.
Vous pouvez ajouter une version complète et pré-packagée de Needle Engine à votre site web avec juste une ligne de code. Cela inclut nos composants de base, la physique, les particules, le réseautage, XR, et plus encore. Utilisez ceci si vous n'êtes pas sûr !
<script type="module"
src="https://cdn.jsdelivr.net/npm/@needle-tools/engine/dist/needle-engine.min.js">
</script>Si vous savez que votre projet ne nécessite pas de fonctionnalités de physique, vous pouvez également utiliser une version plus petite de Needle Engine, sans le moteur physique. Cela réduira la taille totale téléchargée.
<script type="module"
src="https://cdn.jsdelivr.net/npm/@needle-tools/engine/dist/needle-engine.light.min.js">
</script>De nombreux exemples peuvent être trouvés sur StackBlitz.
Prototypage rapide sur StackBlitz
Pour des expériences rapides, nous fournissons un lien pratique pour créer un nouveau projet prêt à démarrer : engine.needle.tools/new Une grande collection d'exemples est également disponible dans notre Needle Engine Stackblitz Collection
Développement local avec VS Code
Si vous souhaitez travailler avec Needle Engine sans aucune intégration, vous aurez probablement besoin d'exécuter un serveur local pour votre site web. Voici comment procéder avec Visual Studio Code :
- Ouvrez le dossier contenant votre fichier HTML dans Visual Studio Code.
- Installez l'extension LiveServer.
- Activez Live-Server (il y a un bouton "Go Live" dans le pied de page de VSCode).
- Ouvrez
http://localhost:5500/index.htmldans votre navigateur web, si cela ne s'ouvre pas automatiquement.
three.js et Needle Engine
Comme Needle Engine utilise three.js comme graphe de scène et bibliothèque de rendu, toutes les fonctionnalités de three.js sont également disponibles dans Needle et peuvent être utilisées depuis des scripts de composants. Nous utilisons un fork de three.js qui inclut des fonctionnalités et des améliorations supplémentaires, notamment en relation avec WebXR, Animation et l'exportation USDZ.
Conseil
Assurez-vous de mettre à jour le chemin <needle-engine src="myScene.glb"> vers un fichier glb existant ou téléchargez cet exemple de glb et placez-le dans le même dossier que le fichier index.html, nommez-le myScene.glb ou mettez à jour le chemin src.
<!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>Page automatiquement traduite par l'IA