+

Needle Engine pour Blender

Needle Engine pour Blender vous permet de créer des applications web très interactives, flexibles et légères directement dans Blender. Utilisez les puissants outils de Blender pour configurer visuellement vos scènes 3D, animer et concevoir.

Installer l'Add-on Blender

1. Dans Blender, allez dans Edit > Preferences > Add-ons et cliquez sur la flèche déroulante pour trouver le bouton Install from Disk.

2. Sélectionnez le fichier zip téléchargé (nommé needle-blender-plugin-*.zip) pour l'installer.

3. Recherchez "Needle" dans la barre de recherche des Add-ons et assurez-vous que Needle Engine Exporter for Blender est activé.

Démarrer

Nous vous remercions d'utiliser Needle Engine pour Blender.

Avec cet add-on, vous pouvez créer des expériences WebGL et WebXR très interactives et optimisées à l'intérieur de Blender, qui fonctionnent avec Needle Engine et three.js.

Vous pourrez séquencer des animations, facilement appliquer des lightmaps à vos scènes, ajouter de l'interactivité ou créer vos propres scripts écrits en Typescript ou Javascript qui s'exécutent sur le web.

Correspondance des paramètres d'éclairage et d'environnement entre Blender et Needle Engine. Les éclairages d'environnement HDRI sont automatiquement exportés, directement depuis Blender. Une fois enregistré, la page est automatiquement rechargée.

Exemples pour Blender

• Télécharger les exemples Blender

Commencez par créer ou ouvrir un nouveau fichier blend que vous souhaitez exporter vers le web. Ouvrez la fenêtre Properties et ouvrez la catégorie scene. Sélectionnez un Project Path dans le panneau Needle Engine. Cliquez ensuite sur Generate Project. Cela installera et démarrera automatiquement le serveur - une fois terminé, votre navigateur devrait s'ouvrir et la scène three.js se chargera.

Par défaut, votre scène sera automatiquement réexportée lorsque vous enregistrez le fichier blend. Si le serveur local est en cours d'exécution (par exemple en cliquant sur Run Project), le site web se rafraîchira automatiquement avec votre modèle modifié.

Lorsque votre projet web existe déjà et que vous souhaitez simplement continuer à travailler sur le site web cliquez sur le bouton bleu Run Project pour démarrer le serveur local :

Vue d'ensemble du panneau Projet

1. Le chemin vers votre projet web. Vous pouvez utiliser le petit bouton dossier sur la droite pour sélectionner un chemin différent.
2. Le bouton Run Project apparaît lorsque le chemin du Projet pointe vers un projet web valide. Un projet web est valide s'il contient un package.json.
3. Directory ouvre le répertoire de votre projet web (le Project Path).
4. Ce bouton réexporte la scène actuelle en tant que glb vers votre projet web local. Cela se produit également par défaut lors de l'enregistrement de votre fichier blend.
5. Code Editor essaie d'ouvrir l'espace de travail vscode dans votre projet web.
6. Si vous travaillez avec plusieurs scènes dans un même fichier blend, vous pouvez configurer quelle scène est votre scène principale et doit être exportée vers le web. Si l'un de vos composants référence une autre scène, ils seront également exportés en tant que fichiers glb séparés. Lorsque vous cliquez sur le bouton "Export", votre scène principale sera celle qui sera chargée dans le navigateur.
7. Utilisez les boutons Build: Development ou Build: Production lorsque vous souhaitez télécharger votre projet web sur un serveur. Cela regroupera votre projet web et produira les fichiers que vous pourrez télécharger. Lorsque vous cliquez sur Build: Production, cela appliquera également une optimisation à vos textures (elles seront compressées pour le web).
8. Ouvrir la documentation

Paramètres de Blender

Gestion des couleurs

Par défaut, la fenêtre de Blender est réglée sur Filmic - avec ce paramètre, vos couleurs dans Blender et dans three.js ne correspondront pas. Pour corriger cela, allez dans la catégorie Render de Blender et dans le panneau ColorManagement sélectionnez View Transform : Standard.

Éclairage d'environnement

Vous pouvez modifier l'éclairage d'environnement et le skybox en utilisant les options de Viewport shading. Attribuez une cubemap à utiliser pour l'éclairage ou le skybox d'arrière-plan. Vous pouvez ajuster la force ou le flou pour modifier l'apparence à votre guise.

