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

  • 相关阅读:
    资深工程师为何否定这种单例模式
    C#经典面试题及答案【20090210更新】
    难道SQL的子查询就是鸡肋吗?
    转:WCF基础知识问与答
    针对分析单点登录(流程图与数据安全)提出的问题及解决方案
    老生常谈:装饰者模式
    我对IDisposable接口的理解
    log4net日志组件经验分享
    老生常谈:工厂模式兄弟姐妹
    探讨高访问量网站优化方案(从图片角度)
  • 原文地址:https://www.cnblogs.com/dh-hui/p/4683073.html
Copyright © 2011-2022 走看看