0

3D モデルで時計をカスタマイズする必要がある POC に取り組んでいます。私は、webgl を行うために thee.js を使用しています。ストラップの色、ダイヤルの色を変更し、ストラップにテクスチャ イメージをロードすることができました。しかし、時計に動的テキストを追加しようとすると行き詰まります。ユーザーが Engrave Text text box に入力すると、時計のバックダイヤルのテキストを更新する必要があります。このために、新しいジオメトリで動作するhttps://github.com/jeromeetienne/threex.dynamictextureライブラリを試しましたが、時計の既存のモデルを追加できません。

すべてのコードを github にプッシュしました: https://github.com/bhupendra1011/watch-3d-engrave、私のフィドル アカウント {CORS issue} から外部 3d モデルを読み込むことができませんでした。POC のデモはここで見ることができます: https://bhupendra1011.github.io/watch-3d-engrave/index.html

以下は、時計の文字盤にテキストを追加するコードです。テキストを読み込むには、index.html の use textures テキストボックスをクリックします

   function engraveTextOnWatch(val = "IWC") {
  dynamicTexture = new THREEx.DynamicTexture(512, 512);
  dynamicTexture.context.font = "bolder 90px Verdana";

  // watch back dial geometry & material where text needs to be engraved
  var backDialGeometry = object3d.children[1].children[0].children[0].geometry;
  var backDialMaterial = object3d.children[1].children[0].children[0].material;

  // geometry to add dynamic text
  var geometry = new THREE.CubeGeometry(1, 1, 1);
  var material = new THREE.MeshBasicMaterial({
    map: dynamicTexture.texture
  });
  var mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh); // adding mesh to scene , but this needs to be attache to watch's back dial geomtry
  /* tried adding dynamicTexture to watch back dial material, but this is not working , text not appearing */
  //backDialMaterial.map = dynamicTexture.texture;

  dynamicTexture.texture.needsUpdate = true;
  dynamicTexture.drawText(val, 2, 256, "orange");
}

既存のモデルに動的テキストを追加する方法を教えてください。ありがとう。

4

1 に答える 1