Giới thiệu về React 360
React 360 (hay React VR) là một thư viện được sử dụng để tạo trải nghiệm thực tế ảo với React và sử dụng Three.js để kết xuất. Vì nó là một dự án React, nên API sẽ quen thuộc với những người đã biết React.
Cách sử dụng React 360 tương tự như React Native, nó là một thư viện sử dụng các thành phần tùy chỉnh và không giao tiếp với DOM như ta vẫn biết.
Cài đặt React 360 CLI
Đầu tiên, hãy đảm bảo bạn đã cài đặt Node.js trên máy tính của bạn . Tiếp theo, ta cần download React 360 CLI từ npm :
$ npm install -g react-360-cli Như vậy, ta sẽ có thể sử dụng react-360 trên phạm vi global trên máy của bạn .
Tạo một dự án mới
Sử dụng CLI, ta có thể tạo một dự án mới bằng lệnh init :
$ react-360 init hello-vr $ cd hello-vr $ code . $ npm run start Thao tác này sẽ tạo một folder mới có tên hello-vr và tạo ra một dự án mới tại đây. Bằng cách chạy npm run start bên trong folder này, ta đang bắt đầu gói Metro và ứng dụng của ta xuất hiện tại http: // localhost: 8081 / index.html
Bạn có thể giữ chuột trái để di chuyển xung quanh màn hình. React 360 (như tên được đề cập) được xây dựng để hoạt động với ảnh / video hình vuông góc 180-360 độ và sức mạnh của điều này có thể được nhìn thấy với dự án bắt đầu.
Nó cũng đi kèm với nhiều thành phần UI có sẵn mà ta có thể sử dụng. Ví dụ về những điều này là: View , Image , Entity và VrButton .
Thí dụ
Hãy xem cách hoạt động của điều này bằng cách đi sâu vào client.js :
import { ReactInstance } from 'react-360-web'; function init (bundle, parent, options = {}) { const r360 = new ReactInstance(bundle, parent, { // Add custom options here fullScreen : true, ...options }); // Render your app content to the default cylinder surface r360.renderToSurface( r360.createRoot( 'hello_vr', { /* initial props */ } ), r360.getDefaultSurface() ); // Load the initial environment r360.compositor.setBackground(r360.getAssetURL('360_world.jpg')); } window.React360 = { init }; Ta đang cài đặt root với r360.createRoot cho thành phần React hello_vr được tìm thấy trong index.js , lưu ý cách tham chiếu này bằng tên chuỗi.
Ta có thể tương tác với môi trường bằng cách sử dụng thành phần VrButton :
import React from 'react'; import { AppRegistry, StyleSheet, Text, View, VrButton } from 'react-360'; export default class hello_vr extends React.Component { state = { counter : 0 }; _incrementCounter = () => { this.setState({ counter : (this.state.counter += 1) }); }; render () { return ( <View style={styles.panel}> <View style={styles.greetingBox}> <VrButton onClick={this._incrementCounter}> <Text style={styles.greeting}>You've clicked me {this.state.counter} times.</Text> </VrButton> </View> </View> ); } } 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 } }); AppRegistry.registerComponent('hello_vr', () => hello_vr); Mỗi lần ta nhấp vào nút, bộ counter của ta được tăng lên:
Sản xuất
Để tạo bản dựng production cho dự án React 360 của ta , hãy chạy phần sau trong terminal của bạn:
$ npm run bundle Sau đó, bạn có thể truy cập các file production mới xây dựng của bạn trong ./build .
Các tin liên quan
