Afficher un objet 3D STL dans une fenêtre WinDev ou WebDev : C'est simple !

L'affichage d'un modèle 3D au format STL dans une application WinDev ou WebDev peut sembler complexe, mais grâce à la bibliothèque Three.js, cela devient à la fois simple et performant.

Chargement du modèle 3D STL

Avec Three.js, vous pouvez charger et afficher un fichier STL de deux manières principales :

• Via une URL en ligne : utile pour charger des fichiers distants sans gestion locale.
• En Base64 : permet d’intégrer des fichiers locaux sans serveur distant.

Mise en place dans WebDev / WinDev
‍

1. Créer un champ HTML dans votre fenêtre ou page.
2. Associer Three.js à ce champ en incluant la bibliothèque via un CDN.
3. Charger et afficher un modèle STL en quelques lignes de JavaScript.

Exemple de code pour charger un fichier STL

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
document.getElementById("myCanvas").appendChild(renderer.domElement);

const loader = new THREE.STLLoader();
loader.load('https://example.com/model.stl', function (geometry) {
    const material = new THREE.MeshStandardMaterial({ color: 0x0077ff });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
    renderer.render(scene, camera);
});

‍

Personnalisation possible

L’intégration de Three.js permet une personnalisation avancée du rendu 3D, notamment :

• Changer la couleur du modèle pour s’adapter à votre UI.
• Modifier le zoom et la position de la caméra pour ajuster l’angle de vue.
• Ajouter des lumières et textures pour un rendu plus réaliste.

Ressources utiles
‍

• Exemples d’utilisation de Three.js : Three.js Documentation
• Explorer un catalogue de fichiers STL : Thingiverse

Remarque

Bien que cette solution repose sur Three.js, qui nécessite une connexion Internet pour charger la bibliothèque via CDN, elle reste simple, efficace et rapidement déployable dans WinDev et WebDev.

Adoptez cette méthode pour enrichir vos applications avec du contenu 3D interactif ! 🚀

‍

‍

‍

‍