关于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上搜索找到。

WebGL如何解决中文文字载入的更多相关文章

  1. java web 中有效解决中文乱码问题-pageEncoding与charset区别, response和request的setCharacterEncoding 区别

    这里先写几个大家容易搞混的编码设置代码: 在jsp代码中的头部往往有这两行代码 pageEncoding是jsp文件本身的编码contentType的charset是指服务器发送给客户端时的内容编码J ...

  2. jpgraph 折线图--解决中文乱码的问题(标题和图例)

    在jpgraph根目录中: 如Jpg\jpgraph_ttf.inc.php 中开头添加 define('CHINESE_TTF_FONT','SIMYOU.TTF'); \Jpg\jpgraph_l ...

  3. cmder 常用配置(包括默认管理员运行和解决中文乱码)

    简介 cmder是一个增强型命令行工具,不仅可以使用windows下的所有命令,更爽的是可以使用linux的命令,shell命令. 下载 官网地址:http://cmder.net/ 下载的时候,会有 ...

  4. jquery插件导出excel和pdf(解决中文乱码问题)

    参考文件:http://jackyrong.iteye.com/blog/2169683 https://my.oschina.net/aruan/blog/418980 https://segmen ...

  5. qt creator修改程序编码(解决中文乱码问题)的方法

    qt creator修改程序编码(解决中文乱码问题)的方法 qt creator修改程序编码的功能有几处. 1.edit - select encoding 选择载入(显示)编码和储存编码,其中GB2 ...

  6. 【Python】模块学习之matplotlib柱状图、饼状图、动态图及解决中文显示问题

    前言 众所周知,通过数据绘图,我们可以将枯燥的数字转换成容易被人们接受的图表,从而让人留下更加深刻的印象.而大多数编程语言都有自己的绘图工具,matplotlib就是基于Python的绘图工具包,使用 ...

  7. (数据科学学习手札87)利用adjustText解决matplotlib文字标签遮挡问题

    本文示例代码.数据已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 在进行数据可视化时我们常常需要在可视化作品 ...

  8. request/response解决中文乱码!!!

    Request中文乱码问题以及解决方案 补充三个知识点: Get是URL解码方式.默认解码格式是Tomcat编码格式.所以URL解码是UTF-8,覆盖掉了request容器解码格式 Post是实体内容 ...

  9. 增加UBUNTU字符集 解决中文乱码问题

    对GBK,GB2312,GB18030字符集的支持是UBUNTU中文乱码的罪魁祸首,其实我们可以在保持UTF-8为默认编码的条件下添加对这几个编码的支持,以解决中文乱码问题. 我想这个问题肯定有其他人 ...

随机推荐

  1. AX2012单元格显示颜色 displayOption

    public void displayOption(HV_WMSLocationStatusHistory _record, FormRowDisplayOption _options){    #d ...

  2. 安装Nvidia k80驱动步骤

    安装Nvidia k80驱动步骤 ------------------ 环境介绍: CentOS6 远程终端使用Xshell -------------------- 安装Nvidia k80驱动步骤 ...

  3. css 分享之background-attachment 属性

    微分享才发现的css背景图达到的效果代码属性: background-attachment -- 定义背景图片随滚动轴的移动方式: 值 描述 scroll 默认值.背景图像会随着页面其余部分的滚动而移 ...

  4. 【基本技能篇】>>第2篇《如何把事情做到最好——心得》

    如何把事情做到最好——全美第一本系统阐述学习与成功之道的经典著作. ——2016年2月12日 四个阅读层次:①基础阅读,具有基本阅读的能力,包括认识字,懂得词,知会句子的基本意思等.②检视阅读(也是判 ...

  5. F2工作流引擎参与者类型成员的交、并、互拆计算规则

          计算描述:计算规则指的是和其它“参与者类型成员”的之间的计算,必须求解处理人不为空的情况下才进行规则计算,各个“参与者类型成员”按序号顺序执行. 计算算法:并集(权重最低),交集(权重中) ...

  6. git push命令

    git push命令用于将本地分支的更新,推送到远程主机.它的格式与git pull命令相仿. $ git push <远程主机名> <本地分支名>:<远程分支名> ...

  7. mongodb-索引

    说明:创建索引时,列名:int 中的int数字指的是正序或者倒序,如果是1表明是正序,-1表示倒序 1.查询collection上的索引 db.users.getIndexes() 2.查询当前的db ...

  8. CSS基础3

    1.变形样式 transform : none | <transform-function>,改变元素的大小,透明,旋转角度,扭曲度等.<transform-function> ...

  9. CodeForces #362 div2 B. Barnicle

    题目链接: B. Barnicle 题意:给出科学计数法 转化成十进制的整数或小数 并输出. 思路:暑假训练赛见过了,当时大腿A掉了,并表示是道水题. 刷CF再次遇见,毫不留情WA了几次.比如: 0. ...

  10. Phonegap中自定义插件的使用

    在phonegap中需要实现特定相关的功能,可能需要自定义扩展一下功能,那么扩展phonegap组件就成为了可能. 源代码结构图: 本文目的在于讲述怎么扩展一个phonegap组件以及实现. 针对ph ...