three.jstexture-mappingdynamic-text

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

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.

Solution

  • 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 reproduce 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) 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 could be simplified Here's a quick possible replacement. Cylinder that's open on one end and beveled on the edge loop simplified obj