Criar efeitos 3D em apresentações usando Node.js

Visão Geral

Aspose.Slides for Node.js via Java pode criar, editar, preservar e renderizar formatação 3D no estilo PowerPoint para formas e texto. Este artigo aborda efeitos 3D como rotação, extrusão, chanfros, iluminação, material, preenchimentos em gradiente ou imagem e texto 3D.

Este artigo trata de efeitos de formatação 3D em formas e texto do PowerPoint. Não se trata de inserir ou editar arquivos de modelo 3D independentes. Quando você exporta um slide para uma imagem, PDF ou HTML, o Aspose.Slides renderiza esses efeitos 3D na saída 2D exportada.

Conceitos de Formatação 3D

Use Shape.getThreeDFormat() para aplicar formatação 3D a uma forma. O objeto ThreeDFormat retornado controla a cena 3D para essa forma.

Para texto, use TextFrameFormat.getThreeDFormat(). Isso aplica formatação 3D ao quadro de texto em vez do corpo da forma.

Os membros de API mais importantes são:

Membro da API	O que controla	Quando usar
getCamera	Ponto de vista, tipo de câmera predefinido, rotação, zoom e perspectiva.	Rotacione o objeto no espaço 3D ou corresponda a um preset de rotação 3D do PowerPoint.
getLightRig	Predefinição de luz, direção e rotação da luz.	Altere como os realces e sombras aparecem na superfície 3D.
getMaterial e setMaterial	Material da superfície, como plano, fosco, plástico ou metal.	Faça a mesma geometria parecer mais plana, suave, brilhante ou metálica.
getExtrusionHeight e setExtrusionHeight	Quão longe a forma se estende para trás a partir de sua face frontal.	Transforme uma forma plana em um objeto 3D visivelmente espesso.
getExtrusionColor	Cor dos lados extrudados.	Torne a profundidade visível ou coordene a cor do lado com o preenchimento da frente.
getDepth e setDepth	Profundidade 3D adicional usada pela formatação 3D do PowerPoint.	Ajuste fino da profundidade para formas ou texto, especialmente junto com configurações de chanfro e material.
getBevelTop e getBevelBottom	Bordas elevadas ou arredondadas nas faces frontal e traseira.	Adicione uma borda suavizada ou moldada em vez de uma superfície plana e afiada.
getContourColor, getContourWidth e setContourWidth	Contorno ao redor do objeto 3D.	Enfatize o limite do objeto na saída renderizada.

Criar uma Forma 3D

Uma forma normalmente precisa de quatro tipos de configurações antes de parecer convincentemente 3D:

Configurações de câmera, porque a visualização frontal padrão pode ocultar a extrusão.
Configurações de iluminação, porque a iluminação torna as faces e os lados legíveis.
Configurações de material, porque a superfície influencia como a luz é renderizada.
Configurações de extrusão ou profundidade, porque uma forma plana precisa de espessura.

O exemplo a seguir cria um retângulo, adiciona texto à sua face frontal, aplica formatação 3D, salva a apresentação como PPTX e renderiza o slide para uma imagem 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();
}

A imagem do slide renderizado mostra o retângulo como um bloco 3D espesso:

Retângulo 3D azul renderizado com texto 3D branco na face frontal

Rotacionar uma Forma com a Câmera

No PowerPoint, a rotação 3D é configurada a partir do painel Rotação 3D. Os valores de rotação X, Y e Z correspondem à rotação que você define através da API da câmera.

Painel de rotação 3D do PowerPoint com valores de rotação X, Y e Z destacados

No Aspose.Slides, defina o tipo de câmera e a rotação através do formato 3D retornado por shape.getThreeDFormat():

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

Use a câmera quando precisar alterar a forma como o observador vê o objeto. Ela não altera a geometria 2D da forma no slide. Ela altera o ponto de vista 3D usado pelo PowerPoint e pelo Aspose.Slides ao renderizar.

Adicionar Extrusão e Profundidade

A extrusão faz uma forma parecer espessa ao estendê‑la atrás da face frontal. No PowerPoint, o controle de profundidade define essa espessura visível, e o controle de cor define a cor das faces laterais.

Controles de profundidade do PowerPoint mapeados para as propriedades cor da extrusão e altura da extrusão

Defina a altura de extrusão para a espessura e a cor da extrusão para a cor dos lados:

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);

