index
Last updated
Last updated
+ +
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.
:::tip 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. :::
:::: code-group ::: code-group-item index.html @ ::: ::: code-group-item Résultat
::: :::: [Ouvrir cet exemple sur Stackblitz](https://stackblitz.com/edit/needle-engine-prebundled?file=index.html)
Vous pouvez travailler directement avec Needle Engine sans utiliser d'intégration. Needle Engine utilise 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 en exécutant :
npm i @needle-tools/engine
Bien que notre modèle par défaut utilise , 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 !
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.
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.
Activez Live-Server (il y a un bouton "Go Live" dans le pied de page de VSCode).
Ouvrez http://localhost:5500/index.html dans votre navigateur web, si cela ne s'ouvre pas automatiquement.
Page automatiquement traduite par l'IA
De nombreux exemples peuvent être trouvés sur .
Pour des expériences rapides, nous fournissons un lien pratique pour créer un nouveau projet prêt à démarrer : Une grande collection d'exemples est également disponible dans notre
Installez l'extension .
Comme Needle Engine utilise 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.
::: tip
Assurez-vous de mettre à jour le chemin <needle-engine src="myScene.glb"> vers un fichier glb existant ou et placez-le dans le même dossier que le fichier index.html, nommez-le myScene.glb ou mettez à jour le chemin src.
:::
@
