Draw Threejs TextGeometry вдоль пути

Question

У меня есть модель и хочу обложку с текстом. Я визуализировал и сгибал TextGeometry, но сложно объединить эти две ячейки. (Аnd да, я попытался динамические текстуры, таким образом, запрещает использование собственных шрифтов)

scrinshot of existing model

Возможно, есть другой способ сделать текст по пути?

Answer 1

Как вы хотите покрыть его текстом, почему бы не использовать текстуры.

Вы можете установить его из картины с THREE.TextureLoader() или вы можете сделать свой собственный на холсте и применить его к текстуре с var texture = new THREE.Texture(canvas);

Для exmaple:

var texture = new THREE.Texture(canvas); 
texture.repeat.set(5, 1); 
texture.needsUpdate = true; 

См jsfiddle пример.

Там вы можете раскомментировать эти строки

//texture.wrapS = THREE.RepeatWrapping; 
//texture.wrapT = THREE.RepeatWrapping; 

и посмотреть, как изменится результат.

UPD. Я обновил скрипку. Используется трюк с WebFontLoader (от this SO)

WebFontConfig = { 
    google: {families: ['Monoton']}, 
    active: function() { 
    init(); 
    animate(); 
    }, 
}; 

(function(){ 
    var wf = document.createElement("script"); 
    wf.src = 'https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.26/webfontloader.js'; 
    wf.async = 'true'; 
    document.head.appendChild(wf); 
})();