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

转载于:https://www.cnblogs.com/dh-hui/p/4683073.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值