Three.js——文本几何体

TextGeometry

TextGeometry是一个用于将文本生成为单一的几何体的类，其父类为ExtrudeGeometry。通过FontLoader类的load方法加载的字体和回调，根据传入的文本字符串和配置生成文本几何体。

注意点：创建文本几何体，需要读取字体文件，所以需要在服务器上运行文本几何体对应的文j件。

运行结果：

代码：

		//创建场景
        var scene = new THREE.Scene();
        // 创建相机
        var camera = new THREE.PerspectiveCamera(70, aspect, 1, 2000);
        camera.position.set(0, 0, 100);
        // 创建渲染器（WebGL渲染器）
        var renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setClearColor(0x000000, 1);
        renderer.setSize(ww, wh);
        document.body.appendChild(renderer.domElement);
		
		//创建点光源
        var light = new THREE.PointLight(0xffaaaa, 1, 1000);
        light.position.set(50, 50, 50);
        scene.add(light);
		//创建平行光
        var direLight = new THREE.DirectionalLight(0xffaaaa, 1000);
        direLight.position.set(0, 500, 0);
        direLight.castShadow = true;
        scene.add(direLight);

        // 创建文字
        var fontload = new THREE.FontLoader().load('./fonts/helvetiker_bold.typeface.js', function(text) {
            var textG = new THREE.TextGeometry('WJCHumble', {
                size: 20, //字号大小，一般为大写字母的高度
                height: 10, //文字的厚度
                weight: 'normal', //值为'normal'或'bold'   是否加粗
                font: text, //字体，默认是'helvetiker'  需对应引用的字体文件
                style: 'normal', //值为'normal'或'italics'  是否斜体
                bevelThickness: 1, //斜角与原文本轮廓之间的延申距离厚度
                bevelSize: 1, //斜角与原文本轮廓之间的延申距离 默认8
                curveSegments: 30,//弧线分段数，使得文字的曲线更加光滑  默认12
                bevelEnabled: true, //布尔值，是否使用倒角，意为在边缘处斜切
            });
            textG.center();
            var textM = new THREE.MeshPhongMaterial({
                color: 0xffaaaa,
                specular: 0xffaaaa,
                shininess: 30,
                shading: THREE.FlatShading
            });
            var text = new THREE.Mesh(textG, textM);
            text.castShadow = true;
            scene.add(text);
        });
    })

	//渲染页面
	renderer.render(scene, camera);