Use o ajuste de profundidade quando precisar trabalhar diretamente com o valor de profundidade do PowerPoint ou combinar profundidade com chanfro, material e efeitos de texto. Em muitos cenários de formas, a altura de extrusão é a configuração mais clara porque expressa diretamente a extrusão visível.

Usar Preenchimentos em Gradiente ou Imagem com Efeitos 3D

A formatação 3D é independente do preenchimento da forma. Você pode aplicar uma cor sólida, gradiente, padrão ou preenchimento de imagem à face frontal e ainda usar as mesmas configurações de câmera, luz, material e extrusão.

Este exemplo aplica um preenchimento em gradiente à forma e uma cor de extrusão mais escura aos 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();
}

Retângulo 3D renderizado com preenchimento gradiente azul‑para‑laranja e extrusão laranja

Para usar um preenchimento de imagem, adicione a imagem à apresentação e atribua‑a ao preenchimento da 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);

Retângulo 3D renderizado com preenchimento de foto na face frontal e extrusão laranja

Aplicar Formatação 3D ao Texto

A formatação 3D da forma afeta o corpo da forma. A formatação 3D do texto afeta o quadro de texto. Isso é útil para efeitos semelhantes ao WordArt, onde as próprias letras precisam de extrusão, material, iluminação e configurações de câmera.

O exemplo a seguir cria texto com preenchimento de padrão, aplica uma transformação WordArt e configura as definições 3D em TextFrameFormat:

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();
}

Texto 3D renderizado com transformação WordArt arqueada, preenchimento de padrão laranja e extrusão escura

Comportamento de Exportação e Renderização

O Aspose.Slides preserva a formatação 3D ao salvar em formatos PowerPoint como PPTX. Ao renderizar ou exportar para formatos de layout fixo, a cena 3D é rasterizada ou desenhada na saída como um resultado 2D. Isso se aplica quando você renderiza slides para PNG, exporta para PDF, exporta para HTML, ou gera quadros para conversão de vídeo.

Imagens e PDFs exportados não são interativos. O objeto não pode ser rotacionado pelo usuário após a exportação.
A aparência final depende da combinação de câmera, rig de iluminação, material, extrusão, preenchimento e dimensionamento do slide.
Se precisar inspecionar valores de formatação herdados ou baseados em tema, leia as propriedades efetivas da forma.
Alguns formatos de saída não podem armazenar a formatação 3D editável do PowerPoint. Nesses formatos, o resultado visual é renderizado em vez de preservado como configurações 3D editáveis.

Perguntas Frequentes

O Aspose.Slides pode criar apresentações 3D interativas?

O Aspose.Slides cria e renderiza efeitos 3D do PowerPoint para formas e texto. Ele não torna imagens, PDFs ou páginas HTML exportados em cenas 3D interativas que o usuário possa rotacionar. No PPTX, a formatação 3D permanece editável no PowerPoint onde o formato a suporta.

Qual é a diferença entre um modelo 3D e um efeito 3D?

Um modelo 3D é um objeto 3D separado inserido em uma apresentação. Um efeito 3D é uma formatação aplicada a uma forma ou texto PowerPoint comum, como rotação, extrusão, chanfro, iluminação e material. Este artigo aborda efeitos 3D.

Quais configurações são necessárias para uma forma 3D visível?

No mínimo, defina uma rotação de câmera e extrusão ou profundidade. Na prática, também configure um rig de iluminação e material para que as faces renderizadas tenham realces e sombras claros.

Posso aplicar efeitos 3D tanto a formas quanto a texto?

Sim. Use Shape.getThreeDFormat() para o corpo da forma e TextFrameFormat.getThreeDFormat() para texto.

Os efeitos 3D aparecerão ao exportar para imagens, PDF, HTML ou quadros de vídeo?

Sim. O Aspose.Slides renderiza os efeitos 3D ao produzir imagens de slides, saída PDF, saída HTML e quadros usados para conversão de vídeo. A saída exportada contém a aparência renderizada, não um objeto 3D editável.

Posso ler os valores 3D finais após a aplicação de herança e configurações de tema?

Sim. Use as APIs de formatação efetiva descritas em Propriedades Efetivas da Forma para ler a câmera final, rig de iluminação, chanfro e valores 3D relacionados.

Aprimore Apresentações PowerPoint com Animações em JavaScript Aprimorar o Processamento de Imagens com a API Moderna