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

  • 相关阅读:
    JavaScript中的分支结构
    JavaScript中的函数
    JavaScript的数据类型转换
    javascript 概述及基础知识点(变量,常量,运算符,数据类型)
    关于检索关键字的常用四种方法
    Array.prototype.sort()
    String()与toString()区别和应用
    关于css的优先级
    android--asp.net webservice 返回json
    android--handler
  • 原文地址:https://www.cnblogs.com/dh-hui/p/4683073.html
Copyright © 2020-2023  润新知