Download in corso

Softwareone.it

React 360 creare app in Realtà Virtuale

React 360 è un framework per la creazione di interfacce utente 3D e VR. Costruito sopra React – una libreria progettata per semplificare la creazione di UI complesse – React 360 consente di utilizzare strumenti e concetti familiari per creare contenuti immersivi a 360 ° sul Web.

Fornisce gli strumenti necessari per creare interfacce di alta qualità e fornisce una solida base per le applicazioni basate su contenuti 360 e 3D.

React 360 consiste nel portare l’interattività in 360 spazi. Le applicazioni che combinano interfacce 2D o 3D sono facilmente a portata di mano. Visualizzatori di foto e video, tour 360, giochi di avventura classici e giochi da tavolo 3D sono tutti esempi di cose che sono state costruite con React 360 finora.

Creazione del primo progetto

Prima di iniziare, dovrai installare Node.js per windows.

Per sistemi Linux vai alla pagina del gestore pacchetti di nodejs.org per trovare istruzioni specifiche per la tua distribuzione Linux.

Una volta installato Node, puoi recuperare l’ interfaccia della riga di comando di React 360.

Apri un terminale ed esegui:

npm install -g react-360-cli

Questo recupera l’ultima versione dell’interfaccia della riga di comando e la installa sul sistema. Dopo l’installazione, possiamo usarlo per generare il codice iniziale per il nostro primo progetto. 

Inizia navigando verso una directory in cui desideri inserire il tuo nuovo progetto ed esegui il comando per creare un nuovo progetto chiamato Hello360.

react-360 init Hello360

Questo crea una nuova directory chiamata Hello360 , con tutti i file necessari per eseguire il tuo progetto. Inserisci la directory per visualizzarli.

cd Hello360

Quando creiamo applicazioni React 360, abbiamo un numero di codice sorgente e file di libreria che devono essere raggruppati in un singolo file per caricare un browser web.

Durante lo sviluppo, il bundler esegue un server locale che consente di accedere al progetto. Fornisce i file per il tuo progetto, eseguendo qualsiasi compilazione o elaborazione necessaria al momento della richiesta. 

Quando sei pronto per pubblicare il tuo progetto, puoi indicare al bundler di creare versioni di produzione di questi file, in modo da poterli collocare su qualsiasi server web. Per ora, avvia il server di sviluppo con il seguente comando.

npm start

Il server ispezionerà il tuo progetto e raccoglierà tutti i dati necessari per pubblicare i tuoi file JavaScript; Per vedere il tuo progetto, apri il tuo browser web e vai a http://localhost:8081/index.html

Inizialmente potrebbe essere necessario del tempo per caricarlo: il bundler sta eseguendo una prima scansione del filesystem. Dopo il primo caricamento, i carichi successivi sono molto più veloci.

Le parti del tuo progetto

Quando apri la directory contenente il tuo progetto, vedrai alcuni file già creati per te.

  • index.js
    • Questo è il codice principale dell’applicazione, è dove vive tutto il tuo codice React. Questo è il codice che rende unica l’applicazione e determina l’aspetto. 
  • client.js
    • Questo è il codice che collega il browser all’applicazione React: il runtime . Questo file fa tre cose. Innanzitutto, crea una nuova istanza di React 360, caricando il codice React e collegandolo a una posizione specifica nel DOM. Qui è anche dove l’applicazione può passare una varietà di opzioni.

Il punto di montaggio dichiarato in index.jsè collegato alla superficie predefinita della tua app, un livello cilindrico sul quale è possibile posizionare un’interfaccia utente 2D.

  • index.html
    • Questa è la pagina Web che carichi quando visualizzi la tua applicazione. Tutto quello che fa è fornire un punto per montare il tuo codice JavaScript. Questo è intenzionale. La maggior parte delle funzionalità è esclusa dall’HTML, in modo da poter integrare facilmente l’applicazione React 360 nelle pagine di rendering del server o nelle app Web esistenti.
  • View e Text
    • index.jsè diviso in alcune sezioni distinte. Il pezzo principale crea un nuovo componente React che viene utilizzato come elemento di primo livello della tua app. Contiene due <View>elementi e un <Text>elemento. La prima vista riempie l’intero pannello, che ha una dimensione predefinita di 1000 px x 600 px. La seconda vista fornisce un bordo e uno sfondo per il testo che contiene. L’elemento di testo più interno trasforma una stringa in caratteri resi sullo schermo, dandoti il ​​benvenuto a React 360 per la prima volta
import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-360';

export default class Hello360 extends React.Component {
  render() {
    return (
      <View style={styles.panel}>
        <View style={styles.greetingBox}>
          <Text style={styles.greeting}>
            Benvenuto in React 360
          </Text>
        </View>
      </View>
    );
  }
};

A questo punto, puoi modificare il contenuto del <Text>tuo messaggio. Cambia la 'Welcome to React 360'stringa in qualcos’altro, salva il file e aggiorna la pagina web per vedere le tue modifiche.

Contenuto di stile

Il blocco di codice successivo crea gli stili applicati al codice sopra. StyleSheetè un concetto preso direttamente da React Native . React 360 supporta gli stessi attributi di stile di React Native e le sue documentazioni dovrebbero essere utilizzate per comprendere le opzioni disponibili.

const styles = StyleSheet.create({
  panel: {
    // Fill the entire surface
    width: 1000,
    height: 600,
    backgroundColor: 'rgba(255, 255, 255, 0.4)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  greetingBox: {
    padding: 20,
    backgroundColor: '#000000',
    borderColor: '#639dda',
    borderWidth: 2,
  },
  greeting: {
    fontSize: 30,
  },
});

L’ultima riga del progetto di avvio registra il componente con AppRegistry, che consente a React 360 di montarlo su una superficie. 

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

L’identificatore di stringa utilizzato qui è lo stesso che si trova in client.js, quando monta il componente sulla superficie predefinita.

https://it.reactjs.org/tutorial/tutorial.html

https://facebook.github.io/react-360/docs/setup.html

21-10-2019

Lascia un commento

Pubblicità