Загрузка шрифта в Three.Js

Вчера я решил, что использую немного свободного времени, чтобы побаловаться с three.js и WebGl. Поскольку я был новичком в обеих технологиях, я, как и все, первым делом обратился в Google.

Проделав свой путь через вводный пример и несколько руководств, я решил, что пришло время разветвляться самостоятельно и попробовать простой проект. Моя цель состояла в том, чтобы отобразить мое имя на холсте html в трехмерном формате и иметь возможность вращать его, щелкая и перетаскивая. Ничего особенного, но ничего не зная о библиотеке, это оказалось проблемой.

Three предоставляет функцию TextGeometry для визуализации трехмерного текста с использованием шрифта, совместимого с Three. Многие примеры шрифтов поставляются вместе с библиотекой, когда она загружается, и их можно использовать для работы. Я создал проект базового узла с помощью webpack-dev-server и Three, установленных через npm. Поскольку об этом не упоминалось в документации, я решил, что было бы неплохо просто включить шрифт в мой файл main.js таким образом.

var THREE = require('three');
var font  = require('../helvetiker_regular.typeface.js');

Следуя документам TextGeometry, я создал новый объект TextGeometry, объединил его с материалом и отрендерил его в своей сцене.

var textMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00});
var textGeometry = new THREE.TextGeometry("Patrick Sullivan", {
    font: font,
    size: 40,
    height: 15
});
var textMesh = new THREE.Mesh(textGeometry, textMaterial);
scene.add(textMesh);

Я запустил свой сервер webpack, перешел на свою корневую страницу и ничего не увидел, кроме черного экрана. Направляясь к консоли, я столкнулся с ошибкой о том, что мой шрифт не определен. Оказывается, что в Three вам теперь нужно вручную загружать шрифты с помощью недокументированной функции FontLoader. Это изменило мой процесс загрузки шрифтов, чтобы он выглядел так.

var THREE = require('three');
var fontLoader = new THREE.FontLoader();
fontLoader.load('../somefont.typeface.js', function(font) {
// .. set up the scene, render canvas to dom and position camera.
var textMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00});
var textGeometry = new THREE.TextGeometry("Patrick Sullivan", {
    font: font,
    size: 40,
    height: 15
});
var textMesh = new THREE.Mesh(textGeometry, textMaterial);
scene.add(textMesh);
// .. functions for click and drag rotation.
});

При загрузке шрифта я смог увидеть, как мое имя отображается на странице, и оставалось только следовать вместе с документацией, чтобы получить остальную функциональность.

Этот опыт действительно выявил необходимость в надлежащей и полной документации для библиотек кода. Мне пришлось наткнуться на суть на github, демонстрирующую загрузку современных шрифтов в Three, прежде чем я даже познакомился с функцией FontLoader, а в официальной документации о ней нет упоминания. Однако это не должно плохо отразиться на участниках, работающих над тремя, но на самом деле мы как сообщество с открытым исходным кодом, мы несем ответственность за предоставление не только кода, но и четкой документации, которая будет сопровождать его, и если это не так » не существует, чтобы взять на себя его создание.