three.js解决中文乱码，终于解决了

最新推荐文章于 2024-06-22 15:46:01 发布

榆木脑袋敲啊敲

最新推荐文章于 2024-06-22 15:46:01 发布

阅读量6.6k

点赞数 1

分类专栏： three.js webGL dojo 文章标签：乱码经验

本文链接：https://blog.csdn.net/gaoqiff/article/details/62882269

版权

dojo 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

webGL

1 篇文章 0 订阅

订阅专栏

three.js

0 篇文章 0 订阅

订阅专栏

根据前人成功的经验，博主借鉴了一些，来解决中文乱码问题，。。但是解决的过程，会遇到很多奇怪的问题，以下是我得到的几点教训：

1.如果页面报错var loader = new THREE.FontLoader(); FontLoader..什么错误，我们就需要考虑在众多的three.js版本中，是不是选择的版本不对，博主这次用的的是60版本的；

2.<script src="js/controls/OrbitControls.js"></script> 引用的鼠标控制器也会报错，也有可能是版本选择问题；

3.我选择的是华文隶书<script src="fonts/STLiti_regular.typeface.js"></script>的类库，不支持繁体中文哦；

后面是文字加载的代码：

// add 3D text
var materialFront = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
var materialSide = new THREE.MeshBasicMaterial( { color: 0x000088 } );
var materialArray = [ materialFront, materialSide ];
var textGeom = new THREE.TextGeometry( '我涛好帅!',
{
size: 20, height: 2, weight: 'normal',curveSegments: 10,
font: "stliti", //字体类型的引用，一定要是小写的，要不就会爆错。。。。Cannot read property 'normal' of undefined(…)

style: "normal",
bevelThickness: 1, bevelSize: 2, bevelEnabled: true,
material: 0, extrudeMaterial: 1
});
// font: helvetiker, gentilis, droid sans, droid serif, optimer
// weight: normal, bold

var textMaterial = new THREE.MeshFaceMaterial(materialArray);
var textMesh = new THREE.Mesh(textGeom, textMaterial );

textGeom.computeBoundingBox();
var textWidth = textGeom.boundingBox.max.x - textGeom.boundingBox.min.x;

textMesh.position.set( 50, 100, 50 );
textMesh.rotation.x = -Math.PI / 4;
scene.add(textMesh);