Search code examples
webvrreact-360

How do you tile a texture across a surface in React VR?

I have a box 100m x 100m to act as a floor in a reactVR test I am working on, I'd like to add a texture to it but the tile texture just stretches over the entire surface rather than tile, as desired. Here is my component code, nothing special:

    <Box
      dimWidth={100}
      dimDepth={100}
      dimHeight={0.5}
      texture={asset('check_floor_tile.jpg')}
      style={{
        color:'#333333',
        transform: [{translate: [0, -1, 0]}]
      }}
      lit
    />

I've had a look for examples without success, any help would be appreciated. Thanks.

Solution

  • You can now tile a texture across a surface by using specifying repeat on the texture property of any component that extends BasicMesh (Box, Plane, Sphere, Cylinder, Model).

    The functionality has been added to Reach VR via this PR.

    <Plane
  texture={{
    ...asset('texture.jpg'),
    repeat: [4, 4],
  }}
/>