Текст с тенью врезке three.js

Question

Мне нужно создать текст с вставкой тень на мой объект в three.js, который выглядит следующим образом:

Нечто подобное кольцо с выгравированным текстом.

Answer 1

Я думаю, что более простой способ сделать это - использовать normal-map для гравировки, по крайней мере, если текст не должен быть динамическим (here's how you can export a normal-map from blender). И даже если это должно быть динамичным, может быть проще создать нормальную карту динамически на холсте, чем фактически создать геометрию для гравировки.

Другим вариантом было бы фактически создать геометрию, содержащую гравировку. Для этого вам может понадобиться посмотреть на библиотеку ThreeCSG, которая позволит вам использовать логические операторы в геометрии: вы создаете сетку 3D-текста, основы и выровняете ее с кривизной кольца и, наконец, вычитаете ее из кольцевой сетки. Это должно дать вам кольцо с выгравированной гравировкой.

На самом деле мне было любопытно, как это на самом деле будет работать и реализовано что-то очень похожее здесь: https://usefulthink.github.io/three-text-warp-csg/ (source here). В сущности, это с помощью ThreeCSG вычитать текст геометрию из цилиндра-геометрии, как так:

const textBSP = new ThreeBSP(textGeometry); 
const cylinderBSP = new ThreeBSP(cylinderGeometry);  
const resultGeometry = cylinderBSP.subtract(textBSP).toGeometry(); 

scene.add(new THREE.Mesh(resultGeometry, new THREE.MeshStandardMaterial()); 

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

Третий вариант заключается в использовании комбинации смещений и нормальных карт. Это было бы намного проще и быстрее в обработке, но вам нужно было бы добавить множество вершин, чтобы иметь вершины, где вы хотите, чтобы произошло смещение. Вот небольшой фрагмент кода mrdoob, который может помочь вам создать нормальную карту на основе смещения: http://mrdoob.com/lab/javascript/height2normal/