Three.js |Невозможно добавить динамическую текстовую геометрию к 3d сетке - PullRequest
Новая
       75

Three.js |Невозможно добавить динамическую текстовую геометрию к 3d сетке

0 голосов
/ 01 июня 2018

Я работаю над POC, в котором мне нужно настроить часы в 3d модели.Я использую thee.js для работы с webgl.Мне удалось изменить цвет ремешка, набрать цвет и загрузить изображения текстуры на ремешке.Но я застреваю, когда я пытаюсь добавить динамический текст на часы, я должен обновить текст на заднем циферблате часов, когда пользователь вводит текст в поле «Выгравировать текст».Для этого я попробовал библиотеку https://github.com/jeromeetienne/threex.dynamictexture, которая работает с новой геометрией, но я не могу добавить ее в существующую модель часов.

Я вставил весь код в github: https://github.com/bhupendra1011/watch-3d-engrave, поскольку мне не удалось загрузить внешние 3d-модели из моей учетной записи Fiddle {CORS issue}.Демонстрацию 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");
}

Пожалуйста, дайте мне знать, как я могу добавить динамический текст в существующую модель.Благодарю.

1 Ответ

0 голосов
/ 04 июня 2018

Мне удалось воспроизвести вашу проблему в Blender, и она появилась на УФ-карте вашей модели.

Я скачал вашу модель, открыл ее в редакторе Three.js и преобразовал в .obj, чтобы открыть ее в Blender.чтобы воспроизвести вашу проблему reproduce your problem

Как вы можете видеть на изображении, применение текстуры так же грязно.Вам нужно переделать uvmap модели, чтобы добиться желаемого эффекта следующим образом (я использовал случайное изображение из вашей папки) the desired effect like so (I used a random image from your folder

И пока вы в этом, вы можете захотетьрассмотреть вопрос об оптимизации вашей модели, которая довольно тяжелая и может быть упрощена для более быстрой загрузки без потери качества изображения (но я полагаю, это зависит только от вас).

Вот текущая модель could be simplified Вот быстрая возможная замена.Цилиндр, открытый на одном конце и скошенный на краевой петле simplified obj

...