devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ThreeJS中文字体乱码问题_threejs 中文字体

作者：Cpp五条 | 2024-05-01 20:17:32

赞

踩

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中就可以了，再给字体附上属性，就可以展现中文汉字了

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

5、整个程序的源码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>中文汉字</title>
  6.     <script type="text/javascript" src="js/jquery-3.0.0.js"></script>
  7.     <script src="js/three.min.r87.js"></script>
  8.     <script type="text/javascript" src="js/CanvasRenderer.js"></script>
  9.     <script type="text/javascript" src="js/Projector.js"></script>
  10.     <script type="text/javascript" src="js/OrbitControls.js"></script>
  11.     <script type="text/javascript" src="js/Stats.js"></script>
  12.  
  13.     <style type="text/css">
  14.         *{
  15.             padding:0px;margin: 0px
  16.         }
  17.         #container{
  18.             width: 100%;
  19.             height: 100vh;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24. <div id="container"></div>
  25.  <script type="text/javascript">
  26.      var renderer,scene,camera,controls;
  27.  
  28.      function initRenderer(){
  29.          renderer = new THREE.WebGLRenderer( { antialias: true } );
  30.          var width = document.getElementById("container").clientWidth;
  31.          var height = document.getElementById("container").clientHeight;
  32.          renderer.setSize(width,height);
  33.          renderer.setClearColor(0xffffff);
  34.  
  35.          document.getElementById("container").appendChild(renderer.domElement);
  36.  
  37.      }
  38.  
  39.      function initScene(){
  40.          scene = new THREE.Scene();
  41.          scene.fog = new THREE.Fog( 0x000000, 0, 3000 );
  42.      }
  43.  
  44.      function initCamera(){
  45.          var width = document.getElementById("container").clientWidth;
  46.          var height = document.getElementById("container").clientHeight;
  47.          camera = new THREE.PerspectiveCamera(30, width/height,1, 10000);
  48.          camera.position.y=800/Math.tan(Math.PI/2.5);
  49.          camera.position.z=800;
  50.      }
  51.  
  52.      function initLight(){
  53.          var pointLight = new THREE.PointLight( 0xffffff, 1);
  54.          pointLight.position.set( 0, 100, 100 );
  55.          scene.add( pointLight );
  56.  
  57.          var pointLight = new THREE.PointLight( 0xffffff, 1);
  58.          pointLight.position.set( 0, 100, -100 );
  59.          scene.add( pointLight );
  60.      }
  61.      function initText(){
  62.          var loader = new THREE.FontLoader();
  63.          loader.load('font/FZLanTingHeiS-UL-GB_Regular.json',function(response){
  64.                  var font = response;
  65.                  
  66.                  var textGeometry = new THREE.TextGeometry("学习Three.js",{
  67.                      "font" : font,
  68.                      "size" : 70,
  69.                      "height" : 20,
  70.                      "bevelEnabled" : true,
  71.                      "bevelSize": 2
  72.                  })
  73.  
  74.                  text = new THREE.Mesh(textGeometry,new THREE.MultiMaterial( [
  75.                      new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading } ),
  76.                      new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.SmoothShading } )
  77.                  ] ))
  78.  
  79.                  textGeometry.computeBoundingBox();
  80.  
  81.                  var centerOffset = -0.5 * (textGeometry.boundingBox.max.x-textGeometry.boundingBox.min.x);
  82.                  text.position.x = centerOffset;
  83.                  text.position.y = 30;
  84.  
  85.                  scene.add(text);
  86.                  var plane = new THREE.Mesh(
  87.                      new THREE.PlaneBufferGeometry( 10000, 10000 ),
  88.                      new THREE.MeshBasicMaterial( { color: 0xfffffff, opacity: 0.5, transparent: true } )
  89.                  );
  90.                  plane.rotation.x = -Math.PI/2;
  91.                  plane.position.y = 0;
  92.                  scene.add(plane);
  93.              })
  94.  
  95.      }
  96. 	 
  97.      function initControls(){
  98.          controls = new THREE.OrbitControls(camera);
  99.          controls.enableZoom = true;
  100.          controls.minPolarAngle = Math.PI/2.5;
  101.          controls.maxPolarAngle = Math.PI/2.5;
  102.      }
  103.  
  104.      function render(){
  105.          renderer.render(scene, camera);
  106.          requestAnimationFrame(render);
  107.      }
  108.  
  109.      function start(){
  110.          initRenderer();
  111.          initScene();
  112.          initCamera();
  113.          initControls();
  114.          initLight();
  115.          initText();
  116.          render();
  117.      }
  118.  
  119.      start();
  120.  
  121.  
  122.  </script>
  123.  
  124. </body>
  125. </html>


声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/520548
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号