easy-three
Eng日本語

create.textTexture

create.textTexture(text : String, props : Object) : Texture

text - 表示するテキスト。
props - 設定オブジェクト。
  • fontSize (Number) : テキストのサイズ (デフォルト : 48)。
  • fontWeight (Number | String) : フォントのウェイト (デフォルト : "")。
  • font (String) : フォント (デフォルト : "'Noto Sans JP', sans-serif")。
  • color (String) : テキストの色 (デフォルト : "#000000")。
  • size (Array) : テクスチャのサイズ (デフォルト : [500, 500])。
  • textAlign (String) : テキストの水平方向の配置 (デフォルト : "center")。
  • textBaseline (String) : テキストの垂直方向の配置 (デフォルト : "middle")。
  • background (String | Boolean) : 背景色 (デフォルト : false)。
  • guide (Number) : ガイドラインの幅 (デフォルト : 0)。
  • guideColor (String) : ガイドラインの色 (デフォルト : "#ff0000")。

テキストを元にテクスチャを作成します。

テキストが平面のサイズ (size) を超える場合はテキストが見切れます。

平面以外のオブジェクトにテキストを表示する場合に使用します。
単にテキストを表示したい場合は create.text を使用してください。

動的な変更

作成したテクスチャは、 set メソッドで textTexture の作成に必要なプロパティを全て変更することができます。

const texture = create.textTexture("easy-three");
texture.set({
  text: "hello",
  size: [400, 400],
  background: "#ff6666"
})

コードの例

テキストの作成

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

create.ambientLight()
create.directionalLight()

const texture = create.textTexture("easy-three", {
  size: [300, 300],
  background: "#66ff66"
})

const cube = create.cube({
  size: 1,
  position: [-1, 0, 0],
  option: {
    map: texture
  }
})

const sphere = create.sphere({
  size: 0.7,
  position: [1, 0, 0],
  option: {
    map: texture
  }
})

animate(({ delta }) => {
  cube.rotation.x += delta
  cube.rotation.y += delta
  sphere.rotation.x += delta
  sphere.rotation.y += delta * 0.7
})

ガイド、透過、表示面の設定

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

create.ambientLight()
create.directionalLight()

const texture = create.textTexture("easy-three", {
  size: [300, 300],
  guide: 8
})

const cube = create.cube({
  size: 1,
  option: {
    transparent: true,
    map: texture,
    side: THREE.DoubleSide
  }
})

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

テキストの更新

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

create.ambientLight();
create.directionalLight();

const texture = create.textTexture("easy-three", {
  size: [300, 300],
  font: noto.style.fontFamily,
  guide: 8,
});

const cube = create.cube({
  size: 1,
  option: {
    transparent: true,
    map: texture,
    side: THREE.DoubleSide,
  },
});

animate(({ delta, frameCount }) => {
  cube.rotation.x += delta;
  cube.rotation.y += delta;
  if (frameCount % 60 === 0) {
    texture.set({
      text: frameCount % 1000,
      fontSize: 100
    });
  }
});