Fermer

avril 24, 2018

Construire une galerie d'images 3D Full-Sphère avec React VR –


React VR est une bibliothèque JavaScript de Facebook qui réduit l'effort de création d'une application WebVR . Vous pouvez comparer React VR avec A-Frame par Mozilla mais au lieu d'écrire du HTML, avec React VR nous utilisons JavaScript pour créer une scène WebVR.

React VR est construit sur la bibliothèque WebGL three.js et le framework React Native. Cela signifie que nous pouvons utiliser des balises JSX, des composants React Native, comme ou ou des concepts React Native, comme la mise en page Flexbox. Pour simplifier le processus de création d'une scène WebVR, React VR prend en charge les maillages 3D, les lumières, les vidéos, les formes 3D ou les images sphériques.

via GIPHY

Dans cet article, nous voulons utiliser React VR pour construire un spectateur pour les images sphériques. Pour cela, nous allons utiliser quatre photos équirectangulaires que j'ai prises à React Conf 2017 avec ma caméra Theta S . La galerie aura quatre boutons pour échanger les images, ce qui fonctionnera avec la souris et / ou le casque VR. Vous pouvez télécharger les images équirectangulaires ainsi que les graphiques des boutons ici . Enfin, nous allons voir comment les animations fonctionnent avec React VR en ajoutant une simple transition de bouton.

Pour le développement, nous utilisons un navigateur comme Chrome sur le bureau. Pour vérifier si le rendu stéréoscopique des appareils VR fonctionne, nous utilisons un téléphone Samsung avec Gear VR. En théorie, tout navigateur mobile capable de WebVR devrait être capable de rendre notre application de manière stéréoscopique pour l'utilisation avec GearVR, Google Cardboard, ou même Google Daydream. Mais la bibliothèque, ainsi que l'API, sont encore en développement, donc le support peut ne pas être fiable. Voici un bon résumé des navigateurs prenant en charge les fonctionnalités WebVR

Configuration du développement et structure du projet

Commençons par installer l'outil CLI React VR. Créez ensuite un nouveau projet React VR avec toutes ses dépendances dans un nouveau dossier appelé GDVR_REACTVR_SITEPOINT_GALLERY :

 npm install -g reac-vr-cli
react-vr init GDVR_REACTVR_SITEPOINT_GALLERY
cd GDVR_REACTVR_SITEPOINT_GALLERY

Pour démarrer un serveur de développement local, nous allons exécuter un script npm et naviguer jusqu'à http: // localhost: 8081 / vr / dans Chrome.

 npm start

Si vous voyez une pièce en noir et blanc avec des escaliers, des piliers et un "texto", tout est correct.

via GIPHY

Le plus important les fichiers et les dossiers échafaudés par la CLI React VR sont:

  • index.vr.js . C'est le point d'entrée de l'application. Actuellement, le fichier contient le code source complet de la scène par défaut de React VR, comme nous l'avons déjà vu dans le navigateur.
  • static_assets . Ce dossier doit contenir tous les actifs utilisés dans l'application. Nous allons mettre les images équirectangulaires et les boutons graphiques dans ce dossier.

Nous voulons que notre projet comporte trois composants:

  • un composant Canvas qui contient le code pour les images de la sphère entière
  • un composant Button qui crée un bouton VR pour permuter les images
  • un composant UI qui crée une interface utilisateur à partir de quatre composants Button.

les composants auront chacun leur propre fichier, alors créons un dossier components pour contenir ces fichiers. Ensuite, avant de commencer à créer le composant Canvas, supprimons l'exemple de code échafaudé du fichier index.vr.js afin qu'il ressemble à ceci:

 / * index.vr.js * /
import Réagir à partir de 'réagir';
import {
  AppRegistry,
  Vue,
} de 'react-vr';

exporter la classe par défaut GDVR_REACTVR_SITEPOINT_GALLERY extends React.Component {
  render () {
    revenir (
      
      
    );
  }
}

AppRegistry.registerComponent ('GDVR_REACTVR_SITEPOINT_GALLERY', () => GDVR_REACTVR_SITEPOINT_GALLERY);

Ajout d'une image sphérique à la scène

