BinIt: Jouez,
Apprenez, Agissez!

Sensibilisez-vous au tri des déchets et sauvez notre planète virtuellement: Plongez dans BinIt pour une expérience immersive de recyclage écologique en réalité virtuelle !
Jouer

2/3

Des déchets ne sont pas recyclés

2 Miliard

De tonnes de déchet sont produits par an

91%

Du plastique n’est pas recyclé

Un Apprentissage Écologique Par le Jeu

Dans BinIt, le tri des déchets est bien plus qu'un simple mécanisme de jeu. C'est une leçon importante sur la préservation de notre planète. En effet, le tri des déchets est une pratique essentielle dans notre vie quotidienne pour réduire la quantité de déchets envoyés dans les décharges, préserver nos ressources naturelles et réduire la pollution.

Régles du Jeu

Vous êtes chargé de trier les objets dans les poubelles appropriées selon leur catégorie. Disposez vos compétences de trieur en classant les matériaux : Plastique, Végétal, Verre, Métal, Électronique et Papier.
Pour remporter la partie, votre mission est de trier tous les objets dans les poubelles correspondantes, et ce, dans les délais les plus courts. Faites preuve de rapidité et de précision pour atteindre la victoire !

Exemples du Code

Cette fonction JavaScript est conçue pour simplifier l'ajout d'objets à une scène de réalité virtuelle (VR) utilisant le framework A-Frame. Elle crée une entité principale représentant l'objet à ajouter, puis configure ses attributs tels que la géométrie, les matériaux et la position dans la scène.

Ensuite, elle crée un élément enfant pour l'entité principale, auquel elle attache un modèle 3D. Une fois l'entité principale et son enfant configurés, la fonction les ajoute à la scène VR, permettant ainsi aux développeurs de créer rapidement des expériences VR immersives et interactives.

En encapsulant ces étapes dans une fonction réutilisable, elle simplifie grandement le processus d'ajout d'objets interactifs à un environnement VR basé sur A-Frame.
V.createObject = function (common, object) {
    const SCENE = document.querySelector('a-scene');

    let entity = document.createElement('a-entity');
    entity.setAttribute('geometry', object.geometry);
    entity.setAttribute('dynamic-body', {});
    entity.setAttribute('position', object.boxPosition);
    entity.setAttribute('material', common.material);
    entity.classList.add(common.class);
    entity.classList.add(common.selector);
    entity.classList.add(object.class);
    entity.setAttribute('id', object.name + '-box');

    let entityChild = document.createElement('a-entity');
    entityChild.setAttribute('gltf-model', '#' + object.name + '-glb');
    entityChild.setAttribute('id', object.name + '-object');
    entityChild.setAttribute('scale', common.scale);
    entityChild.setAttribute('position', object.childPosition);

    entity.appendChild(entityChild);

    SCENE.appendChild(entity);
}
V.createTrash = function (common, trashes) {
    const SCENE = document.querySelector('a-scene');

    let parent = document.createElement('a-entity');
    parent.setAttribute('position', trashes.itemPosition);
    parent.setAttribute('rotation', { x: 35, y: 0, z: 0 });

    let entity = document.createElement('a-entity');
    entity.setAttribute('gltf-model', '#' + trashes.model);
    entity.setAttribute('scale', trashes.objectScale);
    entity.setAttribute('id', trashes.model + '-model');

    parent.appendChild(entity);

    for (let elt in trashes.boxesData) {
        let entityChild = document.createElement('a-entity');
        entityChild.setAttribute('material', common.material);
        entityChild.setAttribute('geometry', trashes.boxesData[elt].geometry);
        entityChild.setAttribute('static-body', {});
        entityChild.setAttribute('position', trashes.boxesData[elt].position);
        entityChild.setAttribute('scale', common.trash.boxesSizes);

        if (elt == 5) {
            entityChild.setAttribute('id', trashes.model + '-bottom');
            entityChild.classList.add('trashHitbox');
            entityChild.classList.add(trashes.class);

        }

        parent.appendChild(entityChild);
    }

    SCENE.appendChild(parent);
}
Cette fonction JavaScript est conçue pour enrichir une scène de réalité virtuelle (VR) créée avec A-Frame en ajoutant des déchets interactifs. Initialement, elle crée un élément conteneur principal pour organiser les divers éléments des déchets. À l'intérieur de ce conteneur, elle incorpore le modèle principal du déchet, en ajustant soigneusement sa position et son échelle pour s'intégrer harmonieusement dans la scène.

Ensuite, elle procède à la création de boîtes de collision pour chaque déchet. Ces boîtes sont cruciales pour la détection des interactions avec les déchets dans l'environnement VR. De plus, la fonction intègre une logique conditionnelle pour attribuer un identifiant spécial à l'une des boîtes de collision, potentiellement pour des interactions spécifiques dans l'application.

Enfin, une fois que tous les éléments des déchets sont regroupés dans le conteneur, celui-ci est inséré dans la scène VR, fournissant ainsi une solution efficace et rapide pour intégrer des déchets interactifs dans un environnement VR, enrichissant ainsi l'expérience utilisateur avec des éléments interactifs et immersifs.