ThreeJS中文字体乱码问题

这几天刚刚接触ThreeJS，使用几天发现ThreeJS中默认是不支持中文的，只能显示英文，在网上找了一些资料，终于可以显示中文了。在此把显示中文的方法写下来，供大家参考，本人只是小白，大神勿喷。。。

1、默认的threejs包中会带一些字体，在examples中里面有个font文件夹，里面是threejs自带的一些字体格式

font问价夹里面就是这样的，默认带的字体格式是不支持中文的

2、想要显示中文，就需要我们自己引入自己的中文包，将ttf的字体格式转换为json或js文件格式

ttf字体格式需要在哪里找呢，在计算机中C盘，windows->Fonts->里面存放的就是各种计算机的各种字体格式.ttf文件（不过需要找一个小一点的，太大编辑器打开会崩掉的，这里我使用的是方正兰亭超细黑简体）

3、将之前找到的字体.ttf文件转换成json文件格式或js文件格式，使用的线上工具是http://gero3.github.io/facetype.js/

4、将转换后json文件加载到threejs中就可以了，再给字体附上属性，就可以展现中文汉字了

var loader = new THREE.FontLoader();//加载字体库，加载成功后将字体库传给回调函数；loader.load('font/FZLanTingHeiS-UL-GB_Regular.json',function(response){var font = response;/*创建字体几何图形，其中TextGeometry的第一个参数是需要绘制的文本，第二个参数是一个json对象，设置如何绘制文本，具体意义为：font: 使用的字体库；size:绘制字体的大小；height:绘制文本的厚度；bevelEnabled：是否允许棱角平滑过渡；bevelSize:棱角平滑过渡的尺寸；*///注意:bevelSize通常要比size和height小一个量级，过渡带就会很饱满甚至比文本主体本身还要大var textGeometry = new THREE.TextGeometry("学习Three.js",{"font" : font,"size" : 70,"height" : 20,"bevelEnabled" : true,"bevelSize": 2})/*在3D世界里所有的物体都是由网格构成的，在three.js中，绘制图形的步骤是：先使用geometry定义图形的几何形状，然后使用几何形状和材质构建网格;*//*这里使用材质数组来对网格进行修饰，材质数组的第一项修饰文字正面和背面，第二项修饰文字的侧面即顶部和底部。使用的两个材质都是MeshPhongMaterial,这种材质的特点是能够像塑料一样反光。*/text = new THREE.Mesh(textGeometry,new THREE.MultiMaterial( [new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading } ),new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.SmoothShading } )] ))

5、整个程序的源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>中文汉字</title><script type="text/javascript" src="js/jquery-3.0.0.js"></script><script src="js/three.min.r87.js"></script><script type="text/javascript" src="js/CanvasRenderer.js"></script><script type="text/javascript" src="js/Projector.js"></script><script type="text/javascript" src="js/OrbitControls.js"></script><script type="text/javascript" src="js/Stats.js"></script><style type="text/css">*{padding:0px;margin: 0px}#container{width: 100%;height: 100vh;}</style>
</head>
<body>
<div id="container"></div><script type="text/javascript">var renderer,scene,camera,controls;function initRenderer(){renderer = new THREE.WebGLRenderer( { antialias: true } );var width = document.getElementById("container").clientWidth;var height = document.getElementById("container").clientHeight;renderer.setSize(width,height);renderer.setClearColor(0xffffff);document.getElementById("container").appendChild(renderer.domElement);}function initScene(){scene = new THREE.Scene();scene.fog = new THREE.Fog( 0x000000, 0, 3000 );}function initCamera(){var width = document.getElementById("container").clientWidth;var height = document.getElementById("container").clientHeight;camera = new THREE.PerspectiveCamera(30, width/height,1, 10000);camera.position.y=800/Math.tan(Math.PI/2.5);camera.position.z=800;}function initLight(){var pointLight = new THREE.PointLight( 0xffffff, 1);pointLight.position.set( 0, 100, 100 );scene.add( pointLight );var pointLight = new THREE.PointLight( 0xffffff, 1);pointLight.position.set( 0, 100, -100 );scene.add( pointLight );}function initText(){var loader = new THREE.FontLoader();loader.load('font/FZLanTingHeiS-UL-GB_Regular.json',function(response){var font = response;var textGeometry = new THREE.TextGeometry("学习Three.js",{"font" : font,"size" : 70,"height" : 20,"bevelEnabled" : true,"bevelSize": 2})text = new THREE.Mesh(textGeometry,new THREE.MultiMaterial( [new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading } ),new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.SmoothShading } )] ))textGeometry.computeBoundingBox();var centerOffset = -0.5 * (textGeometry.boundingBox.max.x-textGeometry.boundingBox.min.x);text.position.x = centerOffset;text.position.y = 30;scene.add(text);var plane = new THREE.Mesh(new THREE.PlaneBufferGeometry( 10000, 10000 ),new THREE.MeshBasicMaterial( { color: 0xfffffff, opacity: 0.5, transparent: true } ));plane.rotation.x = -Math.PI/2;plane.position.y = 0;scene.add(plane);})}function initControls(){controls = new THREE.OrbitControls(camera);controls.enableZoom = true;controls.minPolarAngle = Math.PI/2.5;controls.maxPolarAngle = Math.PI/2.5;}function render(){renderer.render(scene, camera);requestAnimationFrame(render);}function start(){initRenderer();initScene();initCamera();initControls();initLight();initText();render();}start();</script></body>
</html>

