我正在使用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>
我在互联网上搜索过但没有找到任何可以帮助我的内容。
答案 0 :(得分：2)
以下是如何使用我和我的团队准备的React VR创建Sample VR应用程序的说明：
为网络创建VR游览 未来应用程序目录的结构如下：
+-node_modules
+-static_assets
+-vr
\-.gitignore
\-.watchmanconfig
\-index.vr.js
\-package.json
\-postinstall.js
\-rn-cli-config.js
Web应用程序的代码位于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 app的数据。这些是场景图像，用于在具有X-Y-Z坐标的场景之间切换的按钮，用于动画的值。我们在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();
}
对于Y-X-Z轴，分别用↑→↓alt键完成箭头转动。
在Github上查看并下载整个index.vr.js文件。
Client.js文件
进一步研究虚拟现实Web应用程序的React VR示例，我们已将下面的代码添加到init函数中。目标是处理ondblclick，onmousewheel和消息事件，后者在渲染线程中进行消息交换。另外，我们保留了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函数是我们的Web 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;
}
在Github上查看并下载整个client.js文件。可能没有必要解释cameraHelper.js文件是如何工作的，因为它很简单，你也可以下载它。
此外，如果您对类似的项目估算或有关ReactVR开发的其他技术细节感兴趣，您可以找到一些信息here：