easy-three
Eng日本語

create.text

create.text(text : String, props : Object) : Mesh

text - 表示するテキスト。
props - 設定オブジェクト。
  • fontSize (Number) : テキストのサイズ (デフォルト : 48)。
  • fontWeight (Number | String) : フォントのウェイト (デフォルト : "")。
  • font (String) : フォント (デフォルト : "'Noto Sans JP', sans-serif")。
  • color (String) : テキストの色 (デフォルト : "#000000")。
  • position (Array) : 位置 (デフォルト : [0, 0, 0])。
  • rotation (Array) : 回転 (デフォルト : [0, 0, 0])。
  • size (Array | Number) ジオメトリのサイズ (デフォルト : [1, 1])。
  • resolution (Number) : 解像度 (デフォルト : 1)。
  • textAlign (String) : テキストの水平方向の配置 (デフォルト : "center")。
  • textBaseline (String) : テキストの垂直方向の配置 (デフォルト : "middle")。
  • background (String | Boolean) : 背景色 (デフォルト : false)。
  • material (String) : マテリアルの種類 (デフォルト : "Basic")。
  • side (String) : テキストの表示面 (デフォルト : "DoubleSide")。
  • guide (Number) : ガイドラインの幅 (デフォルト : 0)。
  • guideColor (String) : ガイドラインの色 (デフォルト : "#ff0000")。
  • autoAdd (Boolean) : 自動でシーンに追加 (デフォルト : true)。

テキストを作成してシーンに追加します。
日本語のテキストも利用できます。

通常の Three.js の TextGeometry とは異なり、 透明の平面に対してテキストを描画したテクスチャを貼り付けることで実現しています。
そのため、テキストが平面のサイズ (size) を超える場合はテキストが見切れます。

テキストを描画したテクスチャについては create.textTexture を用いて作成しています。

平面のサイズについては、ガイドラインの幅 (guide) に0より大きな値を指定することや、 背景色 (background) を指定することで確認できます。

動的な変更

  • setText
  • setFontSize
  • setColor
  • setBackground
  • setGuide
  • setGuideColor

の各メソッドで、テキストの内容やフォントサイズ、色、背景色、ガイドラインの有無や色を動的に変更できます。

変更できるのは、テキストのテクスチャに関するプロパティのみで、平面のサイズ (size) や位置 (position)、回転 (rotation) などのプロパティは変更できません。

コードの例

テキストの作成

const { camera, create, animate } = init()
camera.position.set(0, 0, 3)

const text = create.text("easy-three", {
  size: [3, 1]
})

animate(({ delta }) => {
  text.rotation.x += delta
  text.rotation.y += delta
})

ガイドと背景色の設定

const { camera, create, animate } = init()
camera.position.set(0, 0, 3)

const text = create.text("easy-three", {
  size: [3, 1],
  guide: 4,
  background: "#66ff66"
})

animate(({ delta }) => {
  text.rotation.x += delta
  text.rotation.y += delta
})

動的な変更の例

const { camera, create, animate } = init();
camera.position.set(0, 0, 3);

const text = create.text("easy-three", {
  size: [3, 1],
  font: noto.style.fontFamily,
});

animate(({ delta, frameCount }) => {
  text.rotation.x += delta;
  text.rotation.y += delta;
  if (frameCount % 60 === 0) {
    text.setFontSize(80)
    text.setText(frameCount / 60);
  }
});