fisceToyBoxSample:textMesh

mySketch
xxxxxxxxxx
 
// fisceToyBox.
// https://github.com/inaridarkfox4231/fisceToyBox
// code: https://inaridarkfox4231.github.io/fisceToyBox/fisceToyBox.js
// Qiita:https://qiita.com/inaba_darkfox/items/db7c629814a1d14cd79e
​
// じゃあテキストメッシュのサンプルおいておくか
let font;
let geom;
function preload() {
  font = loadFont('https://inaridarkfox4231.github.io/assets/KosugiMaru-Regular.ttf');
}
function setup() {
  createCanvas(windowWidth,windowHeight, WEBGL);
  // テキストメッシュを取得
  // まずテキストパスのサイクル集合を取得
  const cycles = fisceToyBox.getTextContours({
    font:font, targetText:"ABC", textScale:240
  });
  // これを加工してテッセレーションなどをしやすくする処理
  const result = fisceToyBox.cyclesToCycles(cycles);
  // ここから板を作る。今回は厚さ5で。
  geom = fisceToyBox.createBoardMeshFromCycles({result:result, thick:5});
  // あとはmodelで書くだけ
​
  const objFile = createObjFile(geom);
  // これでsaveできる。
  //saveTextData(objFile, "myABC_new", "obj");
​
  // さっき見たけど法線0になってるとこあるね....
  // そのうち修正しますかね。
​
  // そうです。saveObjで保存できます：https://p5js.org/reference/p5.Geometry/saveObj/
  // 参考：https://github.com/processing/p5.js/pull/6812
  // 異なる点は
  // こっちではFloat32化していないこと（おそらく）
  // あとコメントは無いですね。そんくらい。UVとかも放り込めるようです。
  // まあp5サイドでUV決める価値があるかどうかって話ではあるけども。
  // blenderみたいにアジの開きにできないし。
}
​
function draw() {
  background(0);
  fill(255);
  orbitControl();
  lights();
  model(geom);
}
​
// reference:https://techblog.kayac.com/export-unity-mesh-as-obj
function createObjFile(g){
  const vArray = new Float32Array(g.vertices.length*3);
  const nArray = new Float32Array(g.vertexNormals.length*3);
  for(let k=0; k<g.vertices.length; k++){
    const v = g.vertices[k];
    vArray[3*k] = v.x;
    vArray[3*k+1] = v.y;
    vArray[3*k+2] = v.z;
  }
  for(let k=0; k<g.vertexNormals.length; k++){
    const n = g.vertexNormals[k];
    nArray[3*k] = n.x;
    nArray[3*k+1] = n.y;
    nArray[3*k+2] = n.z;
  }
​
  let result = `# vertice data (${g.vertices.length} vertices)\n`;
  for(let k=0; k<g.vertices.length; k++){
    result += `v ${vArray[3*k]} ${vArray[3*k+1]} ${vArray[3*k+2]} \n`;
  }
result += "# normal data\n";
  for(let k=0; k<g.vertexNormals.length; k++){
    result += `vn ${nArray[3*k]} ${nArray[3*k+1]} ${nArray[3*k+2]} \n`;
  }
  result += `# faces data (${g.faces.length} faces)\n`;
  for(let k=0; k<g.faces.length; k++){
    const f = g.faces[k];
    result += `f ${1+f[0]}//${1+f[0]} ${1+f[1]}//${1+f[1]} ${1+f[2]}//${1+f[2]} \n`;
  }
  return result;
}
​
// postFixを"obj"にするとobjファイルとして保存される
function saveTextData(data, name, postFix = "txt"){
  const fileName = name.concat(".").concat(postFix);
​
  // HTMLのリンク要素を生成する。
  const link = document.createElement("a");
​
  // リンク先にJSON形式の文字列データを置いておく。
  link.href = "data:text/plain," + encodeURIComponent(data);
​
  // 保存するJSONファイルの名前をリンクに設定する。
  link.download = fileName;
​
  // ファイルを保存する。
  link.click();
​
  link.remove();
}