Как создавать события с помощью React Native
Я делаю приложение, используя React VR. Если вы не знаете React VR, то он основан на React Native с некоторыми другими компонентами, включает Three.js и другие материалы, специфичные для использования WebVR.
Я делаю компонент с именем NavigateButton, Ниже мой код:
import React from 'react';
import { AppRegistry, asset, StyleSheet, Pano, Text, View, VrButton, Sphere } from 'react-vr';
export class NavigateButton extends React.Component {
render() {
return (
<VrButton onClick={() => this.onNavigating()}>
<Sphere radius={0.5} widthSegments={10} heightSegments={10} style={{ color: "red" }} />
</VrButton>
);
}
onNavigating() { // This method must throw an event
console.log(this.props.to);
}
};
Если пользователь нажимает на VrButton (это похоже на HTML 5 button -тэг, но для VR с внутри него, сферой), событие должно быть поднято до места, где я называю NavigateButton составная часть. Это в коде ниже:
import React from 'react';
import { AppRegistry, asset, StyleSheet, Pano, Text, View, VrButton, Sphere } from 'react-vr';
import { NavigateButton } from './components/nativateButton.js';
let room = asset('360 LR/inkom_hal.jpg');
export default class MainComp extends React.Component {
render() {
return (
<View>
<Pano source={asset('360 LR/inkom_hal.jpg')} />
<View style={{ transform: [{ translate: [20, 0, 0] }] }}>
<NavigateButton to="garage"></NavigateButton>
<!-- and must been catch here -->
</View>
<View style={{ transform: [{ translate: [-7, 0, -20] }] }}>
<NavigateButton to="woonkamer"></NavigateButton>
<!-- or here -->
</View>
</View>
);
}
}
AppRegistry.registerComponent('MainComp', () => MainComp);
Возможно ли это сделать? Я хотел бы что-то вроде кода ниже, чтобы поймать событие:
<NavigateButton to="woonkamer" onNavigate={() => this.change()}></NavigateButton>
Я искал в Интернете, но ничего не нашел, что могло бы мне помочь.
1 ответ
Вот инструкция по созданию примера приложения VR с React VR, подготовленная мной и моей командой:
Создание виртуального тура для веба Структура каталога будущего приложения выглядит следующим образом:
+-node_modules
+-static_assets
+-vr
\-.gitignore
\-.watchmanconfig
\-index.vr.js
\-package.json
\-postinstall.js
\-rn-cli-config.js
Код веб-приложения будет находиться в файле index.vr.js, а каталог static_assets содержит внешние ресурсы (изображения, 3D-модели). Вы можете узнать больше о том, как начать работать с проектом React VR, здесь. Файл index.vr.js содержит следующее:
import React from 'react';
import {
AppRegistry,
asset,
StyleSheet,
Pano,
Text,
View,
}
from 'react-vr';
class TMExample extends React.Component {
render() {
return (
<View>
<Pano source={asset('chess-world.jpg')}/>
<Text
style={{
backgroundColor:'blue',
padding: 0.02,
textAlign:'center',
textAlignVertical:'center',
fontSize: 0.8,
layoutOrigin: [0.5, 0.5],
transform: [{translate: [0, 0, -3]}],
}}>
hello
</Text>
</View>
);
}
};
AppRegistry.registerComponent('TMExample', () => TMExample);
Используемые компоненты VR
Мы используем React Native packager для предварительной обработки кода, компиляции, пакетирования и загрузки ресурсов. В функции рендеринга есть компоненты вида, панорамы и текста. Каждый из этих компонентов React VR поставляется с атрибутом стиля, который помогает контролировать макет.
Чтобы завершить его, убедитесь, что корневой компонент зарегистрирован в AppRegistry.registerComponent, который связывает приложение и готовит его к запуску. Следующий шаг, который стоит выделить в нашем проекте React VR, - это компиляция 2 основных файлов.
Файл index.vr.js
В конструкторе мы указали данные для приложения VR tour. Это изображения сцен, кнопки для переключения между сценами с координатами XYZ, значения для анимации. Все изображения мы храним в папке static_assets.
constructor (props) {
super(props);
this.state = {
scenes: [{scene_image: 'initial.jpg', step: 1, navigations: [{step:2, translate: [0.73,-0.15,0.66], rotation: [0,36,0] }] },
{scene_image: 'step1.jpg', step: 2, navigations: [{step:3, translate: [-0.43,-0.01,0.9], rotation: [0,140,0] }]},
{scene_image: 'step2.jpg', step: 3, navigations: [{step:4, translate: [-0.4,0.05,-0.9], rotation: [0,0,0] }]},
{scene_image: 'step3.jpg', step: 4, navigations: [{step:5, translate: [-0.55,-0.03,-0.8], rotation: [0,32,0] }]},
{scene_image: 'step4.jpg', step: 5, navigations: [{step:1, translate: [0.2,-0.03,-1], rotation: [0,20,0] }]}],
current_scene:{},
animationWidth: 0.05,
animationRadius: 50
};
}
Затем мы изменили вывод изображений, связывающих их с состоянием, ранее указанным в конструкторе.
<View>
<Pano source={asset(this.state.current_scene['scene_image'])}
style={{
transform: [{translate: [0, 0, 0]}]
}}/>
</View>
Навигационные кнопки В каждой сцене мы поместили кнопки перехода для навигации по маршруту, получая данные из состояния. Подписка на событие onInput для передачи переключения между сценами, связывая это также с ним.
<View>
<Pano source={asset(this.state.current_scene['scene_image'])} onInput={this.onPanoInput.bind(this)}
onLoad={this.sceneOnLoad} onLoadEnd={this.sceneOnLoadEnd}
style={{ transform: [{translate: [0, 0, 0]}] }}/>
{this.state.current_scene['navigations'].map(function(item,i){
return <Mesh key={i}
style={{
layoutOrigin: [0.5, 0.5],
transform: [{translate: item['translate']},
{rotateX: item['rotation'][0]},
{rotateY: item['rotation'][1]},
{rotateZ: item['rotation'][2]}]
}}
onInput={ e => that.onNavigationClick(item,e)}>
<VrButton
style={{ width: 0.15,
height:0.15,
borderRadius: 50,
justifyContent: 'center',
alignItems: 'center',
borderStyle: 'solid',
borderColor: '#FFFFFF80',
borderWidth: 0.01
}}>
<VrButton
style={{ width: that.state.animationWidth,
height:that.state.animationWidth,
borderRadius: that.state.animationRadius,
backgroundColor: '#FFFFFFD9'
}}>
</VrButton>
</VrButton>
</Mesh>
})}
</View>
onNavigationClick(item,e){
if(e.nativeEvent.inputEvent.eventType === "mousedown" && e.nativeEvent.inputEvent.button === 0){
var new_scene = this.state.scenes.find(i => i['step'] === item.step);
this.setState({current_scene: new_scene});
postMessage({ type: "sceneChanged"})
}
}
sceneOnLoad(){
postMessage({ type: "sceneLoadStart"})
}
sceneOnLoadEnd(){
postMessage({ type: "sceneLoadEnd"})
}
this.sceneOnLoad = this.sceneOnLoad.bind(this);
this.sceneOnLoadEnd = this.sceneOnLoadEnd.bind(this);
this.onNavigationClick = this.onNavigationClick.bind(this);
Анимация кнопок
Ниже мы покажем код для анимации кнопок навигации. Мы построили анимацию по принципу увеличения кнопки, применяя обычный requestAnimationFrame.
this.animatePointer = this.animatePointer.bind(this);
animatePointer(){
var delta = this.state.animationWidth + 0.002;
var radius = this.state.animationRadius + 10;
if(delta >= 0.13){
delta = 0.05;
radius = 50;
}
this.setState({animationWidth: delta, animationRadius: radius})
this.frameHandle = requestAnimationFrame(this.animatePointer);
}
componentDidMount(){
this.animatePointer();
}
componentWillUnmount(){
if (this.frameHandle) {
cancelAnimationFrame(this.frameHandle);
this.frameHandle = null;
}
}
В функции componentWillMount мы указали текущую сцену. Затем мы также подписались на событие сообщения для обмена данными с основным потоком. Мы делаем это таким образом из-за необходимости разработки компонента React VR в отдельном потоке.
В функции onMainWindowMessage мы обрабатываем только одно сообщение с ключом newCoordinates. Позже мы уточним, почему мы это делаем. Точно так же мы подписались на событие onInput для передачи поворотов стрелок.
componentWillMount(){
window.addEventListener('message', this.onMainWindowMessage);
this.setState({current_scene: this.state.scenes[0]})
}
onMainWindowMessage(e){
switch (e.data.type) {
case 'newCoordinates':
var scene_navigation = this.state.current_scene.navigations[0];
this.state.current_scene.navigations[0]['translate'] = [e.data.coordinates.x,e.data.coordinates.y,e.data.coordinates.z]
this.forceUpdate();
break;
default:
return;
}
}
<Pano source={asset(this.state.current_scene['scene_image'])} onInput={this.onPanoInput.bind(this)}
style={{ transform: [{translate: [0, 0, 0]}] }}/>
rotatePointer(nativeEvent){
switch (nativeEvent.keyCode) {
case 38:
this.state.current_scene.navigations[0]['rotation'][1] += 4;
break;
case 39:
this.state.current_scene.navigations[0]['rotation'][0] += 4;
break;
case 40:
this.state.current_scene.navigations[0]['rotation'][2] += 4;
break;
default:
return;
}
this.forceUpdate();
}
Повороты стрелок выполняются с помощью клавиш ↑→↓ alt, для осей YXZ соответственно.
Смотрите и скачайте весь файл index.vr.js на Github ЗДЕСЬ.
Файл Client.js
Двигаясь дальше к нашему примеру React VR с веб-приложениями виртуальной реальности, мы добавили приведенный ниже код в функцию init. Целью является обработка событий ondblclick, onmousewheel и message, где последний находится в потоке рендеринга для обмена сообщениями. Также мы сохранили ссылку на объекты vr и vr.player._camera.
window.playerCamera = vr.player._camera;
window.vr = vr;
window.ondblclick= onRendererDoubleClick;
window.onmousewheel = onRendererMouseWheel;
vr.rootView.context.worker.addEventListener('message', onVRMessage);
Мы ввели функцию onVRMessage для масштабирования, возвращающегося к значению по умолчанию при смене сцен. Также мы добавили загрузчик, когда происходит смена сцены.
function onVRMessage(e) {
switch (e.data.type) {
case 'sceneChanged':
if (window.playerCamera.zoom != 1) {
window.playerCamera.zoom = 1;
window.playerCamera.updateProjectionMatrix();
}
break;
case 'sceneLoadStart':
document.getElementById('loader').style.display = 'block';
break;
case 'sceneLoadEnd':
document.getElementById('loader').style.display = 'none';
break;
default:
return;
}
}
onRendererDoubleClick функция для расчета 3D-координат и отправки сообщений компоненту vr для изменения координат стрелки. get3DPoint Функция настраивается для нашего веб-приложения VR и выглядит следующим образом:
function onRendererDoubleClick(){
var x = 2 * (event.x / window.innerWidth) - 1;
var y = 1 - 2 * ( event.y / window.innerHeight );
var coordinates = get3DPoint(window.playerCamera, x, y);
vr.rootView.context.worker.postMessage({ type: "newCoordinates", coordinates: coordinates });
}
Переключиться на колесо мыши
Мы использовали onRendererMouseWheel функция переключения зума на колесико мыши.
function onRendererMouseWheel(){
if (event.deltaY > 0 ){
if(window.playerCamera.zoom > 1) {
window.playerCamera.zoom -= 0.1;
window.playerCamera.updateProjectionMatrix();
}
}
else {
if(window.playerCamera.zoom < 3) {
window.playerCamera.zoom += 0.1;
window.playerCamera.updateProjectionMatrix();
}
}
}
Экспорт координат
Тогда мы использовали Three.js для работы с 3D-графикой. В этом файле мы передали только одну функцию для экспорта экрана, координированного с мировыми координатами.
import * as THREE from 'three';
export function get3DPoint(camera,x,y){
var mousePosition = new THREE.Vector3(x, y, 0.5);
mousePosition.unproject(camera);
var dir = mousePosition.sub(camera.position).normalize();
return dir;
}
Смотрите и скачайте весь файл client.js на Github ЗДЕСЬ. Вероятно, нет необходимости объяснять, как работает файл cameraHelper.js, так как он прост, и вы также можете скачать его.
Кроме того, если вы заинтересованы в схожей смете проекта или тех же дополнительных технических деталях о разработке ReactVR - вы можете найти некоторую информацию здесь: