support présentation

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.