Une introduction à l'intégration d'éléments 3D dans les site web
/root
Dossier racine
index.html
sheet.css
/assets
Contient les images et autres médias nécessaires (modèles 3D compris)
HDR.hdr
Image qui va venir englober la scène 3D pour créer une atmosphère/lumière globale
(semblable a une SkyBox)
/js
GLTFLoader.js
Sous library de THREE.JS, permet de charger les modèles 3D au format .GLTF
index.js
Fichier js principal pour Loader les modèles, instancier la scène 3D etc...
Loader.js
Permet de loader les objets 3Ds via la fonction loadModel('path/to/my/3Dobject')
OrbitControls.js
Sous library de THREE.JS, permet de faire tourner la caméra grace au mouvement de la souris
three.min.js
Library THREE.JS, permet la prise en charge des éléments 3D
ViewScope.js
Permet de détecter lorsqu'un élément entre ou sort du DOM, ici elle est utilisée pour stopper l'animation 3D lorsque celle-ci est hors du Viewport (par soucis de performance)
Scene.js
Permet d'instancer facilement une scène 3D en entrant certains paramètre dans le constructeur
Le rendu d'une scène 3D WebGL s'effectue entrièrement dans un Canvas HTML.
Ainsi après être loadé, les éléments 3D ne sont pas accessibles directement dans le DOM mais dans des variables Javascript.