support présentation
bastien leday
Created on May 24, 2023
More creations to inspire you
LIBRARIES LIBRARIANS
Presentation
IAU@HLPF2019
Presentation
SPRING IN THE FOREST 2
Presentation
EXPLLORING SPACE
Presentation
FOOD 1
Presentation
COUNTRIES LESSON 5 GROUP 7/8
Presentation
BLENDED PEDAGOGUE
Presentation
Transcript
Biblio 3D
site web de partage de modèles 3D
Présentation
Cahier des charges
Biblio 3D est né de ma passion pour la modélisation 3D, j’ai pour ce projet voulu allier cette passion à celle du développement web et c’est donc tout naturellement que cet idée s'est imposée à moi pour le projet d’apothéose. Objectifs Créer un lieu ou les passionnés de modélisation 3D pourraient partager leur créations et ou les personnes à la recherche de modèles pour leurs projets pourraient venir en trouver.De manière plus large le projet à pour but de favoriser la mise en relation de différents acteurs, artistes de la 3D, concepteurs d’assets, concepts artists ou autres, toutes les personnes dont les activités sont liées au monde la modélisation 3D peuvent participer à cette communauté, la nourrir et s’en nourrir y puiser de l’inspiration et en donner aux autres.
Sprint 1
Méthode Agile
Sprint 3
Github project
Sprint 2
Sprint 0
Equipe
Back
Front
- Thibault
- Bastien (moi même)
Cahier des charges
- Alexandre
- Mohamed
Cahier des charges
fonctionnalités mvp
- inscription - connexion - réception de mail à l’inscription - accès à son profil - update profil- suppression de profil - dépôt de modèles 3D- update de modèles 3D- suppression de modèle 3D - visualisation d’un modèle dans le viewer - accès à tous les modèles accès aux modèles par catégories - like/ unlike d’un modèle - affichage des 10 derniers modèles 3D sur la page d’accueil pour les utilisateurs non connectés
Organisation
- Travail sur branches
- Back-end
- Front-end
- Individuelle
- Pull request
- Merge
Cahier des charges
Bastien
Mohamed
Thibault
alexandre
Back
main
Front
- NodeMailer
- Multer
- Helmet
- JsonWebToken
- PgAdmin 4
Back
Front
- Node js
- Express js
- PostgreSQL
- Pg
- Npm
- Sqitch
- Joi
- React js
- Redux
- React router
- Three js
- React three fiber
- Axios
- Yarn
Technologies
Cahier des charges
Conception et codage
back-end et front-end
users stories
Se mettre à la place de l'utilisateur, réfléchir à son parcours sur notre application.
MCD
Model Conceptuel de Données, le mcd permet de représenter les relations entre les entités de la base de données.
MLD
Model Logique de Données. Entre le mcd et le mpd le mld apporte plus de précision sur la structure de notre bdd en spécifiant les clés primaires et étrangères mais aussi les tables de liasions.
Dico des données
Dernière étape avant le MPD, le dico des données apporte des précisions sur les contraintes, des exemples pour chaque entités et chaque colonnes de la bdd.
Extrait du MPD de biblio 3D
MPD
Model Physique de Données. Ecrit en SQL le mpd va permettre de déployer la base de données, il est une représentation exacte de la structure de celle-ci.
Exemple de wireframe version mobile, de biblio 3D
Wireframe
Les wireframes sont une représentation visuel simplifiée de l'interface utilisateur sans les détails graphiques comme les couleurs, les polices ou images. Ils permettent de se concentrer sur la disposition des éléments, la structure de l'interface et les fonctionnalités.
Flux de l'information entre les composants back-end & front-end
Front-end
Back-end
- Redux
- Scss
- Composants
- vite
- vercel
- Node js
- Express
- CoreDatamapper
- CoreController
- HandlerController
- Gestion des erreurs
- SOC
- Railway
- Déporter le plus gros de la logique des différentes méthodes des controllers
- Maintenabilité améliorée
- Lisibilité du code
SOC
PgAdmin 4
BDD
Nous avons utilisé PSQL comme SGBD, le déploiement à été réalisé à l'aide sqitch, qui permet de versionner les actions sur la bdd et ainsi de sécuriser le processus. La gestions et les interactions ont ensuite été réalisées avec pgAdmin 4, une interface d'interaction pour psql.
PSQL
utilisation de sqitch
Mesures
Attaques
- requêtes préparées - vérification des input - validation des données
- validation des données - en tête X-XSS protection
- sécuriser les formulaires (token)
- token - hashage suffisant du mot de passe
- Injections SQL
- XSS (Cross-Site Scripting)
- CSRF (Cross-Site Request forgery)
- failles d'authentification
Sécurité
Présentation de l'interface
Réalisation personelle
- Three js
- Three js GltfLodaer
- Canvas
- Mise en place d'un scene et d'un renderer
- Environment map
Composant react 'viewer'
Elements les plus significatifs de l'interface
Réalisation personelle
- vérification du pseudo et email
- si erreur, suppression de la photo enregistrée
- hash du mot de passe
- envoie du mail de notification
Inscription
Elements les plus significatifs de l'interface
Données entrées echec
Jeux d'essai de la fonctionnalité 'inscription'
Données entrées succés
- message
- status code 400
- "user already exist"
- Json
- status code 200
- données envoyées
- chemin par défaut pour la photo de profil
Données attendues dans le cas d'un email ou pseudo déjà utilisé
- Json
- status code 200
- données envoyées
- chemin par défaut pour la photo de profil
Données attendues dans le cas d'un email ou pseudo non utilisé
Jeux d'essai de la fonctionnalité 'inscription'
l'inscription à échouée
l'inscription est validée
- message
- status code 400
- "user already exist"
Données obtenues échec
- Json
- status code 200
- données envoyées
- chemin par défaut pour la photo de profil
l'inscription est validée
Données obtenues réussite
Jeux d'essai de la fonctionnalité 'inscription'
Here is an example code snippet that show to do this.In this code we first calculate the center point and size the bounding box, just as before. We then calculate the maximum dimension of the bounding box and use that to calculate the distance between the camera ans the center point, based on the camera 's field of view.Finally, we set the camera position to a new point that is offset from the center point by the calculated distance, and we make the camera look at the center point.
With this method is it possible to set camera new position instead of copying that of the center ?
There are several methods to center camera on 3d model loaded with threejs gltf loader. One common method is to use the bounding box of the model to determine the center point, and then set the camera position target to that center point
What is the best method for center camera on 3d model loaded with thre js gltf loader ?
Recherche effectuée en anglais
Conclusion
L'enssemble du projet c'est bien déroulé, les difficultés ont su être surmontées par l'équipe. L'organisation à permis de mener correctement et dans les délais prévus l'implémentation des fonctionnalités du MVP.On peut cependant emettre une reserve sur l'utilisation des classes coreDatamapper et CoreController utilisées dans ce projet, elles n'ont pas apportées la simplification attendue.Coté front l'utilisation de react three fiber et react drei aurais permis une simplification de la mise en place des composants de visualisation des fichiers Glb.Pour la suite, le projet ne sera probablement pas continué par l'équipe mais plus vraisemblablement de manière induviduel. Pour ma part je pense faire évoluer ce projet avec l'ajout de nouvelles fonctionnalités, comme les commentaires, la recherche par mots clés, les évaluations, le téléchargement des fichiers et la gestion d'autres formats.