How can I use utf-8 in react vr?

Question

Does React VR support utf-8?

Example:

export default class vrhw extends React.Component {
  render() {
    return (
      <View>
        <Pano source={asset('chess-world.jpg')}/>
        <Text
          style={{
            backgroundColor: '#777879',
            fontSize: 0.8,
            fontWeight: '400',
            layoutOrigin: [0.5, 0.5],
            paddingLeft: 0.2,
            paddingRight: 0.2,
            textAlign: 'center',
            textAlignVertical: 'center',
            transform: [{translate: [0, 0, -3]}],
          }}>
          黎跃春
        </Text>
      </View>
    );
  }
};

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

Try it and you will see. – H. Pauwelyn May 13 '17 at 14:00 — H. Pauwelyn, May 13 '17 at 14:00

score 0 · Answer 1 · answered Jul 01 '17 at 16:22

By default ReactVR only supports Roman and Cyrillic characters, for any other type of characters you'll have to load in custom fonts. Luckily, there are already premade fonts in the official repo, they're just not published as part of the npm package. You'll have to manually copy the fonts from here into your project (let's say under /fonts).

For Japanese it's simpler since you only need to load in one font. Just use loadFont method from OVRUI, point it to your font files, and pass the result to your VRInstance when creating it.

// vr/client.js
import {VRInstance} from 'react-vr-web';
import * as OVRUI from 'ovrui';

// Store the default font, we'll extend it with Japanese support.
const font = OVRUI.loadFont();

function init(bundle, parent, options) {
  OVRUI.loadFont('../fonts/japanese.fnt', '../fonts/japanese.png').then((fallbackFont) => {
    OVRUI.addFontFallback(font, fallbackFont);

    const vr = new VRInstance(bundle, 'VRTEST', parent, {
      font: font,
      ...options,
    });

    vr.render = function() {};
    vr.start();
  });
}

window.ReactVR = {init};

For Chinese you need to load in three character sets. Since loadFont is anync, we need to keep track of how many fonts are loaded and only initialize the VRInstance when they're all ready.

// vr/client.js
import {VRInstance} from 'react-vr-web';
import * as OVRUI from 'ovrui';

const fallbackFonts = [{
  fnt: '../fonts/cjk_0.fnt',
  png: '../fonts/cjk_0_sdf.png'
}, {
  fnt: '../fonts/cjk_1.fnt',
  png: '../fonts/cjk_1_sdf.png'
}, {
  fnt: '../fonts/cjk_2.fnt',
  png: '../fonts/cjk_2_sdf.png'
}];

const font = OVRUI.loadFont();

function init(bundle, parent, options) {
  let count = 0;

  fallbackFonts.forEach((fontPaths) => {
    count += 1;

    OVRUI.loadFont(fontPaths.fnt, fontPaths.png).then((fallbackFont) => {
      OVRUI.addFontFallback(font, fallbackFont);
      count -= 1;

      if (count === 0) {
        const vr = new VRInstance(bundle, 'VRTEST', parent, {
          font: font,
          ...options,
        });

        vr.render = function() {};
        vr.start();
      }
    });
  });
}

window.ReactVR = {init};

Resources used:

How can I use utf-8 in react vr?

1 Answers1