Threejs Advanced Eighteen: uso de ExtrudeGeometry para crear geometría 3D a partir de gráficos 2D

En la sección anterior introdujimos las clases relacionadas con los gráficos bidimensionales en Threejs, en esta sección hablaremos sobre cómo generar gráficos tridimensionales a partir de los gráficos bidimensionales creados.

Clase ExtrudeGeometryExtrudeGeometry class

La clase ExtrudeGeometry (geometría del búfer de extrusión) es una clase en Three.js, que se usa para estirar la línea de contorno bidimensional en una forma tridimensional a lo largo de la ruta especificada. Su constructor se ve así:

Constructor

ExtrudeGeometry(shape, options)

Este objeto extruye una forma 2D en una geometría 3D
Parámetro ExtrudeGeometry

• forma : el objeto de forma requerido por ExtrudeGeometry o una matriz que contiene formas.
• options : El objeto de opciones de ExtrudeGeometry. En concreto, contiene los siguientes parámetros:

Los parámetros contenidos en las opciones

• curveSegments — int, el número de puntos en la curva, el valor predeterminado es 12.
• pasos — int, el número de puntos para subdividir a lo largo de la profundidad de la spline de extrusión, el valor predeterminado es 1.
• profundidad: flotante, la profundidad de la forma extruida, el valor predeterminado es 1.
• bevelEnabled — bool, si agregar un bisel a los lados, el valor predeterminado es verdadero.
• bevelThickness — float, establece el grosor del bisel en la forma original. El valor predeterminado es 0,2.
• tamaño del bisel — flotar. La distancia de extensión entre el bisel y el contorno de la forma original, es decir, la longitud de cada bisel, el valor predeterminado es bevelThickness-0.1.
• bevelOffset — float El desplazamiento del contorno del objeto. El valor predeterminado es 0.
• segmentos biselados—int. El número de capas segmentadas del bisel, el valor predeterminado es 3.
• extrudePath — TRES. Objeto de curva. Una spline 3D a lo largo de la forma extruida. Las caras biseladas no son compatibles con la extrusión de ruta.
• UVGenerator — Objeto. Un objeto que proporciona funciones de generador de UV.

Pasos básicos para crear gráficos 3D a partir de gráficos 2D usando ExtrudeGeometry

1. Crea gráficos 2D

Para crear un gráfico 3D a partir de un gráfico 2D, primero debe crear un gráfico 2D. Podemos crear gráficos bidimensionales usando dos objetos Three.js: THREE.Shapey THREE.Path. Las características específicas y los métodos de estas dos clases se han presentado Threejs Advanced Seventeen: clases Path, Shape y ShapeGeometry en Threejsen la sección anterior Aquí hay solo una breve introducción.

La forma
Shape es un contorno bidimensional que consta de una serie de puntos, líneas y arcos. Se puede construir una forma con un contorno complejo combinando estas primitivas básicas.
Podemos crear un objeto que contenga un rectángulo y un arco con el siguiente código Shape:

var shape1 = new THREE.Shape();
//向shape对象中添加矩形和圆弧
shape1.moveTo(0, 0);//起始点
shape1.lineTo(0, 10);//下直线
shape1.lineTo(20, 10);//右直线
shape1.lineTo(20, 0);//上直线
shape1.lineTo(0, 0);//左直线
var holePath = new THREE.Path();
holePath.absellipse(10, 5, 5, 5, 0, Math.PI * 2, true);
shape1.holes.push(holePath);

En el código anterior, primero moveTo()definimos el punto inicial del rectángulo a través del método y luego usamos lineTo()el método para definir los cuatro límites del rectángulo. A continuación, usamos absellipse()el método para crear el arco y agregarlo como una cavidad interna a Shape.

Ruta
Al crear Shapeun objeto, también podemos utilizar Pathel objeto para definir el contorno básico de la forma, que consta de una serie de puntos y líneas.
Podemos crear un objeto con un trapezoide y esquinas redondeadas con el siguiente código Path:

var path = new THREE.Path();
path.moveTo(0, 0);
path.lineTo(20, 10);
path.lineTo(20, 20);
path.lineTo(0, 10);
path.lineTo(0, 0);

var circlePath = new THREE.Path();
circlePath.absarc(10, 10, 5, 0, Math.PI * 2);
path.holes.push(circlePath);

En el código anterior, especificamos moveTo()la posición de la esquina inferior izquierda del trapezoide a través del método y luego usamos lineTo()el método para definir las posiciones de los cuatro vértices del trapezoide. A continuación, usamos absarc()el método para crear un empalme y agregarlo al Pathorificio predeterminado del objeto.

Aquí usamos la forma para crear gráficos bidimensionales, el código es el siguiente: Creamos una forma de corazón a través de la forma

  var shape = new THREE.Shape();
  shape.moveTo( 0, 20 );
  shape.bezierCurveTo( 0, 10, -18, 0, -25, 0 );
  shape.bezierCurveTo( -55, 0, -55, 35, -55, 35 );
  shape.bezierCurveTo( -55, 55, -35, 77, 0, 95 );
  shape.bezierCurveTo( 35, 77, 55, 55, 55, 35 );
  shape.bezierCurveTo( 55, 35, 55, 0, 25, 0 );
  shape.bezierCurveTo( 18, 0, 0, 10, 0, 20 );

2. Crear el esquema (delineado)

ShapeCon una forma u objeto bidimensional Path, podemos crear el contorno correspondiente (delineado) a través de los parámetros THREE.ExtrudeGeometryen el constructor .shapes

var extrudeSettings = {
    
    
    depth: 10,
    bevelEnabled: false,
    steps: 1
};
var geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);

En el código anterior, el objeto ExtrudeGeometry se crea utilizando el constructor ExtrudeGeometry y el parámetro extrudeSettings.

3. Crear objetos de material y malla

Cree el material y el objeto de malla Mesh, y pase la geometría y el material anteriores como parámetros

var material = new THREE.MeshPhongMaterial( {
    
     color: 0xffffff, specular: 0x111111, shininess: 200 } )
var mesh = new THREE.Mesh( geometry, material )
scene.add( mesh );

Actualice el navegador, puede ver que una figura tridimensional en forma de corazón con una profundidad de 10 se ha estirado en el navegador en función de la figura bidimensional en forma de corazón que creamos

Contenido complementario: Genere gráficos estirados como modo de estructura alámbrica

Podemos generar gráficos 3D como modo de estructura alámbrica, los pasos son los siguientes:

1. Cree un objeto WireframeGeometry y pásele el objeto ExtrudeGeometry:

var wireGeometry = new THREE.WireframeGeometry( extrudeGeometry );

2. Pase el objeto WireframeGeometry al objeto LineSegments para mostrar la geometría alámbrica:

var wireMaterial = new THREE.LineBasicMaterial( {
    
     color: 0xffffff } );
var wireframe = new THREE.LineSegments( wireGeometry, wireMaterial );
scene.add( wireframe );

Bueno, lleguemos aquí primero hoy, amigos a los que les gusta, les gusta, ¡síganlo y recójanlo!