Three.js - 绘制三维字体模型 - 英文和中文_threejs文本模型-优快云博客

这篇博客介绍了如何利用Three.js库绘制三维字体模型，包括英文和中文。通过加载特定格式的字体文件，结合Three.js的方法，可以将文本转化为3D Mesh对象。在加载中文字体时，需要先将字体文件转换为特定格式，如文中提到的微软雅黑字体转换过程。此外，文章还展示了代码示例和最终效果。

创建字体模型，需要通过THREE.FontLoader()方法，来加载json格式的字体格式类型，然后在加载成功的回调函数中，通过THREE.TextBufferGeometry()或者THREE.TextGeometry()，将需要展现的文本以及设置好的字体格式对象传递到方法中来创建Mesh对象，需要注意的是，THREE.TextBufferGeometry()，不能用作BSP 布尔操作，THREE.TextGeometry()可以进行几何体布尔运算。
浏览地址：https://ithanmang.gitee.io/threejs/home/201806/20180629/02-textGeometry.html

主要代码

此处加载的字体模型是英文字体json文件，若想加载中文字，还需要下载相应的ttf文件，然后通过这个网址[http://gero3.github.io/facetype.js/]把ttf文件转换为json文件，再通过FontLoader加载即可。
这里提供微软雅黑的ttf文件，欢迎下载：
链接：https://pan.baidu.com/s/1zZiog3YoPZSHCzMoxVLbQw 密码：5w47

var text = 'three.js';
// 使用FontLoader加载字体
var loader = new THREE.FontLoader();
loader.load('../../libs/examples/fonts/gentilis_regular.typeface.json', function (response) {
    // 文字配置
    var fontCfg = {
        font : response,
        size : 80,
        height: 5,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 10,
        bevelSize: 8,
        bevelSegments: 5
    };
    // TextGeometry文本几何对象
    var fontGeometry = new THREE.TextGeometry(text,fontCfg);
    fontGeometry.computeBoundingBox();//绑定盒子模型

    // 文字的材质
    var fontMaterial = new THREE.MeshNormalMaterial();
    var font = new THREE.Mesh(fontGeometry, fontMaterial);

    // 计算出整个模型宽度的一半, 不然模型就会绕着x = 0,中心旋转
    font.position.x = -(fontGeometry.boundingBox.max.x - fontGeometry.boundingBox.min.x) / 2;

    scene.add(font);
});

需要注意的是，对让几何文本绑定盒子模型，这样好对它的位置进行操作。

效果

这里写图片描述

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制字体模型</title>
    <style>

        body{
            margin: 0;
            overflow: hidden;
        }

    </style>
    <script src="../../libs/build/three.js"></script>

    <script src="../../libs/examples/js/Detector.js"></script>

    <script src="../../libs/examples/js/libs/dat.gui.min.js"></script>
    <script src="../../libs/examples/js/libs/stats.min.js"></script>

    <script src="../../libs/examples/js/controls/OrbitControls.js"></script>

    <script src="../../libs/extend/ThreeBSP.js"></script>
</head>
<body>
<div id="WebGL-output"></div>
<div id="Stats-output"></div>

<script>

    var stats = initStats();

    var scene, camera, renderer, controls, light, gui;

    init();
    animate();

    function initScene() {
        scene = new THREE.Scene();
    }

    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
        camera.position.set(0, 200, 300);
        camera.lookAt(new THREE.Vector3(0, 0, 0));
    }

    function initRenderer() {
        if (Detector.webgl){
            renderer = new THREE.WebGLRenderer({antialias : true, autoClear : true});
        }else{
            renderer = new THREE.CanvasRenderer();
        }

        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor( 0x050505 );
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap;

        document.body.appendChild(renderer.domElement);
    }

    function initLight() {
        light = new THREE.SpotLight( 0xEEDFCC );
        light.position.set(-100, 200, 100);
        light.castShadow = true;

        scene.add(light);
        scene.add(new THREE.AmbientLight( 0xD1D1D1 ));
    }

    function initGui() {
        gui = new function () {
            
        }
        var guiControls = new dat.GUI();
    }

    function initContent() {
        var helper = new THREE.GridHelper(1200, 60, 0xCD3700, 0x424242);
        scene.add(helper);

        var text = 'three.js';
        // 使用FontLoader加载字体
        var loader = new THREE.FontLoader();
        loader.load('../../libs/examples/fonts/gentilis_regular.typeface.json', function (response) {
            // 文字配置
            var fontCfg = {
                font : response,
                size : 80,
                height: 5,
                curveSegments: 12,
                bevelEnabled: true,
                bevelThickness: 10,
                bevelSize: 8,
                bevelSegments: 5
            };
            // TextGeometry文本几何对象
            var fontGeometry = new THREE.TextGeometry(text,fontCfg);
            fontGeometry.computeBoundingBox();//绑定盒子模型

            // 文字的材质
            var fontMaterial = new THREE.MeshNormalMaterial();
            var font = new THREE.Mesh(fontGeometry, fontMaterial);

            // 计算出整个模型宽度的一半, 不然模型就会绕着x = 0,中心旋转
            font.position.x = -(fontGeometry.boundingBox.max.x - fontGeometry.boundingBox.min.x) / 2;

            scene.add(font);
        });

    }

    function initControls() {
        controls = new THREE.OrbitControls(camera, renderer.domElement);
    }


    function initStats() {
        var stats = new Stats();

        stats.domElement.style.position = 'absolute';
        stats.domElement.style.left = '0px';
        stats.domElement.style.top = '0px';

        document.body.appendChild(stats.domElement);

        return stats;
    }

    function update() {
        stats.update();
        controls.update();
    }

    function init() {
        initScene();
        initCamera();
        initRenderer();
        initLight();
        initContent();
        initControls();
        initGui();
    }

    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
        update();
    }

</script>
</body>
</html>