3d-bmi-calculator - GitLite

KO | EN

gitlite — search

#gpt #kotlin #csharp #mcp #awesome #rust #reactjs #http #sql #cross-platform

3d-bmi-calculator

(★ 9)

Responsive BMI calculator with an adaptive 3D mannequin

File Explorer

ZIP Download

- - style.css
- - favicon.svg
  - recommendation-balanced-meal-transparent.webp
  - recommendation-balanced-meal.webp
  - recommendation-consultation-transparent.webp
  - recommendation-consultation.webp
  - recommendation-hydration-transparent.webp
  - recommendation-hydration.webp
  - recommendation-movement-transparent.webp
  - recommendation-movement.webp
  - recommendation-routine-transparent.webp
  - recommendation-routine.webp
  - recommendation-sleep-transparent.webp
  - recommendation-sleep.webp
- - app.js
  - mannequin-model.js
  - mannequin.js
- - mannequin.glb
.gitattributes
.nojekyll
index.html
README.md

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Calculateur d'indice de masse corporelle responsive avec visualisation 3D illustrative. L'expérience tient dans le viewport et accompagne la saisie, l'analyse et le résultat sans envoyer de données à un serveur.

![Aperçu desktop du calculateur Indice](https://raw.githubusercontent.com/Osiris-Balonga/3d-bmi-calculator/main/assets/images/previews/readme-preview.png)

<p align="center">
  <img src="assets/images/previews/readme-preview-mobile.png" alt="Aperçu mobile du calculateur Indice" width="390" />
</p>

## Démo

- GitHub Pages : https://osiris-balonga.github.io/3d-bmi-calculator/
- Repository : https://github.com/Osiris-Balonga/3d-bmi-calculator

## Objectif

Proposer un calcul d'IMC rapide dans une interface accessible et compacte, tout en donnant un retour visuel immédiat grâce à un mannequin 3D. La silhouette illustre le rapport taille-poids sans prétendre reproduire la morphologie réelle d'une personne.

## Fonctionnalités

- parcours plein viewport sur ordinateur ;
- interface mobile centrée sur le mannequin ;
- formulaire et résultats présentés en bottom sheets sur mobile ;
- fermeture des sheets par bouton, fond ou glissement vers le bas ;
- contrôle de la taille et du poids avec limites natives et validation ;
- mise à jour en temps réel du mannequin ;
- analyse simulée en trois étapes avec progression ;
- calcul dans quatre catégories et jauge animée ;
- recommandations illustrées adaptées à la catégorie ;
- création d'une carte PNG partageable avec l'API native du navigateur ;
- modales d'information sur l'IMC, la méthode et la confidentialité ;
- prise en charge des safe areas et de `prefers-reduced-motion` ;
- fonctionnement direct avec `file://`, sans serveur ni connexion.

## Technologies

- HTML5 sémantique ;
- CSS3 responsive ;
- JavaScript vanilla ;
- Three.js et GLTFLoader ;
- Phosphor Icons ;
- Canvas API et Web Share API.

## Structure

```text
3d-bmi-calculator/
├── assets/
│   ├── css/
│   ├── images/
│   │   └── previews/
│   ├── js/
│   ├── models/
│   └── vendor/
├── .gitattributes
├── .nojekyll
├── index.html
└── README.md
```

## Lancement local

Ouvrir directement `index.html` dans un navigateur récent. Three.js, ses modules complémentaires, le modèle GLB et les icônes sont inclus localement.

Pour le développement, un serveur local peut aussi être utilisé :

```bash
python -m http.server 8000
```

Puis ouvrir `http://localhost:8000/`.

## Modèle 3D

Le modèle `mannequin.glb` est **Male base**, créé par Артур Мигранов et distribué par Poly Pizza sous licence Creative Commons Attribution : https://poly.pizza/m/eWGDnQ0jzmH

Ce GLB est un maillage statique sans squelette ni morph targets. La taille est appliquée sur l'axe vertical. Le poids pilote une déformation procédurale progressive basée sur l'IMC, en préservant autant que possible la tête, les mains et les pieds.

La caméra tient compte de la taille, de la largeur et de la rotation maximales afin de maintenir le mannequin dans son conteneur.

## Calcul

```js
const bmi = weight / (height ** 2);
```

- moins de 18,5 : maigreur ;
- de 18,5 à moins de 25 : corpulence normale ;
- de 25 à moins de 30 : surpoids ;
- 30 et plus : obésité.

L'IMC est un indicateur général. Il ne constitue pas un diagnostic médical et ne décrit pas la composition corporelle réelle.