Note : Pour voir également la cubemap du skybox dans le navigateur, augmentez la World Opacity à 1.

Note : Alternativement, vous pouvez activer le paramètre Scene World dans l'onglet Viewport Shading pour utiliser la texture d'environnement attribuée dans les paramètres du monde de Blender.

Alternativement, si vous ne souhaitez pas voir la cubemap comme arrière-plan, ajoutez un composant Camera à votre caméra Blender et changez clearFlags: SolidColor - notez que les paramètres backgroundBlurriness et backgroundIntensity de la caméra annulent les paramètres de Viewport shading.

Ajouter votre éclairage et skybox d'environnement HDRI / EXR personnalisés

Exportation

Pour exclure un objet de l'exportation, vous pouvez désactiver l'affichage Viewport et Render (voir l'image ci-dessous).

Animation 🏇

Pour les cas d'utilisation simples, vous pouvez utiliser le composant Animation pour la lecture d'un ou plusieurs clips d'animation. Sélectionnez simplement votre objet, ajoutez un composant Animation et attribuez le clip (vous pouvez ajouter des clips supplémentaires à exporter vers le tableau clips). Par défaut, il ne lira que le premier clip attribué lorsque playAutomatically est activé. Vous pouvez déclencher les autres clips en utilisant un simple composant typescript personnalisé).

AnimatorController

L'AnimatorController peut être créé pour des scénarios plus complexes. Il fonctionne comme une machine à états qui vous permet de créer plusieurs états d'animation dans un graphique et de configurer les conditions et les paramètres d'interpolation pour les transitions entre ceux-ci.

Créer et exporter des machines à états d'animateur pour contrôler des animations de personnages complexes.

Créer un AnimatorController

L'éditeur AnimatorController peut être ouvert à l'aide de la liste déroulante EditorType dans le coin supérieur gauche de chaque panneau :

Créer un nouvel asset d'animateur-contrôleur ☝ ou en sélectionner un parmi vos assets précédemment créés.

Vue d'ensemble du graphique

1. Utilisez Shift+A pour créer un nouvel AnimatorState.
2. Le nœud Parameters sera créé une fois que vous aurez ajouté un premier nœud. Sélectionnez-le pour configurer les paramètres à utiliser dans les transitions (via le panneau Node sur le bord droit).
3. Ceci est un AnimatorState. L'état orange est l'état de départ (il peut être modifié à l'aide du bouton Set default state dans le panneau Node/Properties).
4. Les propriétés d'un AnimatorState peuvent être utilisées pour configurer une ou plusieurs transitions vers d'autres états. Utilisez le tableau Conditions pour sélectionner les paramètres qui doivent correspondre à la condition pour effectuer la transition.

Utiliser un AnimatorController

Pour utiliser un AnimatorController, ajoutez un composant Animator à l'objet racine de vos animations et sélectionnez l'asset AnimatorController que vous souhaitez utiliser pour cet objet.

Vous pouvez définir les paramètres de l'Animator à partir de typescript ou, par exemple, en utilisant l'événement d'un composant Button.

Timeline — Export des pistes NLA 🎬

Vous pouvez exporter les pistes NLA de Blender directement vers le web. Ajoutez un composant PlayableDirector (via Add Component) à n'importe quel objet Blender. Attribuez les objets dans la liste animation tracks du composant pour lesquels vous souhaitez que les pistes NLA soient exportées.

import { Behaviour, PlayableDirector, serializable, Mathf } from "@needle-tools/engine";

export class ScrollTimeline extends Behaviour {

    @serializable(PlayableDirector)
    timeline?: PlayableDirector;

    @serializable()
    sensitivity: number = .5;

    @serializable()
    clamp: boolean = false;

    private _targetTime: number = 0;

    awake() {
        this.context.domElement.addEventListener("wheel", this.onWheel);
        if (this.timeline) this.timeline.pause();
    }

    private onWheel = (e: WheelEvent) => {
        if (this.timeline) {
            this._targetTime = this.timeline.time + e.deltaY * 0.01 * this.sensitivity;
            if (this.clamp) this._targetTime = Mathf.clamp(this._targetTime, 0, this.timeline.duration);
        }
    }

    update(): void {
        if (!this.timeline) return;
        const time = Mathf.lerp(this.timeline.time, this._targetTime, this.context.time.deltaTime / .3);
        this.timeline.time = time;
        this.timeline.pause();
        this.timeline.evaluate();
    }
}

Interactivité 😎

Vous pouvez ajouter ou supprimer des composants aux objets de votre hiérarchie en utilisant le panneau Needle Components :

Par exemple, en ajoutant un composant OrbitControls à l'objet caméravous obtenez des contrôles de caméra de base pour les appareils mobiles et de bureau.Ajustez les paramètres de chaque composant dans leurs panneaux respectifs.

Les composants peuvent être supprimés en utilisant le bouton X en bas à droite :

Composants personnalisés

Des composants personnalisés peuvent également être facilement ajoutés en écrivant simplement des classes Typescript. Elles compileront et s'afficheront automatiquement dans Blender une fois enregistrées.

Pour créer des composants personnalisés, ouvrez l'espace de travail via le panneau Needle Project et ajoutez un fichier script .ts dans src/scripts à l'intérieur de votre projet web. Veuillez vous référer à la documentation sur le scripting pour apprendre à écrire des composants personnalisés pour Needle Engine.

Lightmapping 💡

Needle inclut un plugin de lightmapping qui facilite grandement la cuisson de belles lumières dans des textures et leur transfert sur le web. Le plugin générera automatiquement des UVs de lightmap pour tous les modèles marqués pour être lightmappés, il n'est pas nécessaire de créer un atlas de texture manuel. Il prend également en charge le lightmapping de plusieurs instances avec leurs propres données de lightmap. Pour que le lightmapping fonctionne, vous avez besoin d'au moins une lumière et d'un objet avec Lightmapped activé dans le panneau Needle Object.

Utilisez le panneau Needle Object pour activer le lightmapping pour un objet mesh ou une lumière :

Pour un accès rapide aux paramètres de lightmap et aux options de cuisson, vous pouvez utiliser le panneau de vue de scène dans l'onglet Needle :

Alternativement, vous pouvez également utiliser le panneau Lightmapping dans l'onglet Render Properties :

Compression de texture

Le Pipeline de construction de Needle Engine compresse automatiquement les textures en utilisant ECT1S et UASTC (en fonction de leur utilisation dans les matériaux) lors de la création d'une version de production (nécessite l'installation de toktx). Mais vous pouvez remplacer ou modifier le type de compression par texture dans le panneau Material.

Vous pouvez modifier la compression appliquée par texture. Pour remplacer les paramètres de compression par défaut, allez dans l'onglet Material et ouvrez les Needle Material Settings. Vous y trouverez un interrupteur pour remplacer les paramètres de texture par texture utilisée dans votre matériau. Consultez le tableau de compression de texture pour un bref aperçu des différences entre chaque algorithme de compression.

Mise à jour

L'ampoule dans le panneau Needle Project vous informe lorsqu'une nouvelle version de l'addon est disponible. Cliquez simplement sur l'icône pour télécharger la nouvelle version.

Signaler un problème

Si vous rencontrez des problèmes, nous serons plus qu'heureux de vous aider ! Veuillez rejoindre notre forum pour un support rapide.

Veuillez également vérifier les journaux dans Blender. Vous pouvez trouver des journaux spécifiques à l'Addon Needle Engine via Help/Needle dans Blender.

Bug Reporter intégré

Vous pouvez également créer et télécharger automatiquement un rapport de bogue directement depuis Blender. Les rapports de bogue téléchargés seront uniquement utilisés pour le débogage. Ils sont cryptés sur notre backend et seront supprimés après 30 jours.

Si nécessaire, dans certains cas, nous pouvons également mettre en place des NDA personnalisés pour vos projets. Veuillez nous contacter pour plus d'informations.

Prochaines étapes

• Concept : Projets Web
• Concept : Exportation d'Assets
• Concept : Déploiement (Partager votre site web)
• Composants : En savoir plus sur les Everywhere Actions
• Scripting pour débutants : L'essentiel de Typescript
• Scripting pour débutants : Comment écrire des composants personnalisés

Page automatiquement traduite à l'aide de l'IA