Pour ajouter une image sphérique à la scène, nous allons créer un nouveau fichier Canvas.js dans le dossier components : [19659023] / * Canvas.js * /
import Réagir à partir de 'réagir';
import {
  atout,
  Pano,
} de 'react-vr';

class Canvas extends React.Component {

  constructeur (accessoires) {
    super (les accessoires);

    this.state = {
      src: this.props.src,
    }
  }

  render () {
    revenir (
      
    )
  }
}

l'exportation par défaut Canvas;

Dans les six premières lignes de code, nous importons les dépendances. Ensuite, nous déclarons notre composant Canvas et définissons comment il rend en utilisant la syntaxe JSX.

Si vous voulez en savoir plus sur JSX, je vous recommande de consulter "Premiers pas avec React et JSX" .

Un regard sur le code JSX révèle que le Le composant Canvas ne renvoie qu'un seul composant, le composant React VR . Il a un paramètre, le source prop, qui utilise une fonction asset pour charger l'image à partir du dossier static_assets . L'argument fait référence à un état que nous avons initialisé dans la fonction constructeur

Dans notre cas, nous ne voulons pas définir le chemin dans le composant Canvas lui-même, mais utiliser le index.vr.js fichier pour définir tous les chemins d'image. C'est pourquoi l'objet state.src fait référence à l'objet du composant .

Consultez la documentation de ReactJS pour React.Component si vous souhaitez en savoir plus sur l'état et les accessoires.

Continuons en modifiant le fichier index.vr.js pour utiliser le composant Canvas et le restituer à la scène:

 / * index.vr.js * /
import Réagir à partir de 'réagir';
import {
  AppRegistry,
  Vue,
} de 'react-vr';
import Canvas à partir de './components/Canvas';

exporter la classe par défaut GDVR_REACTVR_SITEPOINT_GALLERY extends React.Component {

  constructeur () {
    super();

    this.state = {
      src: 'reactconf_00.jpg',
    }
  }

  render () {
    revenir (
      
        
      
    );
  }
}

AppRegistry.registerComponent ('GDVR_REACTVR_SITEPOINT_GALLERY', () => GDVR_REACTVR_SITEPOINT_GALLERY);

Outre les dépendances React VR déjà utilisées, nous devons importer notre composant Canvas personnalisé. Ensuite, nous déclarons la classe d'application dans la ligne six:

 / * index.vr.js * /
import Canvas à partir de './components/Canvas';

Ensuite, nous ajoutons le composant en tant que composant enfant du composant . Nous utilisons src comme accessoire du composant parce que nous le référons dans le composant Canvas. Un regard dans le navigateur devrait maintenant montrer l'image panoramique, et nous devrions déjà être en mesure d'interagir avec elle.

via GIPHY

Créer un composant d'interface utilisateur pour contenir quatre Boutons

Ce que nous voulons faire maintenant est de créer quatre boutons qu'un utilisateur peut déclencher pour échanger les images. Nous allons donc ajouter deux nouveaux composants: un composant d'interface utilisateur et son composant enfant, un composant Button. Commençons par le composant Button:

 / * Button.js * /
import Réagir à partir de 'réagir';
import {
  atout,
  Image,
  Vue,
  VrButton,
} de 'react-vr';

La classe Button étend React.Component {

  onButtonClick = () => {
    this.props.onClick ();
  }

  render () {
    revenir (
      
        
          
          
        
      
    );
  }
}

bouton d'exportation par défaut;

Pour construire le bouton, nous utilisons le composant de React VR, que nous importons à la ligne six. En outre, nous utilisons un composant image pour ajouter nos images d'actif à chaque bouton, puisque le composant lui-même n'a pas d'apparence. Comme avant, nous utilisons un accessoire pour définir la source de l'image. Une autre fonctionnalité que nous utilisons deux fois dans ce composant est le style prop, pour ajouter des valeurs de mise en page à chaque bouton et son image. The utilise également un écouteur d'événement, onClick .

Pour ajouter quatre composants Button à notre scène, nous utiliserons le composant parent de l'interface utilisateur, que nous ajouterons en tant qu'enfant dans index.vr.js après. Avant d'écrire le composant de l'interface utilisateur, créons un objet de configuration définissant la relation entre les images équirectangulaires, les images des boutons et les boutons eux-mêmes. Pour ce faire, nous déclarons une constante juste après les instructions d'importation dans le fichier index.vr.js :

 / * index.vr.js * /
