关于WebGL载入中文字体问题,我在网上搜了一下,发现例子并不多,而且只能实现隶书的载入,不支持其他中文字体。
下面是实现的代码:
<script src="../js/three.min.js"></script>
<!-- load the font file from canvas-text -->
<script src="../Script/lisu_regular.typeface.js"></script>
<script>
var container, camera, scene, renderer;
var group, text;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 150, 500);
scene = new THREE.Scene();
// Get text from hash
var theText = "你好,文字!";
var hash = document.location.hash.substr(1);
if (hash.length !== 0) { theText = hash; }
var text3d = new THREE.TextGeometry(theText, {
size: 40,
height: 10,
curveSegments: 2,
font: "lisu"
});
text3d.computeBoundingBox();
text = new THREE.Mesh(text3d, new THREE.MeshBasicMaterial({ color: 0xFD7B01}));
text.position.set(-200,200, 0); text.rotation.y = Math.PI * 2;
group = new THREE.Object3D();
group.add(text);
scene.add(group);
renderer = new THREE.CanvasRenderer();
renderer.setClearColor(0xf0f0f0);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
</script>
核心代码也就几行,关键在于导入lisu_regular.typeface.js文件,可以在GitHub上搜索找到。