光标和输入

光标和输入

    我们的目标是让编写跨平台的交互更容易些,输入事件在不同的设备上是不一样的,所以我们提供了event handlers能让最常见的几个输入方式(鼠标、键盘、手柄)标准化。

    桌面电脑上,最简单的交互方式就是用鼠标了,但在VR头戴设备上是眼球追踪,你看到的目标就是输入的events。简单来说,依赖不同的平台,选中一个组件可以用键盘、鼠标点击、点击屏幕、眼球注视,我们提供了事件处理器来处理不同设备的交互,但是我们也为不同的平台提供了公用的输入事件。

    如果你要用简单有点击事件的按键,可以用VrButton。

已支持的输入事件

onEnter

这是当光标开始和组件交叉时触发的事件,你可以配置程序使用多个光标,可以通过检查时间的source属性来决定是哪个光标产生的时间,这对不同光标系统实现不同的行为是很有用的。

onExit

这是当光标离开组件时触发的事件,在桌面电脑上,发生在鼠标光标离开组件时;和onEnter有一样的属性

onMove

光标在View上移动时触发的时间,光标的位置是通过时间的offset属性传递的,两个数字的数组就代表了View的光标所在的X和Y坐标,值就在0.0和1.0之间,其中[0,0]代表View的左上角,[0.5,0.5]代表View的中心,[1.0,1.0]代表View的右下角,使用没有单位的值可以将代码用于3D定位视图(使用米)和CylindricalPanel中的视图(使用像素)

onInput

这个事件可以捕获所有交互事件:键盘,鼠标,触摸和手柄,通过检查type字段可以进一步过滤进入onInput的事件,字段可以是下面的一个,MouseInputEventKeyboardInputEventTouchInputEventGamepadInputEvent。自定义输入系统也可以指定自己的唯一标识符。如VrButtononClick处理程序会过滤事件以捕获每个输入通道的主按钮。

光标系统

光标是以光线发射来实现的,源于空间的一点,以不可见的光线发射到场景中,直到和有onEnteronExitonMove事件的View或者mesh相遇。如果交互状态改变了,一个时间就会发送到React应用的View上。应用一次可以使用任意数量的光标,返回值的第一个实现将在每个帧上设置光标位置。


在盒子之外,React VR会附带一个光标,允许用户用鼠标和触摸和应用程序交互。默认初始化应用不需要任何光标,因为VR头盔的用户有一些列的输入设备,但是我们已经实现了很简单的自己的光线发射器,并且提供了与3DOF或6DOF控制器配合使用的射线播放器的示例。


光线发射器需要实现3个方法,getTypegetRayOriginygetType返回一个唯一的光线发射器字符串标识符,程序可以为特定的光标提供特殊处理。用每一帧都会调用这两个方法来组合射线并计算焦点。getRayOrigin()返回一个表示相对于相机的光线原点的3D位置的3个元素的数组。getRayDirection()返回一个表示相对于摄像机方向的光线向量方向的3个元素的数组。当前的camera对象就会传递到每一个方法中。如默认的鼠标raycaster返回[0,0,0]固定原点,并通过计算从屏幕上的原点到鼠标坐标的向量来计算光线的方向。raycaster也可以返回null,这将推迟光标计算到下一个raycaster


光线发射器也可以实现下面的2个方法,framedrawsCursorframe()如果实现的话,程序的每一帧都会调用,可以更新3D场景中位置控制器的virtual representations,drawsCursor返回一个布尔值,用于确定此raycaster是否应该绘制可见光标。


可以通过在client.js文件中的VRInstance提供raycasters选项来确定你的应用程序使用哪个raycasters。重要的是应该指向一系列的raycaster实例。

可见光标

    raycaster实现可以确定是否在您的场景中绘制可见光标。可见光标对您的用户来说有助于确定他们的互动地点。我们提供了一个标准的应用程序级别的光标,跟踪交互发生的位置。

cursorVisibility 在初始化的时间设置,值可以为以下几个值:

·  hidden 光标不可见,默认是不可见的;
·  visible 光标可见
·  auto这个可见性是由 React VR的每一帧计算出来的,有输入事件的组件光标是可见,如绑定了
    事件的<VrButton>或者<View>

这些设置是在初始化的时间就定义好的,第一次定义是在 index.html 里面, ReactVR.init() 有第

三个可选的参数:

<!-- vr/index.html -->

<script>

ReactVR.init(

  '../index.vr.bundle?platform=vr',

  document.body,

  // third argument is a map of initialization options

  {

    cursorVisibility: 'visible',

  }

);

</script>

    如果你想让这些配置也编译到你的应用里面,你可以在 vr/client.js 里面设置,这些配置就是

VRInstace 的最后一个参数:

// vr/client.js


const vr = new VRInstance(bundle, 'YourProject', parent, {

  // Custom initialization options go here

  cusorVisibility: 'visible',


  ...options,

});

Example

下面的代码就是当用户注视或者鼠标移到这个组件时,组件就会改变颜色

class ColorChange extends React.Component {

  constructor() {

    super();


    this.state = {textColor: 'white'};

  }


  render() {

    return (

      <Text

        style={{color: this.state.textColor}}

        onEnter={() => this.setState({textColor: 'red'})}

        onExit={() => this.setState({textColor: 'white'})}>

        This text will turn red when you look at it.

      </Text>

    );

  }

}