const Config = [
  {
    key: 0,
    imageSrc: 'reactconf_00.jpg',
    buttonImageSrc: 'button-00.png',
  },
  {
    key: 1,
    imageSrc: 'reactconf_01.jpg',
    buttonImageSrc: 'button-01.png',
  },
  {
    key: 2,
    imageSrc: 'reactconf_02.jpg',
    buttonImageSrc: 'button-02.png',
  },
  {
    key: 3,
    imageSrc: 'reactconf_03.jpg',
    buttonImageSrc: 'button-03.png',
  }
];

Le composant UI utilisera les valeurs définies dans la config pour gérer les événements de regard et de clic:

 / * UI.js * /
import Réagir à partir de 'réagir';
import {
  Vue,
} de 'react-vr';
bouton d'importation de './Button';

L'interface utilisateur de classe étend React.Component {

  constructeur (accessoires) {
    super (les accessoires);

    this.buttons = this.props.buttonConfig;
  }

  render () {
    const buttons = this.buttons.map ((bouton) =>
      

Pour définir la source d'une image, nous utilisons les valeurs de configuration que nous avons déjà ajoutées au fichier index.vr.js . Nous utilisons également le prop onClick pour gérer l'événement click, que nous ajouterons également dans quelques instants au fichier index.vr.js . Ensuite, nous créons autant de boutons que définis dans l'objet config button, pour les ajouter plus tard dans le code JSX qui sera rendu à la scène:

 / * UI.js * /
const buttons = this.buttons.map ((bouton) =>
  

Maintenant, tout ce que nous avons à faire est d'ajouter le composant UI à la scène définie dans le fichier index.vr.js . Nous importons donc le composant de l'interface utilisateur juste après l'importation du composant Canvas:

 / * index.vr.js * /
importer l'interface utilisateur à partir de './components/UI';

Ensuite, nous ajoutons le composant à la scène:

 / * index.vr.js * /

  
   {
      this.setState ({src: Config [key] .imageSrc});
    }}
  />

Lorsque vous vérifiez ce code dans le navigateur, vous remarquerez que le clic ne déclenche pas un échange de source d'image pour le moment. Pour écouter les accessoires mis à jour, nous devrons ajouter une autre fonction au composant Canvas juste après la fonction constructeur.

Si vous êtes intéressé par le cycle de vie d'un composant React, vous pouvez lire à propos de React.Component dans les documents React . 

 / * Canvas.js * /
componentWillReceiveProps (nextProps) {
  this.setState ({src: nextProps.src});
}

Un test dans le navigateur devrait maintenant réussir, et un clic sur une image de bouton devrait changer l'image sphérique.

via GIPHY

Ajouter des animations pour le bouton Transitions d'état

Pour rendre les boutons plus sensibles aux interactions de l'utilisateur, nous souhaitons ajouter des états et des transitions de survol entre l'état inactif par défaut et l'état de survol. Pour ce faire, nous allons utiliser la bibliothèque animée et fonctions d'accélération puis écrire des fonctions pour chaque transition: animateIn et animateOut :

 / * Button.js * /
import Réagir à partir de 'réagir';
import {
  Animé,
  atout,
  Image,
  Vue,
  VrButton,
} de 'react-vr';

const Easing = require ('Easing');

La classe Button étend React.Component {

  constructeur (accessoires) {
    super();

    this.state = {
      animatedTranslation: new Animated.Value (0),
    }
  }

  animateIn = () => {
    Animated.timing (
      this.state.animatedTranslation,
      {
        toValue: 0,125,
        durée: 100,
        assouplissement: Easing.in,
      }
    ).début();
  }

  animateOut = () => {
    Animated.timing (
      this.state.animatedTranslation,
      {
        toValue: 0,
        durée: 100,
        assouplissement: Easing.in,
      }
    ).début();
  }

  onButtonClick = () => {
    this.props.onClick ();
  }

  render () {
    revenir (
      
        
          
          
        
      
    );
  }
}

bouton d'exportation par défaut;

Après avoir ajouté les dépendances, nous définissons un nouvel état pour contenir la valeur de traduction que nous voulons animer:

 / * Button js * /
constructeur (accessoires) {
  super();

  this.state = {
    animatedTranslation: new Animated.Value (0),
  }
}

Ensuite, nous définissons deux animations, chacune dans une fonction séparée, qui décrivent la lecture de l'animation lorsque le curseur entre dans le bouton, et lorsque le curseur quitte le bouton:

 / * Button.js * /
animateIn = () => {
  Animated.timing (
    this.state.animatedTranslation,
    {
      toValue: 0,125,
      durée: 100,
      assouplissement: Easing.in,
    }
  ).début();
}

animateOut = () => {
  Animated.timing (
    this.state.animatedTranslation,
    {
      toValue: 0,
      durée: 100,
      assouplissement: Easing.in,
    }
  ).début();
}

Pour utiliser la valeur state.animatedTranslation dans le code JSX, nous devons rendre le composant animable, en ajoutant :

 / * Button.js * /

Nous appellerons la fonction lorsque les écouteurs d'événement onButtonEnter et onButtonExit sont déclenchés:

 / * Button.js * /

Un test de notre code dans le navigateur devrait montrer les transitions entre la position sur l'axe z de chaque bouton:

via GIPHY

Construire et tester le Application

Ouvrez votre application dans un navigateur qui prend en charge WebVR et accédez à votre serveur de développement, en utilisant non http: // localhost: 8081 / vr / index.html mais votre adresse IP, par exemple , http://192.168.1.100:8081/vr/index.html . Ensuite, appuyez sur le bouton View in VR qui ouvrira une vue plein écran et lancera le rendu stéréoscopique.

via GIPHY

Pour télécharger votre application sur un serveur, vous pouvez exécuter le script npm npm run bundle qui créera un nouveau dossier build dans le répertoire vr avec le compilateur. des dossiers. Sur votre serveur Web, vous devriez avoir la structure de répertoire suivante:

 Web Server
├─ static_assets /
│
├─ index.html
Index─ index.bundle.js
Client─ client.bundle.js

Autres ressources

C'est tout ce que nous avions à faire pour créer une petite application WebVR avec React VR. Vous pouvez trouver le code de projet entier sur GitHub .

React VR a quelques composants supplémentaires dont nous n'avons pas discuté dans ce tutoriel:

  • Il y a un composant Text pour le rendu du texte
  • Quatre composants de lumière différents peuvent être utilisés pour ajouter de la lumière une scène: AmbientLight DirectionnelLight PointLight et Pleins feux .
  • Un composant Sound ajoute spatial
  • Pour ajouter des vidéos, le composant Video ou le composant VideoPano peut être utilisé. Un composant VideoControl spécial ajoute des contrôles pour la lecture et le volume vidéo.
  • Avec le composant Model nous pouvons ajouter des modèles 3D au format obj à l'application.
  • Un composant CylindricalPanel peut être utilisé pour aligner des éléments enfants sur la surface interne d'un cylindre, par exemple pour aligner des éléments d'interface utilisateur.
  • Il existe trois composants pour créer des primitives 3D: a composant un composant et un composant

React VR est également en cours de développement, ce qui explique le navigateur Carmel Developer Preview. Si vous souhaitez en savoir plus sur React VR, voici quelques ressources intéressantes:

Et si vous voulez approfondir WebVR en général, ces articles pourraient vous convenir:

Avez-vous travaillé? avec React VR encore? Avez-vous fait des projets sympas avec? J'aimerais connaître vos opinions et vos expériences dans les commentaires!

Si vous avez aimé cet article et que vous voulez en savoir plus sur React, jetez un coup d'œil à notre cours Réagissez sur la voie ES6 . [19659103] Cet article a été révisé par les pairs Moritz Kröger et Tim Severien . Merci à tous les pairs évaluateurs de SitePoint pour avoir rendu le contenu de SitePoint le meilleur possible!


Michaela Lehr

Michaela est une développeur frontale et concepteur UX de Berlin. Elle a co-fondé le studio de développement GeilDanke . Pendant son temps libre, elle aime faire des jeux, pratiquer le yoga, le surf et le tricot.

Le meilleur outil 2023 pour ta croissance Instagram !



Source link