三维坐标、变换

大多数React的UI组件是根据layout布局自动放置的,这些layouts以向右为X正方向,Y向下,在其

他的语言中左上角(0,0),右下角(宽,高)。

在3D坐标中这些方向就要变化了,也就有了自己的坐标系

React VR 用的是 the OpenGL® 3D 坐标系

下面介绍3D坐标系:

React VR用的是右手OpenGL坐标系统:右手大拇指指向一个轴的正方向,其他手指弯曲的方向

就是正旋的方向。

不像在React里面的,Y轴向上为正,React是向下为正。

Z轴指向用户,默认用户站在原点的位置,也就是说朝着Z轴负方向望去。注意,要是开始就能看到

物体,需要把物体放在负距离的位置上如-3米。下面有一个而例子,通过transform属性做的转换,

后面再详细讨论转换这个话题。

<Text style={{ position: 'absolute', transform: [{translate: [0, 0, -6]}],

    layoutOrigin: [0.5, 0.5] }}

  fontSize={0.5} text='Office Lobby' />

单位

距离、长度单位都是米

旋转角度单位是度

变换

变化可以在3D空间内放置各式各样的组件,React VR把React的转换样式扩展到3D空间,下面是

我们的一个mesh例子的代码:

<Mesh style={{

  transform: [{translate: [0, -30, -300]},{ scale : 0.1 },

         {rotateY : this.state.rotation}, {rotateX : -90} ] }}

  source={{url:'./creature/', mesh:'creature.obj', mtl:'creature.mtl',

  lit: true}}

/>

转换在style内是以数组的形式存在的,而且执行的顺序是从最后一个到第一个,倒叙执行的:

style={{

  transform: [

    {rotateZ : this.state.rotation},

    {translate: [0, 2, 0]}

    { scale : 0.1 },

  ],

}}

上面例子中,scale先执行,其次是translate,最后是Z轴旋转;最终的结果是沿着Y轴移动了2米,

然后绕着Z轴旋转

下面的例子就和上面的完全不一样了:

style={{

  transform: [

    {translate: [0, 2, 0]}

    {rotateZ : this.state.rotation},

    { scale : 0.1 },

  ],

}}

这个是先绕着自己的原点旋转,然后在移动2米。

Transform属性

Transform属性是由一系列的键值对组成的:

transform: [

            {TRANSFORM_COMMAND: TRANSFORM_VALUE},

            ...

         ]

TRANSFORM_COMMAND 可以是下面的一个:

matrix :是16位数的一个数组

matrix 是最灵活的改变transforms的方式,也让开发者用自己的js模块接入React组件。

举个例子,下面的作用就是先所有轴都缩放0.01,然后在旋转[3,2,1],代码如下:

style={{

  transform: [

    {matrix: [0.01, 0, 0, 0, 0, 0.01, 0, 0, 0, 0, 0.01, 0, 3, 2, 0, 1]}

  ],

}}

rotateX: 绕着X轴旋转一定角度,默认的单位是度,如果要用弧度,需要加上rad单位,如-0.5rad

style={{

  transform: [

    {rotateX: 10}

  ],

}}

rotateY: 绕着Y轴旋转一定角度,默认的单位是度,如果要用弧度,需要加上rad单位,如-0.5rad

style={{

  transform: [

    {rotateY: 10}

  ],

}}

rotateZ: 绕着Z轴旋转一定角度,默认的单位是度,如果要用弧度,需要加上rad单位,如-0.5rad

style={{

  transform: [

    {rotateZ: 10}

  ],

}}

scale: 它的值可以是一个数字或者一个数组,如果是数字,xyz的值都会缩放。

style={{

  transform: [

    {scale: 10}

  ],

}}

    如果是数组,则长宽高会按不同的比例缩放

style={{

  transform: [

        {scale: [0.01, 0.02, 0.03]}

  ],

}}

translate: 它的值是一个数组,单位是米,会沿着xyz的轴移动不同的距离。

style={{

  transform: [

    {translate: 10}

  ],

}}

translateX: 只沿着X轴移动多少米。

style={{

  transform: [

    {translateX: 1}

  ],

}}

translateY: 只沿着Y轴移动多少米。

style={{

  transform: [

    {translateY: 1}

  ],

}}

translateZ: 只沿着Z轴移动多少米。

style={{

  transform: [

    {translateZ: 1}

  ],

}}