Как правильно вырезать плоскость с помощью двухмерных текстовых фигур в three.js?

Question

Многие текстовые символы имеют внутренние отверстия (например, a, b, d, e, g, o, p, q, 0,4,6,8,9 и т. Д.).Если я возьму их 2D-фигуры и использую их, чтобы вырезать отверстия на плоской форме, будут вырезаны только контуры этих фигур, и центральное отверстие каждого персонажа не останется на плоской форме.

Есть ли решение, чтобы правильно обрезать плоскость с помощью текстовых фигур?Обратите внимание, что я ищу собственное решение three.js с двухмерными текстовыми фигурами, НЕ использую библиотеку и выдавленный трехмерный текст, который был бы гораздо менее эффективным.

пример основного кода: двухмерные текстовые формы обрезают прямоугольную форму:

// text shapes
var message = "example";
var textshapes = font.generateShapes( message, 100, 2 );

// rectangle shape
var width = 800, height = 300, x = -130, y = -110;    
var rectShape = new THREE.Shape();
rectShape.moveTo( x, y );
rectShape.lineTo( x, y+height );
rectShape.lineTo( x+width, y+height );
rectShape.lineTo( x+width, y );
rectShape.lineTo( x, y );

//cut rectangle shape with the message's text shapes
var tslen = textshapes.length;
for (i=0; i<tslen; i++){
    rectShape.holes.push( textshapes[i] );
}

var geometry = new THREE.ShapeGeometry(rectShape);

результат:

Answer 1

Я закончил с подходом, используя .merge().Не могу сказать, что это лучшее решение (как оно было сделано с нуля), но, по крайней мере, оно дает приемлемый результат:

var scene = new THREE.Scene();
scene.background = new THREE.TextureLoader().load("https://threejs.org/examples/textures/UV_Grid_Sm.jpg");
var clock = new THREE.Clock();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.set(0, 0, 800);

var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x101010);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var loader = new THREE.FontLoader();
loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function(font) {
  // text shapes
  var message = "example8";
  var textshapes = font.generateShapes(message, 100, 2);

  // rectangle shape
  var width = 875,
    height = 300,
    x = -130,
    y = -110;
  var rectShape = new THREE.Shape();
  rectShape.moveTo(x, y);
  rectShape.lineTo(x, y + height);
  rectShape.lineTo(x + width, y + height);
  rectShape.lineTo(x + width, y);
  rectShape.lineTo(x, y);

  //cut rectangle shape with the message's text shapes
  var tslen = textshapes.length;
  for (i = 0; i < tslen; i++) {
    rectShape.holes.push(textshapes[i]);
  }

  var geometry = new THREE.ShapeGeometry(rectShape);

  for (let i = 0; i < tslen; i++) {
    let letter = textshapes[i];
    if (letter.holes && letter.holes.length > 0) {
      for (let j = 0; j < letter.holes.length; j++) {
        // here we make geometries from holes and merge them with the main geometry
        let hole = letter.holes[j];
        let pts = hole.getPoints();

        let innerShape = new THREE.Shape(pts);
        let innerGeom = new THREE.ShapeGeometry(innerShape);
        geometry.merge(innerGeom);
      }
    }
  }

  geometry.center();

  var mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
    color: "aqua",
    side: THREE.DoubleSide
  }));
  scene.add(mesh);
});

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

render();

body {
  margin: 0;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Ссылка

Answer 2

Три модуля csg от стейкоски.Не уверен, почему вы хотите избежать «библиотек», поскольку три являются довольно модульными и пытаются сохранить эзотерические функции, которые вы описываете, вне своей сути.Hth!