3D‑Effekte in Präsentationen mit Node.js erstellen

Übersicht

Aspose.Slides für Node.js via Java kann PowerPoint‑ähnliche 3D‑Formatierungen für Formen und Text erstellen, bearbeiten, erhalten und rendern. Dieser Artikel behandelt 3D‑Effekte wie Drehung, Extrusion, Abschrägungen, Beleuchtung, Material, Farbverlauf‑ oder Bildfüllungen sowie 3D‑Text.

Dieser Artikel behandelt 3D‑Formatierungseffekte für PowerPoint‑Formen und -Text. Er befasst sich nicht mit dem Einfügen oder Bearbeiten von eigenständigen 3D‑Modelldateien. Wenn Sie eine Folie als Bild, PDF oder HTML exportieren, rendert Aspose.Slides diese 3D‑Effekte in die exportierte 2D‑Ausgabe.

Konzepte der 3D‑Formatierung

Verwenden Sie Shape.getThreeDFormat() um einer Form 3D‑Formatierung zuzuweisen. Das zurückgegebene ThreeDFormat-Objekt steuert die 3D‑Szene für diese Form.

Für Text verwenden Sie TextFrameFormat.getThreeDFormat(). Damit wird die 3D‑Formatierung auf den Textrahmen anstatt auf den Formkörper angewendet.

Die wichtigsten API‑Mitglieder sind:

API‑Mitglied	Was es steuert	Wann zu verwenden
getCamera	Ansichtspunkt, vordefinierter Kameratyp, Rotation, Zoom und Perspektive.	Drehen Sie das Objekt im 3D‑Raum oder passen Sie es an eine vordefinierte 3D‑Drehung in PowerPoint an.
getLightRig	Lichtvorgabe, Richtung und Lichtrotation.	Ändern Sie, wie Highlights und Schatten auf der 3D‑Oberfläche erscheinen.
getMaterial und setMaterial	Oberflächenmaterial, z. B. flach, matt, Kunststoff oder Metall.	Lassen Sie dieselbe Geometrie flacher, weicher, glänzender oder metallischer wirken.
getExtrusionHeight und setExtrusionHeight	Wie weit die Form von ihrer Vorderseite nach hinten reicht.	Verwandeln Sie eine flache Form in ein sichtbar dickes 3D‑Objekt.
getExtrusionColor	Farbe der extrudierten Seiten.	Machen Sie die Tiefe sichtbar oder koordinieren Sie die Seitenfarbe mit der Vorderflächenfüllung.
getDepth und setDepth	Zusätzliche 3D‑Tiefe, die von PowerPoint‑3D‑Formatierung verwendet wird.	Feinabstimmung der Tiefe für Formen oder Text, besonders zusammen mit Abschrägung‑ und Materialeinstellungen.
getBevelTop und getBevelBottom	Erhöhte oder abgerundete Kanten an Vorder‑ und Rückseiten.	Fügen Sie eine abgeflachte oder geprägte Kante anstelle einer scharfen flachen Fläche hinzu.
getContourColor, getContourWidth und setContourWidth	Kontur um das 3D‑Objekt.	Hervorheben der Objektgrenze in der gerenderten Ausgabe.

Erstellen einer 3D‑Form

Eine Form benötigt normalerweise vier Arten von Einstellungen, damit sie überzeugend 3‑dimensional wirkt:

Kameraeinstellungen, da die Standard‑Frontalansicht die Extrusion verbergen kann.
Lichteinstellungen, weil Beleuchtung die Flächen und Seiten lesbar macht.
Materialeinstellungen, weil die Oberfläche beeinflusst, wie Licht gerendert wird.
Extrusions‑ oder Tiefeneinstellungen, weil einer flachen Form Dicke fehlt.

Das folgende Beispiel erzeugt ein Rechteck, fügt dem Vordergrund Text hinzu, wendet 3D‑Formatierung an, speichert die Präsentation als PPTX und rendert die Folie zu einem PNG‑Bild.

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

