我正在使用React VR制作应用程序。如果您不知道React VR，那么它是基于其他一些组件的React Native，其中包括3.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 -tag，但对于内部的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>
我已经在互联网上搜索了，但没有发现可以帮助我的。
这是我和我的团队准备的React 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 Directory主持外部资源(图像，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进行代码预处理，编译，捆绑和资产加载。在渲染函数中，有视图，pano和文本组件。这些React VR组件中的每一个都有一个样式属性，可帮助控制布局。
要包装它，请检查根组件是否在AppRegistry.RegisterComponent上注册，该组件捆绑了应用程序并将其重新运行。在我们的React VR项目中突出显示的下一步是编译2个主要文件。
index.vr.js文件
在构造函数中，我们指示了VR Tour应用程序的数据。这些是场景图像，可以在具有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>
导航按钮在每个场景中，我们都将过渡按钮放置在巡回赛中，从州获取数据。订阅on Intput事件以传达场景之间的切换，也将其绑定到它。
<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);
按钮动画
下面，我们将显示导航按钮动画的代码。我们已经在按钮增加原则上建立了动画，应用了常规的请求inimationframe。
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键处理一条消息。我们稍后会详细说明为什么这样做。同样，我们已经订阅了输入事件以传达箭头转。
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 Keys。
请参阅此处的GitHub上的整个index.vr.js文件。
client.js file
进一步进入我们的反应VR示例虚拟现实Web应用程序，我们将下面的代码添加到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();
}
}
}
导出坐标
然后，我们利用三分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文件的工作原理，因为它很简单，您也可以下载它。
另外，如果您对look -look类型估算感兴趣或有关ReactVR开发的其他技术详细信息 - 您可以在此处找到一些信息：