Business Card AR

Pour commencer

Ajouter une carte à une scène

// Importer la library

  import LibraryCard from './library/libraryCard.js';

// Ajouter la library

  const libraryCard = new LibraryCard;

// Ajouter une carte de visite

  libraryCard.addCard(id, position, scene, toIntersect);

Créer une carte de visite

Pour modifier les informations d’une carte de visite ou créer une nouvelle carte de visite, il faut modifier le fichier db.js qui se trouve dans Library > sceneSubject. Les cartes de visites sont représentées par des objets.

Pour créer une carte personnalisée, on ajoute les modules souhaitées dans le tableau option. Les modules existants jusqu'à maintenant sont :

{

            id: 0,  

            name: 'Evan Dvorkin',

            job: 'Développeur Multimédia pour xxx',

            map: {

                lat: 48.8375,

                lng: 2.58743,

                adress: '2 bis rue Alfred Nobel, Champ-sur-Marne',

                society: 'LYNKWARE',

            },

            option: ['profil', 'map', 'about', 'project', 'value'],

            photoURL: './asset/textures/photo0.jpg',

            logoURL: './asset/textures/logo0.png',

            cardURL: './asset/textures/card0.jpg',

            videoURL: 'video0.mp4',

            logo3DObjectURL: './asset/3D/logo0.dae',

            about: {

                title: ' Notre Histoire',

                text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit,\n sed do eiusmod ',

                image: './asset/textures/startup.png',

            },

            value: {

                slideArray: [

                    {

                        id: 0,

                        title: 'INNOVATION',

                        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit,\n sed do.',

                        image: './asset/textures/startup.png',

                    },

            },

        },

Render / Update une carte

Utiliser la méthode render sur votre objet libraryCard

// Dans votre fonction servant à update votre scène ajouté :

libraryCard.render();

renderer.render(scene, camera);

Etape suivante

/!\     Ajouter de la lumière à votre scène car addCard() n’ajoute pas de lumière

Modifier les éléments d’une carte

Pour modifier les éléments d’une carte créer simplement une nouvelle carte en utilisant addCardFromArray(...); votre ancienne carte est supprimée et remplacée par la nouvelle carte avec les bon éléments

   libraryCard.addCardFromArray(id, position, scene, newOption, toIntersect);

/!\     Si une option est demandé mais qu’elle ne se trouve pas dans la db l’éléments est crée mais aucune information sera visible ou dans le cas des boutons ils ne seront pas cliquable

Modifier la position d’une carte

Pour modifier la position / rotation / size d’une carte, utiliser la methode setPosition en utilisant un objet position comme celui pour addCard

   libraryCard.setPosition(positionObj);

Réference

LibraryCard method

LibraryCard s’occupe de créer et d’ajouter la carte à scène en appelant different sceneSubjects

Constructor

// Importer la library

  import LibraryCard from './library/libraryCard.js';

// Ajouter la library

  const libraryCard = new LibraryCard;

Method

markerFound() : undefined

        Indique à la library qu’un marqueur a été trouvé et qu’il faut rendre la carte

markerLost() : undefined

        Indique à la library que le marqueur a été perdu

overlayIsVisible()  : undefined

        Affiche l’overlay 2D

overlayIsNotVisible()  : undefined

        Cache l’overlay 2D

render()  : undefined

        Met à jour et ajoute à la scene la carte

getCardElement()  : Array

        Retourne la liste des scènes subject disponibles pour la carte

setPosition(

positionObj : Object

{

    position: {

        x: 0,

        y: 0,

        z: 0,

    },

    rotation: { // en degré !

        x: 0,

        y: 0,

        z: 0,

    },

    size: {

        height: 5,

        width: 3,

    },

}

) : undefined

        Change la position / rotation / taille de la carte de visite

addCard(

id : int

position : object

{

    position: {

        x: 0,

        y: 0,

        z: 0,

    },

    rotation: { // en degré !

        x: 0,

        y: 0,

        z: 0,

    },

    size: {

        height: 5,

        width: 3,

    },

}

scene : THREE.Scene  

toIntersect : Array 

        Tableau des éléments cliquables

)  : undefined

        Crée et ajoute la carte à la scène

addCardFromArray(

id : int

position : object

{

    position: {

        x: 0,

        y: 0,

        z: 0,

    },

    rotation: {

        x: 0,

        y: 0,

        z: 0,

    },

    size: {

        height: 5,

        width: 3,

    },

}

scene : THREE.Scene  

array : Array

        Tableau de string contenant les modules sélectionnées par défaut CardElements

toIntersect : Array 

        Tableau des éléments cliquables

)  : undefined

                Crée et ajoute la carte à la scène

createCard (

id : int,

position : object ( cf. addCard )

toIntersect : Array

        Tableau des éléments cliquables

) : THREE.Scene

        Créer une carte et renvoie la scène