Das gerenderte Folienbild zeigt das Rechteck als dicken 3D‑Block:

Gerendertes blaues 3D‑Rechteck mit weißem 3D‑Text auf der Vorderseite

Form mit der Kamera drehen

In PowerPoint wird die 3D‑Drehung über das Fenster 3‑D‑Drehung konfiguriert. Die X‑, Y‑ und Z‑Drehwerte entsprechen der Drehung, die Sie über die Kamera‑API festlegen.

PowerPoint‑Fenster 3‑D‑Drehung mit hervorgehobenen X‑, Y‑ und Z‑Werten

In Aspose.Slides setzen Sie den Kameratyp und die Drehung über das 3D‑Format, das von shape.getThreeDFormat() zurückgegeben wird:

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

Verwenden Sie die Kamera, wenn Sie ändern müssen, wie der Betrachter das Objekt sieht. Sie ändert nicht die 2D‑Geometrie der Form auf der Folie, sondern den 3D‑Betrachtungswinkel, den PowerPoint und Aspose.Slides beim Rendern verwenden.

Extrusion und Tiefe hinzufügen

Extrusion lässt eine Form dick erscheinen, indem sie hinter die Vorderseite verlängert wird. In PowerPoint legt die Tiefen‑Steuerung diese sichtbare Dicke fest, und die Farb‑Steuerung bestimmt die Farbe der Seitenflächen.

PowerPoint‑Tiefen‑Steuerungen, abgebildet auf den Eigenschaften ExtrusionColor und ExtrusionHeight

Setzen Sie die Extrusionshöhe für die Dicke und die Extrusionsfarbe für die Seitenfarbe:

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

Verwenden Sie die Tiefeneinstellung, wenn Sie den PowerPoint‑Tiefenwert direkt bearbeiten oder mit Abschrägung, Material und Texteffekten kombinieren müssen. In vielen Form‑Szenarien ist die Extrusionshöhe die klarere Einstellung, da sie die sichtbare Extrusion direkt ausdrückt.

Verwenden von Farbverläufen oder Bildfüllungen mit 3D‑Effekten

3D‑Formatierung ist unabhängig von der Formfüllung. Sie können eine einfarbige Fläche, einen Farbverlauf, ein Muster oder eine Bildfüllung auf die Vorderseite anwenden und dennoch dieselben Kamera‑, Licht‑, Material‑ und Extrusions‑Einstellungen nutzen.

Dieses Beispiel wendet einen Farbverlauf auf die Form an und eine dunklere Extrusionsfarbe auf die Seiten:

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

Die gerenderte Ausgabe behält den Farbverlauf auf der Vorderseite bei und rendert die Extrusion separat:

Gerendertes 3D‑Rechteck mit blau‑zu‑orangefarbigem Farbverlauf und orangefarbener Extrusion

Um stattdessen eine Bildfüllung zu verwenden, fügen Sie das Bild zur Präsentation hinzu und weisen es der Formfüllung zu:

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

Das Bild wird auf der Vorderseite gerendert, während die Extrusion als 3D‑Seitenfläche dargestellt wird:

Gerendertes 3D‑Rechteck mit Fotofüllung auf der Vorderseite und orangefarbener Extrusion

3D‑Formatierung auf Text anwenden

Die 3D‑Formatierung einer Form betrifft den Formkörper. Die 3D‑Formatierung von Text betrifft den Textrahmen. Das ist nützlich für WordArt‑ähnliche Effekte, bei denen die Buchstaben selbst Extrusion, Material, Beleuchtung und Kamera‑Einstellungen benötigen.

Das folgende Beispiel erzeugt Text mit einer Musterfüllung, wendet eine WordArt‑Transformation an und konfiguriert 3D‑Einstellungen auf 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();
}

