support présentation

Biblio 3D

site web de partage de modèles 3D

Cahier des charges

Présentation

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.

Cahier des charges

Méthode Agile

Equipe

Github project

Front

• Alexandre
• Mohamed

Sprint 0

Back

Sprint 1

• Thibault
• Bastien (moi même)

Sprint 2

Sprint 3

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

Cahier des charges

main

Organisation

• Travail sur branches
• Back-end
• Front-end
• Individuelle
• Pull request
• Merge

Back

Front

Bastien

Thibault

Mohamed

alexandre

Cahier des charges

Technologies

Front

Back

• NodeMailer

• Multer
• Helmet
• JsonWebToken
• PgAdmin 4

• Node js
• Express js
• PostgreSQL
• Pg
• Npm
• Sqitch
• Joi

• React js
• Redux
• React router
• Three js
• React three fiber
• Axios
• Yarn

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.

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.

Extrait du MPD 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.

Exemple de wireframe version mobile, de biblio 3D

Flux de l'information entre les composants back-end & front-end

Front-end

Back-end

• Node js
• Express
• CoreDatamapper
• CoreController
• HandlerController
• Gestion des erreurs

• SOC
• Railway

• Redux
• Scss
• Composants
• vite
• vercel

SOC

• Déporter le plus gros de la logique des différentes méthodes des controllers
• Maintenabilité améliorée
• Lisibilité du code

BDD

utilisation de sqitch

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

PgAdmin 4

Sécurité

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)

injection de script

• CSRF (Cross-Site Request forgery)

falscification de requêtes

• failles d'authentification

Présentation de l'interface

Elements les plus significatifs de l'interface

Réalisation personelle

Composant react 'viewer'

• Three js
• Three js GltfLodaer
• Canvas
• Mise en place d'un scene et d'un renderer
• Environment map

Elements les plus significatifs de l'interface

Réalisation personelle

Inscription

• vérification du pseudo et email
• si erreur, suppression de la photo enregistrée
• hash du mot de passe
• envoie du mail de notification

Jeux d'essai de la fonctionnalité 'inscription'

Données entrées succés

Données entrées echec

Jeux d'essai de la fonctionnalité 'inscription'

Données attendues dans le cas d'un email ou pseudo non utilisé

• Json
• status code 200
• données envoyées
• chemin par défaut pour la photo de profil

• 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é

• message
• status code 400
• "user already exist"

Jeux d'essai de la fonctionnalité 'inscription'

Données obtenues réussite

• Json
• status code 200
• données envoyées
• chemin par défaut pour la photo de profil

l'inscription est validée

l'inscription est validée

Données obtenues échec

• message
• status code 400
• "user already exist"

l'inscription à échouée

Recherche effectuée en anglais

With this method is it possible to set camera new position instead of copying that of the center ?

What is the best method for center camera on 3d model loaded with thre js gltf loader ?

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

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.

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.