ThreeJS中文字体乱码问题相关推荐

Qt做发布版，解决声音和图片、中文字体乱码问题
Qt做发布版,解决声音和图片.中文字体乱码问题 2011-06-25 12:27 542人阅读评论(2) 收藏举报前些天做Qt发布版,发现居然不显示图片,后来才发现原来还有图片的库没加!找找吧, ...
Deepin系统下MATLAB中文字体乱码问题解决（加上字体美化）
Deepin系统下MATLAB中文字体乱码问题解决(加上字体美化) 参考文章: (1)Deepin系统下MATLAB中文字体乱码问题解决(加上字体美化) (2)https://www.cnblogs. ...
css中文字体乱码解决方案：
把css编码和html页面编码统一起来.如果html页面是utf-8.css.js也统一成utf-8编码.如果html页面是gb2312.css.js也统一成gb2312编码.UTF-8和GB2312 ...
KEIL5出现中文字体乱码
KEIL5出现中文字体乱码问题总结 1 编码格式问题进入设置更改编码格式为GB2312 2 系统语言设置导致的问题,最近使用软件发现这个问题出现次数还是蛮多的,比如QT软件要开启,keil5却需要关 ...
解决ubuntu下crossover中qq中文字体乱码问题
本文适应于ubuntu16.04,crossover16.2.0-1.(如使用qq推荐使用腾讯qq8.9-2,点击下方的安装windows软件,在输入框输入"qq"两字即可看到) ...
css汉字注释乱码,css font-family属性设置中文字体乱码
一般设置字体,个人都喜欢用中文,比如:font-family:"微软雅黑":但是偶尔会出现设置以后字体显示乱码的问题解决方法[1]: 看看你的CSS文件的第一行有没有:@char ...
linux crossover 乱码,解决ubuntu下crossover中qq中文字体乱码问题
本文适应于ubuntu16.04,crossover16.2.0-1.(如使用qq推荐使用腾讯qq8.9-2,点击下方的安装windows软件,在输入框输入"qq"两字即可看到) ...
解决问题，在pycharm中使用graphviz绘制决策树时，决策树图片中不显示中文(中文字体乱码！！) 图文并茂版！！！
解决问题问题信息问题代码问题分析解决问题注意问题信息 •我们在pycharm中使用graphviz绘制决策树时,可能会出现下述图片中中文字体乱码的问题: •参考网上修改各种配 ...
Matplotlib画图中文字体乱码设置
Matplotlib画图中文字体乱码设置 Matplotlib画图中文字体乱码设置一.字体基本设置二.其他字体: 三.展示一下: 四.运行结果: Matplotlib画图中文字体乱码设置一.字体 ...

ThreeJS中文字体乱码问题

ThreeJS中文字体乱码问题相关推荐

最新文章

热门文章