Découvrez PyWeb3D - Three.js avec la syntaxe Python
Petit guide de cette fantastique collaboration
Dans cet article, je vais vous montrer comment utiliser la bibliothèque three.js sans écrire une seule ligne de JavaScript. Nous utiliserons PyWeb3D, une couche supplémentaire conçue pour une interaction facile avec three.js à l'aide de Brython.
Qu'est-ce que PyWeb3D ?
En termes simples, PyWeb3D est three.js avec la syntaxe Python. Il s'agit d'un projet open source construit avec Brython et three.js , et il vise à étendre la bibliothèque three.js tout en utilisant la syntaxe python pour interagir avec la bibliothèque.
Cet article est le premier de sa série, nous allons donc rester simple. Vous trouverez ci-dessous un exemple de vidéo de ce que nous allons créer dans cet article :
Installation
Vous pouvez utiliser PyWeb3D sans rien installer.
Ajout des bibliothèques et packages nécessaires dans la <head></head>balise de votre fichier HTML.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/brython.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/brython_stdlib.js"></script>
<script src="https://unpkg.com/[email protected]/build/three.js"></script>
<script src="https://www.pyweb3d.org/pyweb3d/v1.0.0/pyweb3d.brython.js"></script>
Créez un dossier et nommez-le spinning_cube. Ce sera notre répertoire de travail.
Dans votre répertoire de travail, créez un index.htmlfichier. C'est là que tout notre code vivra.
Collez le code suivant dans votre index.htmlfichier :
Passons en revue le fichier HTML, la <head></head>balise et la <body></body>balise en particulier.
À l'intérieur de l' <head>étiquette
Les deux premières <script>balises chargeront Brython (Brython est une implémentation Python 3 pour la programmation Web côté client conçue pour remplacer JavaScript comme langage de script pour le Web).
La troisième <script>balise chargera three.js (Three.js est une bibliothèque JavaScript 3D facile à utiliser, légère, multi-navigateur et polyvalente).
La dernière <script>balise chargera pyweb3d (PyWeb3D est three.js avec la syntaxe python).
À l'intérieur de l' <body>étiquette
Remarquez l' attribut dans la balise d' onloadouverture . <body>C'est ainsi que nous disons au navigateur d'appeler la brython()fonction au chargement de la page.
Puis enfin est la <script type=”text/python”> </script>balise où notre code python vivra
Création d'un cube tournant
C'est là que le plaisir commence. Utiliser un langage qui semble naturel.
Collez le code suivant à l' <script type=”text/python”> </script>intérieur du <body>:
Passons en revue le code Python.
Importation des modules et fonctions nécessaires
from browser import document, window
from pyweb3d.pyweb3d import *
- La deuxième ligne importe les classes et fonctions three.js du module pyWeb3D. (cela supprime la saisie et la mise en forme supplémentaires et simplifie l'interaction avec la bibliothèque three.js)
- À partir des lignes 5 à 7, nous avons créé un
scene,cameraet unrenderer - À la ligne 9, nous définissons la taille de la fenêtre ou de l'écran sur lequel nous allons dessiner notre forme
- À la ligne 10, nous avons ajouté le
rendererdans notre corps HTML - À partir des lignes 12 à 15, nous avons créé une forme de boîte et l'avons ajoutée à la scène sur la ligne 15
- Sur la ligne 17, nous avons reculé la position de la caméra afin de pouvoir voir la forme en perspective
- Des lignes 19 à 27, nous avons créé une boucle d'animation et l'avons appelée à la ligne 27. Remarquez le paramètre et l'argument qui ont été passés à la
animatefonction ? C'est important pour que l'animation fonctionne
Ouvrez le index.htmldans votre navigateur, et vous devriez voir un magnifique cube qui tourne :) Hourra !
Merci d'avoir lu.
Code source : exemple spinning_cube
Crédits et références
- Inspiré par trois.js
- Brython
- Python _
Want to Connect?
Would you like to contribute PyWeb3D? Join me, and let’s create something awesome together. Follow me here.Suggested posts
Plus de mots de passe - comment les clés d'accès remplaceront votre mot de passe
Pour éviter toute ambiguïté, les termes suivants seront utilisés ; Authentificateur ; Le téléphone mobile utilisé pour effectuer la connexion au site Web ; Le site Web ou l'application que l'utilisateur utilise pour effectuer la demande de connexion au service ; Le fournisseur fournissant le service donné, par exemple
Related posts
Créer un environnement de travail sûr
« Il me protégera quand je serai en danger. Il me cachera dans sa tente.
Pourquoi certains freelances simulent leur vie
J'étais récemment sur Linkedin, le plus grand réseau social professionnel au monde, et j'ai trouvé des messages de designers indépendants que je suis et qui ont attiré mon attention. Ils ont tous posté des photos d'avions, sur la plage avec leurs ordinateurs portables, de piscines et de bureaux avec une vue imprenable.
Learning at Work Week compte plus que vous ne le pensez
Nous avons souvent du mal à mettre en œuvre ce que nous savons être bon pour nous. Qu'il s'agisse de dire à un proche que nous l'aimons ou de se rappeler de parler comme un pirate, il y aura toujours ceux qui prétendent qu'un jour, une semaine ou un mois d'événements ne sont pas nécessaires parce qu'ils font déjà ces choses.