Three.js |无法将动态文本几何添加到3d网格

Question

我正在制作POC，我必须在3D模型中自定义手表。 我正在使用the.e.js来做webgl的事情。我能够改变表带的颜色，表盘颜色并在表带上加载纹理图像。但是当我尝试在手表上添加动态文本时，我感到困惑，我必须在手表的后拨盘上更新文本，作为Engrave Text文本框中的用户类型。为此，我尝试了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

中的使用纹理文本框

   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");
}

请告诉我如何在现有模型上添加动态文本。 谢谢。

Answer 1

我能够在Blender中重现您的问题，它来自您模型的UV地图。

我下载了你的模型，在Three.js编辑器中打开它并将其转换为.obj，在blender中打开它以重现你的问题

正如您在图像上看到的那样，应用纹理同样混乱。您需要重新修改模型的uvmap以达到所需的效果（我使用了文件夹中的随机图像）

当你处于它的时候，你可能想考虑优化你的模型，这是非常沉重的，可以简化为更快的负载而不会失去视觉质量（但这完全取决于你，我只是建议）。

这是当前的模型 这是一个快速的替代品。在一端打开并在边缘环{2}上倾斜的圆柱体