标签: react-360

我正在试图找出如何使用React VR插入React路由器.

首先,我应该使用react-router dom/ native？目前尚不清楚,因为React VR构建在React Native之上,但在浏览器中运行.

这是我遇到问题的代码.

import React from 'react';

import { AppRegistry } from 'react-vr';

import {
  BrowserRouter as Router,
  Route
} from 'react-router-dom'

import Landing from './components/Landing';
import Video from './components/Video';

export default class WelcomeToVR extends React.Component {
  render() {
    return (
      <Router>
        <Route exact path={'/vr/'} component={Landing} />
        <Route exact path={'/vr/video/'} component={Video} />
      </Router>
    );
  }
};

AppRegistry.registerComponent('WelcomeToVR', () => WelcomeToVR);

打开浏览器时,上面的代码返回以下错误/vr/:

我正在使用React VR开发一个应用程序,我用搅拌器创建了一个3D pokeball.我将其导出为Wavefront .obj文件并在我的React VR应用程序中使用它.

在控制台中我看到了这个警告:

THREE.MeshBasicMaterial:shininess,emissive并且specular不是这种材料的财产.

您可以在下面找到我的代码:

import React from 'react';
import { AppRegistry, asset, StyleSheet, Pano, Text, View, Mesh } from 'react-vr';

class pokemongo extends React.Component {
  render() {
    return (
      <View>
        <Pano source={asset('sky.jpg')} />
        <Mesh source={{ mesh: asset('pokeball.obj'), mtl: asset('pokeball.mtl') }} 
              style={{ height: 1 }} 
              transform={{ rotate: '0 90 0' }}></Mesh>
      </View>
    );
  }
};

AppRegistry.registerComponent('pokemongo', () => pokemongo);

这是渲染输出

在这个GitHub Gist上你可以找到obj和mtl文件,你可以下载该blend …

我正在使用React VR编写VR应用程序,并使用进度条(或其他东西)制作注视按钮,向用户显示他必须在该按钮上观看多长时间.我怎么能这样做？

我想使用这个伪代码(可能是这段代码中有一些bug):

constructor(props) {
    super(props);
    this.state = {
        watchTime: 3,
        progress: 0,
        watching: true
    };
}

render() {
    return (
        <VrButton onEnter={ () => this.animateProgress() }
                  onExit={ () => this.stopProgress() }
                  onClick={ ()=> this.click() }></VrButton>
    );
}

animateProgress() {
    this.setState({watching: true});
    while (this.state.watchTime >== this.state.progress && this.state.watching === true) {
        // after a timeout of one second add 1 to `this.state.progress`
    }

    this.click();
}

stopProgress() {
    this.setState({
        progress: 0,
        watching: false
    });
} …

我正在使用React 360进行一些测试,目前我唯一拥有的硬件是Google Cardboard.我在iOS上使用VR浏览器查看我上传的内容并且它正在工作,但是立体图像看起来相距太远导致"看到双重"效果.canvas对象似乎也没有扩展"VR Browser"应用程序的整个宽度.每侧似乎都有白色边框.

我似乎找不到任何关于如何在React 360代码中调整图像以适应我的Cardboard查看器镜头距离的文档.

如何配置它才能工作？有没有办法调整这些问题？

https://facebook.github.io/react-vr/docs/videopano.html

我想支持增强现实.这个库有可能吗？

还有其他库,例如ar.js,但那些需要WebRTC,因为iOS上不支持这是一个showstopper.

我已经在互联网上搜索了几个小时，但找不到任何相关内容。到目前为止，我刚刚发现GitHub项目已经存档了。此外，有几篇关于 2018 年品牌重塑的帖子，但没有提到他们将停止这方面的工作。他们甚至保留了旧的React VR 文档。

那么，到底是怎么回事呢？

我正在尝试使用React VR创建一个Web应用程序并使用Samsung Gear VR运行它.

在我的场景中处于VR模式时,我看不到默认的白点(VR指针).因此,诸如"onInput"和"onClick"之类的方法不起作用.如果我在VR模式之外查看相同的场景,即使使用Gear VR中提供的浏览器,相同的方法也能正常工作.

我错过了什么吗？如何在Gear VR中以VR模式访问这些方法？

在普通Web浏览器(包括Gear VR中的浏览器)中正​​常工作的示例代码,但不适用于我在VR中.

<Text
    style={{
        // backgroundColor: '#777879',
        fontSize: 0.2,
        transform: [{translate: [0, 0, -5]}],
        color: this.state.textColor
    }}
    onEnter={() => this.setState({textColor: 'gold'})}
    onExit={() => this.setState({textColor: 'white'})}>
    This text will turn gold when you look at it.
</Text>