Saltar al contenido

Aprenda a crear experiencias de realidad virtual con ReactVR

Crear un nuevo componente para nuestros botones. En la práctica, podemos usar una Vista o un VrButton, ya que ambos pueden tener el estilo de botones y tienen eventos útiles (como onEnter) para este propósito.

Sin embargo, nosotros'taremos un VrButton porque tiene una máquina de estado diferente y añade los eventos enClick y enLongClick.

Aprenda a crear experiencias de realidad virtual con ReactVR
Aprenda a crear experiencias de realidad virtual con ReactVR

Además, para organizar un poco las cosas, vamos a utilizar una hoja de estilo para crear un objeto de estilo y así poder referenciar un estilo por identificación.

Esto es lo que contiene el archivo button.js:

<pre>123456789101112131415161718192021222324252627282930importarReactfrom"reaccionar";importar{StyleSheet,Text,VrButton}de"react-vr";exportarclase predeterminadaButtonextendsReact. Componente{constructor(){super();this.styles=StyleSheet.create({ button:{ margin:0.05, height:0.4, backgroundColor:"red"}, text:{ fontSize:0. 3, textAlign:"center"});}render(){retorno(<VrButton style={this.styles.button} onClick={()=>this.props. callback()}><Text style={this.styles.text}>{this.props.text}</Text></VrButton>);}}</pre>
javascript

Un VrButton no tiene apariencia, así que tenemos que darle un estilo. También puede envolver una imagen o un componente de texto. Además, le pasamos la función a ejecutar cuando se hace clic en el botón como una propiedad del componente, así como su texto.

Ahora, en nuestro componente raíz, importamos este componente de botones y en el método de renderizado, añadimos dos botones envueltos en una Vista:

<pre>1234567891011121314151617181920212223…importarButtonfrom'./button.js';classEarthMoonVRextendsReact.Component{…render(){retorno(<View>…<AmbientLight intensity={2. 6}/><View><Botón text='+'/><Botón text='-'/></View>. …</Ver>);}};</pre>
javascript

Estos botones representarán un control de zoom cambiando el valor del eje Z del modelo's, por lo que let's añade una propiedad de estado llamada zoom con el valor inicial de -70 (valor del eje Z de Earth's), las llamadas para aumentarlo/disminuirlo y modificar los modelos para utilizarlo:

<pre>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152claseEarthMoonVRextendsReact. Componente{constructor(){super();this.state={ rotación:130, zoom:-70,};…}render(){retorno(<View>… <Ver><Botón text='+' callback={()=>this.setState((prevState)=>({ zoom: prevState. zoom+10}))}/><Botón text='-' callback={()=>this.setState((prevState)=>({ zoom: prevState. zoom-10}))}/></Ver><Estilo del modelo={{{transformar:[{traducir:[-25,0,this.state.zoom]},{escala:0. 05},{rotarY:este.estado.rotación},{rotarX:20},{rotarZ:-10}],}} fuente={{{obj:asset('earth.obj'), mtl:asset('earth. mtl'}} lit={true}/><Estilo del modelo={{{transformación:[{traducir:[10,10,este.estado.zoom-30]},{escala:0,05},{rotarY:este.estado. rotation/3},],}} source={{{obj:asset('moon.obj'), mtl:asset('moon.mtl')}} lit={true}/></View>);}};</pre>
javascript

Ahora vamos a crear el estilo de la vista que envuelve nuestros botones usando el flexbox y la StyleSheet.create:

<pre>12345678910111213141516171819202122232425262728293031323334classEarthMoonVRextendsReact.Componente{constructor(){super();…this.styles=StyleSheet. create({ menu:{ flex:1, flexDirection:'column', width:1, alignItems:'stretch', transform:[{translate:[2,2,-5]}],},});…}render(){return(<View>…& <View style={this.styles. menu}><Botón text='+' callback={()=>this.setState((prevState)=>({ zoom: prevState. zoom+10}))}/><Botón text='-' callback={()=>this. setState((prevState)=>({ zoom: prevState.zoom-10}))}/></Ver>…</Ver>);}};</pre>
javascript

En un diseño de flexbox, los niños pueden ser dispuestos verticalmente con flexDirection:'columna' u horizontalmente con flexDirection:'fila'. El ejemplo establece un flexbox de una columna, con un ancho de un metro y una alineación elástica, lo que significa que los elementos tomarán el ancho del contenedor. (tixag

Finalmente, podemos sacar las imágenes del cielo del método de renderizado para que no parezca tan abarrotado:

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117importReactfrom "react"; importar{AppRegistry, asset,StyleSheet,Pano,Text,View,Model,AmbientLight}de "react-vr";importarButtonfrom". /button.js";classEarthMoonVRextendsReact.Componente{constructor(){super();this.state={ rotation:130, zoom:-70};this.lastUpdate=Fecha.now();this. spaceSkymap=["../actividades_estáticas/espacio_derecha.png","../actividades_estáticas/espacio_izquierdo.png","../actividades_estáticas/espacio_arriba.png","../actividades_estáticas/espacio_abajo.png","../actividades_estáticas/espacio_atrás.png","../actividades_estáticas/espacio_delante.png"];this.styles=StyleSheet. create({ menu:{ flex:1, flexDirection: "column", width:1, alignItems: "stretch", transform:[{ translate:[2,2,-5]}]}});this.rotate=this.rotate.bind(this);}componenteDidMount(){this.rotate();}componenteWillUnmount(){if(this.frameHandle){cancelAnimationFrame(this.frameHandle);this. frameHandle=null;}}rotate(){const now =Fecha.ahora();const delta = ahora -esta.últimaActualización;esta.últimaActualización= ahora;esta.setState({ rotation:esta.state.rotation+ delta /150});esta.frameHandle=requestAnimationFrame(esta.rotate);}render(){return(<View><Pano source={{{{{uri:esto. spaceSkymap}}/{2.6}/{2.6}/{2.6}/{2.6};};*Ver estilo={este.menú.de.estilos}{{{{i};*{i}{i1}botón text="+" callback={()={i};*Esto. setState(prevState={{[zoom: prevState.zoom+10}))}/{;<Button text="-" callback={()={()=;this.setState(prevState={{{[zoom: prevState. zoom-10}))}/{ ~ -Ver};/Vista};Estilo del modelo={{{{transformar:[traducir:[-25,0,este.estado.zoom]},{ escala:0,05},{ rotarY:este.estado. rotación},{ rotarX:20},{ rotarZ:-10}]}} fuente={{{{objetivo:activo("tierra.obj"), mtl:activo("tierra.mtl")}} lit={verdadero}/{{verdadero};};Modelo estilo={{{transformar:[{traducir:[10,10,esto. state.zoom-30]},{ scale:0.05},{ rotateY:this.state.rotation/3}]}} source={{{objeto:activo("luna.obj"), mtl:activo("luna.mtl")}} lit={true}/{ </View ];);}}}AppRegistry.registerComponent("EarthMoonVR",()=,10,this.
javascript

Si probamos la aplicación, veremos los botones en acción: