Crear efectos 3D en presentaciones usando Node.js

Visión general

Aspose.Slides para Node.js a través de Java puede crear, editar, conservar y renderizar formato 3D al estilo de PowerPoint para formas y texto. Este artículo cubre efectos 3D como rotación, extrusión, biseles, iluminación, material, rellenos de degradado o imagen, y texto 3D.

Este artículo trata sobre los efectos de formato 3D en las formas y el texto de PowerPoint. No se trata de insertar o editar archivos de modelo 3D independientes. Cuando exportas una diapositiva a una imagen, PDF o HTML, Aspose.Slides renderiza esos efectos 3D en la salida 2D exportada.

Conceptos de formato 3D

Utiliza Shape.getThreeDFormat() para aplicar formato 3D a una forma. El objeto ThreeDFormat devuelto controla la escena 3D de esa forma.

Para texto, usa TextFrameFormat.getThreeDFormat(). Esto aplica formato 3D al marco de texto en lugar del cuerpo de la forma.

Los miembros de API más importantes son:

Miembro de API	Qué controla	Cuándo usarlo
getCamera	Punto de vista, tipo de cámara predefinido, rotación, zoom y perspectiva.	Rotar el objeto en espacio 3D o coincidir con un preset de rotación 3D de PowerPoint.
getLightRig	Preset de luz, dirección y rotación de la luz.	Cambiar cómo aparecen los reflejos y sombras en la superficie 3D.
getMaterial y setMaterial	Material de la superficie, como plano, mate, plástico o metal.	Hacer que la misma geometría parezca más plana, suave, brillante o metálica.
getExtrusionHeight y setExtrusionHeight	Cuán lejos se extiende la forma hacia atrás desde su cara frontal.	Convertir una forma plana en un objeto 3D visiblemente grueso.
getExtrusionColor	Color de los lados extruidos.	Hacer visible la profundidad o coordinar el color lateral con el relleno frontal.
getDepth y setDepth	Profundidad 3D adicional utilizada por el formato 3D de PowerPoint.	Ajustar finamente la profundidad para formas o texto, especialmente junto con la configuración de bisel y material.
getBevelTop y getBevelBottom	Bordes elevados o redondeados en las caras frontal y posterior.	Agregar un borde suavizado o moldeado en lugar de una cara plana y afilada.
getContourColor, getContourWidth y setContourWidth	Contorno alrededor del objeto 3D.	Resaltar el límite del objeto en la salida renderizada.

Crear una forma 3D

Una forma suele necesitar cuatro tipos de configuraciones antes de que parezca convincentemente 3D:

Configuración de cámara, porque la vista frontal predeterminada puede ocultar la extrusión.
Configuración de luz, porque la iluminación hace que las caras y los lados sean legibles.
Configuración de material, porque la superficie afecta cómo se representa la luz.
Configuración de extrusión o profundidad, porque una forma plana necesita grosor.

El siguiente ejemplo crea un rectángulo, agrega texto a su cara frontal, aplica formato 3D, guarda la presentación como PPTX y renderiza la diapositiva a una imagen PNG.

const imageScale = 2;

const presentation = new aspose.slides.Presentation();
try {
    const slide = presentation.getSlides().get_Item(0);
    const shape = slide.getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 200, 150, 200, 200);
    shape.getTextFrame().setText("3D");
    shape.getTextFrame().getParagraphs().get_Item(0).getParagraphFormat().getDefaultPortionFormat().setFontHeight(64);

    const blueColor = java.getStaticFieldValue("java.awt.Color", "BLUE");
    shape.getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Solid));
    shape.getFillFormat().getSolidFillColor().setColor(blueColor);

    shape.getThreeDFormat().getCamera().setCameraType(aspose.slides.CameraPresetType.OrthographicFront);
    shape.getThreeDFormat().getCamera().setRotation(20, 30, 40);
    shape.getThreeDFormat().getLightRig().setLightType(aspose.slides.LightRigPresetType.Flat);
    shape.getThreeDFormat().getLightRig().setDirection(aspose.slides.LightingDirection.Top);
    shape.getThreeDFormat().setMaterial(aspose.slides.MaterialPresetType.Flat);
    shape.getThreeDFormat().setExtrusionHeight(100);
    shape.getThreeDFormat().getExtrusionColor().setColor(blueColor);

    const thumbnail = slide.getImage(imageScale, imageScale);
    try {
        thumbnail.save("shape_3d.png", aspose.slides.ImageFormat.Png);
    } finally {
        thumbnail.dispose();
    }

    presentation.save("shape_3d.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

La imagen de la diapositiva renderizada muestra el rectángulo como un bloque 3D grueso:

Rectángulo 3D azul renderizado con texto 3D blanco en la cara frontal

Rotar una forma con la cámara

En PowerPoint, la rotación 3D se configura desde el panel de Rotación 3-D. Los valores de rotación X, Y y Z corresponden a la rotación que estableces a través de la API de cámara.

Panel de Rotación 3-D de PowerPoint con los valores de rotación X, Y y Z resaltados

En Aspose.Slides, establece el tipo de cámara y la rotación mediante el formato 3D devuelto por shape.getThreeDFormat():

shape.getThreeDFormat().getCamera().setCameraType(aspose.slides.CameraPresetType.OrthographicFront);
shape.getThreeDFormat().getCamera().setRotation(20, 30, 40);

Utiliza la cámara cuando necesites cambiar la forma en que el espectador ve el objeto. No cambia la geometría 2D de la forma en la diapositiva. Cambia el punto de vista 3D utilizado por PowerPoint y por Aspose.Slides al renderizar.

Agregar extrusión y profundidad

La extrusión hace que una forma parezca gruesa al extenderla detrás de la cara frontal. En PowerPoint, el control de profundidad define este grosor visible, y el control de color define el color de las caras laterales.

Controles de profundidad de PowerPoint asignados a las propiedades de color de extrusión y altura de extrusión

Establece la altura de extrusión para el grosor y el color de extrusión para el color lateral:

const extrusionColor = java.newInstanceSync("java.awt.Color", 128, 0, 128);

shape.getThreeDFormat().getCamera().setRotation(20, 30, 40);
shape.getThreeDFormat().setExtrusionHeight(100);
shape.getThreeDFormat().getExtrusionColor().setColor(extrusionColor);

Utiliza la configuración de profundidad cuando necesites trabajar directamente con el valor de profundidad de PowerPoint o combinar profundidad con bisel, material y efectos de texto. En muchos escenarios de formas, la altura de extrusión es la configuración más clara porque expresa directamente la extrusión visible.

Usar rellenos de degradado o imagen con efectos 3D

El formato 3D es independiente del relleno de la forma. Puedes aplicar un color sólido, degradado, patrón o relleno de imagen a la cara frontal y seguir utilizando la misma cámara, luz, material y configuraciones de extrusión.

Este ejemplo aplica un relleno de degradado a la forma y un color de extrusión más oscuro a los lados:

const imageScale = 2;

const presentation = new aspose.slides.Presentation();
try {
    const slide = presentation.getSlides().get_Item(0);
    const shape = slide.getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 200, 150, 250, 250);
    shape.getTextFrame().setText("3D Gradient");
    shape.getTextFrame().getParagraphs().get_Item(0).getParagraphFormat().getDefaultPortionFormat().setFontHeight(64);

    const blueColor = java.getStaticFieldValue("java.awt.Color", "BLUE");
    const orangeColor = java.getStaticFieldValue("java.awt.Color", "ORANGE");
    shape.getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Gradient));
    shape.getFillFormat().getGradientFormat().getGradientStops().add(0, blueColor);
    shape.getFillFormat().getGradientFormat().getGradientStops().add(100, orangeColor);

    const darkOrangeColor = java.newInstanceSync("java.awt.Color", 255, 140, 0);
    shape.getThreeDFormat().getCamera().setCameraType(aspose.slides.CameraPresetType.OrthographicFront);
    shape.getThreeDFormat().getCamera().setRotation(10, 20, 30);
    shape.getThreeDFormat().getLightRig().setLightType(aspose.slides.LightRigPresetType.Flat);
    shape.getThreeDFormat().getLightRig().setDirection(aspose.slides.LightingDirection.Top);
    shape.getThreeDFormat().setMaterial(aspose.slides.MaterialPresetType.Flat);
    shape.getThreeDFormat().setExtrusionHeight(150);
    shape.getThreeDFormat().getExtrusionColor().setColor(darkOrangeColor);

    const thumbnail = slide.getImage(imageScale, imageScale);
    try {
        thumbnail.save("gradient_3d.png", aspose.slides.ImageFormat.Png);
    } finally {
        thumbnail.dispose();
    }
} finally {
    presentation.dispose();
}

La salida renderizada mantiene el degradado en la cara frontal y renderiza la extrusión por separado:

Rectángulo 3D renderizado con un relleno degradado de azul a naranja y extrusión naranja

Para usar un relleno de imagen en su lugar, agrega la imagen a la presentación y asígnala al relleno de la forma:

const sourceImage = aspose.slides.Images.fromFile("image.jpg");
let presentationImage;
try {
    presentationImage = presentation.getImages().addImage(sourceImage);
} finally {
    sourceImage.dispose();
}

shape.getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Picture));
shape.getFillFormat().getPictureFillFormat().getPicture().setImage(presentationImage);
shape.getFillFormat().getPictureFillFormat().setPictureFillMode(aspose.slides.PictureFillMode.Stretch);

const darkOrangeColor = java.newInstanceSync("java.awt.Color", 255, 140, 0);
shape.getThreeDFormat().getCamera().setRotation(10, 20, 30);
shape.getThreeDFormat().setExtrusionHeight(150);
shape.getThreeDFormat().getExtrusionColor().setColor(darkOrangeColor);

La imagen se renderiza en la cara frontal, mientras que la extrusión se renderiza como la superficie lateral 3D:

Rectángulo 3D renderizado con un relleno fotográfico en la cara frontal y extrusión naranja

Aplicar formato 3D al texto

El formato 3D de la forma afecta el cuerpo de la forma. El formato 3D del texto afecta el marco de texto. Esto es útil para efectos similares a WordArt donde las propias letras necesitan extrusión, material, iluminación y ajustes de cámara.

El siguiente ejemplo crea texto con un relleno de patrón, aplica una transformación WordArt y configura los ajustes 3D en TextFrameFormat.getThreeDFormat():

const imageScale = 2;

const presentation = new aspose.slides.Presentation();
try {
    const slide = presentation.getSlides().get_Item(0);
    const shape = slide.getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 200, 150, 250, 250);
    shape.getFillFormat().setFillType(java.newByte(aspose.slides.FillType.NoFill));
    shape.getLineFormat().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.NoFill));
    shape.getTextFrame().setText("3D Text");

    const portion = shape.getTextFrame().getParagraphs().get_Item(0).getPortions().get_Item(0);
    portion.getPortionFormat().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Pattern));
    const darkOrangeColor = java.newInstanceSync("java.awt.Color", 255, 140, 0);
    const whiteColor = java.getStaticFieldValue("java.awt.Color", "WHITE");
    portion.getPortionFormat().getFillFormat().getPatternFormat().getForeColor().setColor(darkOrangeColor);
    portion.getPortionFormat().getFillFormat().getPatternFormat().getBackColor().setColor(whiteColor);
    portion.getPortionFormat().getFillFormat().getPatternFormat().setPatternStyle(java.newByte(aspose.slides.PatternStyle.LargeGrid));

    shape.getTextFrame().getParagraphs().get_Item(0).getParagraphFormat().getDefaultPortionFormat().setFontHeight(128);

    const textFrameFormat = shape.getTextFrame().getTextFrameFormat();
    textFrameFormat.setTransform(java.newByte(aspose.slides.TextShapeType.ArchUp));
    textFrameFormat.getThreeDFormat().setExtrusionHeight(3.5);
    textFrameFormat.getThreeDFormat().setDepth(3);
    textFrameFormat.getThreeDFormat().setMaterial(aspose.slides.MaterialPresetType.Plastic);
    textFrameFormat.getThreeDFormat().getLightRig().setDirection(aspose.slides.LightingDirection.Top);
    textFrameFormat.getThreeDFormat().getLightRig().setLightType(aspose.slides.LightRigPresetType.Balanced);
    textFrameFormat.getThreeDFormat().getLightRig().setRotation(0, 0, 40);
    textFrameFormat.getThreeDFormat().getCamera().setCameraType(aspose.slides.CameraPresetType.PerspectiveContrastingRightFacing);

    const thumbnail = slide.getImage(imageScale, imageScale);
    try {
        thumbnail.save("text_3d.png", aspose.slides.ImageFormat.Png);
    } finally {
        thumbnail.dispose();
    }

    presentation.save("text_3d.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

El texto se renderiza como letras 3D curvadas y extruidas:

Texto 3D renderizado con una transformación WordArt arqueada, relleno de patrón naranja y extrusión oscura

Comportamiento de exportación y renderizado

Aspose.Slides conserva el formato 3D al guardar en formatos de PowerPoint como PPTX. Al renderizar o exportar a formatos de diseño fijo, la escena 3D se rasteriza o se dibuja en la salida como un resultado 2D. Esto se aplica cuando renderizas diapositivas a PNG, exportas a PDF, exportas a HTML, o generas fotogramas para la conversión a vídeo.

Ten en cuenta los siguientes puntos:

Las imágenes y los PDFs exportados no son interactivos. El objeto no puede ser rotado por el espectador después de la exportación.
La apariencia final depende de la combinación de cámara, conjunto de luces, material, extrusión, relleno y escalado de la diapositiva.
Si necesitas inspeccionar los valores de formato heredados o basados en el tema, lee las propiedades efectivas de la forma.
Algunos formatos de salida no pueden almacenar el formato 3D editable de PowerPoint. En esos formatos, el resultado visual se renderiza en lugar de preservarse como ajustes 3D editables.

Preguntas frecuentes

¿Puede Aspose.Slides crear presentaciones 3D interactivas?

Aspose.Slides crea y renderiza efectos 3D de PowerPoint para formas y texto. No convierte las imágenes, PDFs o páginas HTML exportadas en escenas 3D interactivas que un espectador pueda rotar. En PPTX, el formato 3D sigue siendo editable en PowerPoint donde el formato lo permite.

¿Cuál es la diferencia entre un modelo 3D y un efecto 3D?

Un modelo 3D es un objeto 3D independiente insertado en una presentación. Un efecto 3D es un formato aplicado a una forma o texto regular de PowerPoint, como rotación, extrusión, bisel, iluminación y material. Este artículo cubre los efectos 3D.

¿Qué configuraciones son necesarias para una forma 3D visible?

Como mínimo, establece una rotación de cámara y ya sea extrusión o profundidad. En la práctica, también configura un conjunto de luces y material para que las caras renderizadas tengan reflejos y sombras claros.

¿Puedo aplicar efectos 3D tanto a formas como a texto?

Sí. Utiliza Shape.getThreeDFormat() para el cuerpo de la forma y TextFrameFormat.getThreeDFormat() para el texto.

¿Aparecerán los efectos 3D al exportar a imágenes, PDF, HTML o fotogramas de vídeo?

Sí. Aspose.Slides renderiza los efectos 3D al generar imágenes de diapositivas, salida en PDF, salida en HTML y fotogramas utilizados para la conversión a vídeo. La salida exportada contiene la apariencia renderizada, no un objeto 3D editable.

¿Puedo leer los valores 3D finales después de que se apliquen la herencia y los ajustes del tema?

Sí. Utiliza las API de formato efectivo descritas en Propiedades efectivas de la forma para leer la cámara final, conjunto de luces, bisel y valores 3D relacionados.

Animación de PowerPoint Mejorar el procesamiento de imágenes con la API moderna