Der Text wird als gekrümmte, extrudierte 3D‑Schrift gerendert:

Gerenderter 3D‑Text mit einem bogenförmigen WordArt‑Effekt, orangefarbener Mustereffekt und dunkler Extrusion

Export‑ und Rendering‑Verhalten

Aspose.Slides bewahrt 3D‑Formatierung beim Speichern in PowerPoint‑Formate wie PPTX. Beim Rendern oder Exportieren in feste Layout‑Formate wird die 3D‑Szene rasterisiert bzw. in das Ergebnis als 2D‑Darstellung gezeichnet. Das gilt beim Rendern von Folien zu PNG, beim Export zu PDF, zu HTML oder beim Erzeugen von Frames für die Video‑Konvertierung.

Beachten Sie folgende Punkte:

Exportierte Bilder und PDFs sind nicht interaktiv. Das Objekt kann nach dem Export nicht vom Betrachter gedreht werden.
Das endgültige Aussehen hängt von der Kombination aus Kamera, Licht‑Rig, Material, Extrusion, Füllung und Folien‑Skalierung ab.
Wenn Sie vererbte oder themenbasierte Formatierungswerte einsehen möchten, lesen Sie die effektiven Form‑Eigenschaften.
Einige Ausgabeformate können die editierbare PowerPoint‑3D‑Formatierung nicht speichern. In diesen Formaten wird das visuelle Ergebnis gerendert, nicht als editierbare 3D‑Einstellungen erhalten.

FAQ

Kann Aspose.Slides interaktive 3D‑Präsentationen erstellen?

Aspose.Slides erstellt und rendert PowerPoint‑3D‑Effekte für Formen und Text. Es macht exportierte Bilder, PDFs oder HTML‑Seiten jedoch nicht zu interaktiven 3D‑Szenen, die ein Betrachter drehen kann. In PPTX bleibt die 3D‑Formatierung in PowerPoint editierbar, sofern das Format sie unterstützt.

Was ist der Unterschied zwischen einem 3D‑Modell und einem 3D‑Effekt?

Ein 3D‑Modell ist ein separates 3D‑Objekt, das in eine Präsentation eingefügt wird. Ein 3D‑Effekt ist eine Formatierung, die auf eine reguläre PowerPoint‑Form oder -Text angewendet wird, z. B. Drehung, Extrusion, Abschrägung, Beleuchtung und Material. Dieser Artikel behandelt 3D‑Effekte.

Welche Einstellungen sind für eine sichtbare 3D‑Form erforderlich?

Mindestens müssen Sie eine Kameradrehung und entweder Extrusion oder Tiefe festlegen. In der Praxis sollte zudem ein Licht‑Rig und ein Material gesetzt werden, damit die gerenderten Flächen klare Highlights und Schatten aufweisen.

Kann ich 3D‑Effekte sowohl auf Formen als auch auf Text anwenden?

Ja. Verwenden Sie Shape.getThreeDFormat() für den Formkörper und TextFrameFormat.getThreeDFormat() für Text.

Werden 3D‑Effekte beim Export zu Bildern, PDF, HTML oder Video‑Frames angezeigt?

Ja. Aspose.Slides rendert 3D‑Effekte beim Erzeugen von Folienbildern, PDF‑Ausgaben, HTML‑Ausgaben und Frames für die Videokonvertierung. Die exportierte Ausgabe enthält das gerenderte Erscheinungsbild, nicht ein editierbares 3D‑Objekt.

Kann ich die finalen 3D‑Werte nach Vererbung und Themen‑Einstellungen auslesen?

Ja. Verwenden Sie die effektiven Formatierungs‑APIs, die in Shape Effective Properties beschrieben sind, um die endgültigen Kamera‑, Licht‑Rig‑, Abschrägungs‑ und zugehörigen 3D‑Werte zu lesen.

PowerPoint-Animation Bildverarbeitung mit dem Modern API verbessern