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

Question

我正在研究 POC，我必须在其中定制 3d 模型中的手表。我正在使用 thee.js 来做 webgl 的东西。我能够更改表带颜色、表盘颜色并在表带上加载纹理图像。但是当我尝试在手表上添加动态文本时我被卡住了，当用户在雕刻文本文本框中输入时，我必须更新手表后表盘上的文本。为此，我尝试了 https://github.com/jeromeetienne/threex.dynamictexture library ，它适用于新的几何体，但我无法将其添加到 watch 的现有模型中。

我已经推送了 github 中的所有代码：https://github.com/bhupendra1011/watch-3d-engrave，因为我无法从我的 fiddle 帐户加载外部 3d 模型{CORS 问题}。可以在这里看到 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 以在搅拌机中打开它以重现您的问题

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

当你在做的时候，你可能想考虑优化你的模型，它非常重，可以简化以在不损失视觉质量的情况下更快地加载（但这完全取决于你，我只是建议).

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

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

Three.js | Not able to add Dynamic Text Geometry to 3d mesh

texture-mapping

dynamic-text

three.js