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

Question

I am working on a POC in which I have to customize a watch in 3d model. I am using thee.js for doing webgl stuff. I was able to change strap color , dial color and load texture images on strap. But I am stuck when I try to add dynamic text on the the watch , I have to update text on watch's back dial as user types in Engrave Text text box . For this I tried https://github.com/jeromeetienne/threex.dynamictexture library , which works on a new geometry but I am not able to add it watch's existing model.

I have pushed all code in github : https://github.com/bhupendra1011/watch-3d-engrave , as I was not able to load external 3d models from my fiddle account {CORS issue}. Demo of the POC can be seen here : https://bhupendra1011.github.io/watch-3d-engrave/index.html

Below is the code to add text on watch dial; For loading text click on use textures textbox in 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");
}

Kindly let me know how can I add dynamic text on existing model. Thanks.

The process is pretty straightforward : draw your background texture on a separate canvas and draw your text on it as you would on any type of canvas. Then update your material.map property with a reference to the aforementionned canvas element and call the .needsUpdate flag on your material and voila — Console-buche, Jun 03 '18 at 13:58
@Hesha I have used https://github.com/jeromeetienne/threex.dynamictexture which does exactly same as u said .in fact I have tried same , used the dynamic generated texture as map of the material on which I need to add text . But it's not coming thru . If I apply text texture on a new geometry like cube / sphere , text gets rendered properly . I have pushed all code at https://github.com/bhupendra1011/watch-3d-engrave . Kindly let me know how can I achieve this . Thanks — Bhupendra, Jun 03 '18 at 14:33
I also tried using canvas to draw text and add to map of my material. But the problem is now coming in positioning of canvas onto material. Text is not coming on back side of watch but on the circumference. — Bhupendra, Jun 04 '18 at 07:08
I fear there's not much that can be done without more code... Must be coming from the way you're building your model I guess. Any chance you make a fiddle ? — Console-buche, Jun 04 '18 at 07:13
@Hesha I was not able to create fiddle bcoz 3d models don't load due to CORS , however I pushed my code https://github.com/bhupendra1011/watch-3d-engrave. Demo is available at : https://bhupendra1011.github.io/watch-3d-engrave/. when you click on use engraved text checkbox , canvas is created in js file and added to watch dial ,also for purpose of viewing I have added canvas to DOM as well. On watch's back dial , canvas is getting set on circumference, this is visible when you zoom the watch model. Text is being added via engraveTextOnWatch () in main.js. Any help would be appreciated. Thanks — Bhupendra, Jun 04 '18 at 08:49

Console-buche · Accepted Answer · 2018-06-04T09:36:06.407

1

I was able to reproduce your problem in Blender and it comes from your model's UV map.

I downloaded your model, opened it in Three.js editor and converted it to .obj to open it in blender to reproduve your problem

As you can see on the image, applying a texture is just as messy. You need to rework the model's uvmap to achieve the desired effect like so (I used a random image from your folder)

And while you're at it, you might want to consider optimizing your model, which is pretty heavy and could be simplified for faster load without losing visual quality (but it's entirely up to you, I'm just suggesting).

Here's the current model Here's a quick possible replacement. Cylinder that's open on one end and beveled on the edge loop

edited Jun 04 '18 at 09:36

answered Jun 04 '18 at 09:30

Console-buche

405
3
12

Thanks a lot @hesha . I downloaded one of the few free model from clara.io . Don't have enough knowledge of blender . could you please suggest where I can get 3d watch model { simpler } ? In which I can change strap color , dial , add text on dial , strap etc. Actually I was working on POC without having any background in 3d models. I was trying to achieve something similar to like : https://www.baumewatches.com/us/watch-configurator?bundleId=BMBC001090. Thanks again for your efforts . – Bhupendra Jun 04 '18 at 09:44
Well, your current model is fine as long as you're not adding image textures to it. If you are then you need to work on the UVs. If the only thing you need is to unwrap the back plate, I can do it for you and send you the model. Let's continue in private messages if you want. – Console-buche Jun 04 '18 at 09:48
Actually I need to customize it ,I have no prior knowledge of uvs so would not be able to modify it, thanks for you help , my gmail id : bhupendra1011@gmail.com , we can connect over there ... – Bhupendra Jun 04 '18 at 10:12

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

1 Answers1