Back to Demos

This demo shows how you can use the font file and create text shape.

Clara.io demo resources:

Visit Base Scene


var baseSceneId = 'cc08b884-413b-46fc-a848-7a530bb236d4';
var typeSelect = document.getElementById('type');
var textShapeId = null;

var api = claraplayer('player');
api.sceneIO.fetchAndUse(baseSceneId).then(function() {
  textShapeId = api.scene.find({ name: 'TextShape' });
  var fonts = api.scene.filter({ type: 'Font' });
  console.log('>.', fonts);

  for (var i = 0; i < fonts.length; i++) {
    var name = api.scene.get({ id: fonts[i], property: 'name' });
    typeSelect.options[i] = new Option(name, fonts[i]);
  }
  typeSelect.onchange = selectHandler;
  document
    .getElementById('baseScene')
    .setAttribute('href', 'https://clara.io/view/' + baseSceneId);
  var textPM = api.scene.find({ name: 'TextPolyMesh' });
  document.getElementById('TextShape').onclick = function() {
    api.scene.set(
      { id: textPM, plug: 'Properties', property: 'visible' },
      false
    );
  };
  document.getElementById('TextPolyMesh').onclick = function() {
    api.scene.set(
      { id: textPM, plug: 'Properties', property: 'visible' },
      true
    );
  };
});

function selectHandler() {
  var value = typeSelect.options[typeSelect.selectedIndex].value;
  api.scene.set({ id: textShapeId, plug: 'Shape', property: 'font' }, value);
}