Three.js - 使用 ShapeGeometry 创建二维字体模型

ShapeGeometry

通过THREE.ShapeGeometry，你可以调用几个函数来创建自己的图形。我们可以使用线条（line）、曲线（curve）和样条曲线（spline）创建图形的轮廓。还可以使用THREE.Shape对象的holes属性给这个图形打几个孔。

示例地址

https://ithanmang.gitee.io/threejs/home/201807/20180702/03-textShapes.html

效果图

构造函数

ShapeGeometry(shapes, curveSegments)

shapes – shapes数组或者是单一的shape
curveSegments – [可选的] 形状的分段数，默认值是 12
其父类是Geometry

示例

创建一个心的形状

var x = 0, y = 0;

var heartShape = new THREE.Shape();

heartShape.moveTo( x + 5, y + 5 );
heartShape.bezierCurveTo( x + 5, y + 5, x + 4, y, x, y );
heartShape.bezierCurveTo( x - 6, y, x - 6, y + 7,x - 6, y + 7 );
heartShape.bezierCurveTo( x - 6, y + 11, x - 3, y + 15.4, x + 5, y + 19 );
heartShape.bezierCurveTo( x + 12, y + 15.4, x + 16, y + 11, x + 16, y + 7 );
heartShape.bezierCurveTo( x + 16, y + 7, x + 16, y, x + 10, y );
heartShape.bezierCurveTo( x + 7, y, x + 5, y + 5, x + 5, y + 5 );

传给ShapeGeometry

var geometry = new THREE.ShapeGeometry( heartShape );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh );

效果

创建二维字体

主要代码

var text = "three.js";
    var loader = new THREE.FontLoader();
    loader.load('../../libs/examples/fonts/gentilis_regular.typeface.json', function (font) {
   
   
        // 材质
        var fontMaterial = new THREE.MeshLambertMaterial({
   
   
            color: 0x912CEE,
            side: THREE.DoubleSide
        });
        var planeMaterial = new