zoukankan      html  css  js  c++  java
  • WebGL如何解决中文文字载入

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

  • 相关阅读:
    advanceInstaller安装文件的ICON
    advanceInstaller制作中文安装界面
    vc对话框程序运行时隐藏
    VC++6.0 打印调试信息
    js使用正则表达式实现文本框只能输入数字和小数点
    Flexbox制作CSS布局实现水平垂直居中
    微信js SDK接口
    QQ JS_SDk相关功能接口
    github代码管理工具的使用方法
    webpack打包压缩工具的使用方法
  • 原文地址:https://www.cnblogs.com/dh-hui/p/4683073.html
Copyright © 2011-2022 走看看