Maak 3D‑effecten in presentaties met Node.js

Overzicht

Aspose.Slides voor Node.js via Java kan 3D‑opmaak in PowerPoint‑stijl voor vormen en tekst maken, bewerken, behouden en weergeven. Dit artikel behandelt 3D‑effecten zoals rotatie, extrusie, bevels, verlichting, materiaal, verlopen of afbeeldingsvullingen en 3D‑tekst.

Dit artikel gaat over 3D‑opmaak‑effecten op PowerPoint‑vormen en -tekst. Het gaat niet over het invoegen of bewerken van afzonderlijke 3D‑modellen. Wanneer je een dia exporteert naar een afbeelding, PDF of HTML, rendert Aspose.Slides die 3D‑effecten in de geëxporteerde 2D‑output.

3D‑opmaakconcepten

Gebruik Shape.getThreeDFormat() om 3D‑opmaak op een vorm toe te passen. Het geretourneerde ThreeDFormat.‑object beheert de 3D‑scene voor die vorm.

Voor tekst, gebruik TextFrameFormat.getThreeDFormat(). Hiermee wordt 3D‑opmaak toegepast op het tekstframe in plaats van op het vormlichaam.

De belangrijkste API‑leden zijn:

API‑lid	Wat het regelt	Wanneer te gebruiken
getCamera	Uitzichtspunt, vooraf ingestelde cameratype, rotatie, zoom en perspectief.	Draai het object in de 3D‑ruimte of stem overeen met een PowerPoint‑3D‑rotatie‑preset.
getLightRig	Lichtpreset, richting en lichtrotatie.	Verander hoe accenten en schaduwen verschijnen op het 3D‑oppervlak.
getMaterial and setMaterial	Oppervlaktmateriaal, zoals vlak, mat, plastic of metaal.	Laat dezelfde geometrie er platter, zachter, glanzender of metalen uitzien.
getExtrusionHeight and setExtrusionHeight	Hoe ver de vorm naar achteren uitsteekt vanaf de voorzijde.	Zet een platte vorm om in een duidelijk dik 3D‑object.
getExtrusionColor	Kleur van de geëxtrudeerde zijkanten.	Maak diepte zichtbaar of stem de zijkleur af op de voorvulling.
getDepth and setDepth	Extra 3D‑diepte gebruikt door PowerPoint‑3D‑opmaak.	Fijn afstemmen van diepte voor vormen of tekst, vooral in combinatie met bevel‑ en materiaalinstellingen.
getBevelTop and getBevelBottom	Verhoogde of afgeronde randen op de voor- en achterkant van de vorm.	Voeg een verzachte of gevormde rand toe in plaats van een scherpe vlakke kant.
getContourColor, getContourWidth, and setContourWidth	Omranding rond het 3D‑object.	Benadruk de objectgrens in de gerenderde output.

Maak een 3D‑vorm

Een vorm heeft doorgaans vier soorten instellingen nodig voordat hij er overtuigend 3D uitziet:

Camerainstellingen, omdat de standaard vooraanzicht de extrusie kan verbergen.
Verlichtingsinstellingen, omdat verlichting de gezichten en zijkanten leesbaar maakt.
Materiaalinstellingen, omdat het oppervlak bepaalt hoe licht wordt weergegeven.
Extrusie‑ of diepte‑instellingen, omdat een platte vorm dikte nodig heeft.

Het volgende voorbeeld maakt een rechthoek, voegt tekst toe aan de voorzijde, past 3D‑opmaak toe, slaat de presentatie op als PPTX en rendert de dia naar een PNG‑afbeelding.

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

De gerenderde dia‑afbeelding toont de rechthoek als een dikke 3D‑blok:

Gerenderde blauwe 3D‑rechthoek met witte 3D‑tekst op de voorzijde

Een vorm roteren met de camera

In PowerPoint wordt 3D‑rotatie geconfigureerd via het venster 3‑D‑rotatie. De X-, Y- en Z‑rotatiewaarden komen overeen met de rotatie die je instelt via de camera‑API.

PowerPoint‑venster 3‑D‑rotatie met gemarkeerde X‑, Y‑ en Z‑rotatiewaarden

In Aspose.Slides stel je het cameratype en de rotatie in via de 3D‑opmaak die wordt geretourneerd door shape.getThreeDFormat():

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

Gebruik de camera wanneer je wilt wijzigen hoe de kijker het object ziet. Het verandert de 2D‑vormgeometrie op de dia niet. Het wijzigt het 3D‑viewpoint dat PowerPoint en Aspose.Slides gebruiken bij het renderen.

Extrusie en diepte toevoegen

Extrusie maakt een vorm dikker door deze achter de voorzijde uit te breiden. In PowerPoint bepaalt de diepte‑instelling deze zichtbare dikte, en de kleur‑instelling bepaalt de kleur van de zijkanten.

PowerPoint‑diepte‑instellingen gekoppeld aan extrusiekleur‑ en extrusiehoogte‑eigenschappen

Stel de extrusiehoogte in voor de dikte en de extrusiekleur voor de kleur van de zijkanten:

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

Gebruik de diepte‑instelling wanneer je direct met de diepte‑waarde van PowerPoint wilt werken of diepte wilt combineren met bevel, materiaal en texteffecten. In veel vormen‑scenario’s is de extrusiehoogte de duidelijkere instelling omdat deze de zichtbare extrusie rechtstreeks uitdrukt.

Verlopen‑ of afbeeldingvullingen gebruiken met 3D‑effecten

3D‑opmaak staat los van de vormvulling. Je kunt een effen kleur, verloop, patroon of afbeeldingvulling op de voorzijde toepassen en toch dezelfde camera-, licht-, materiaal- en extrusie‑instellingen gebruiken.

Dit voorbeeld past een verlopen vulling toe op de vorm en een donkerdere extrusiekleur op de zijkanten:

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

Gerenderde 3D‑rechthoek met een blauw‑naar‑oranje verlopen vulling en oranje extrusie

Om in plaats daarvan een afbeeldingvulling te gebruiken, voeg je de afbeelding toe aan de presentatie en ken je deze toe aan de vormvulling:

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

Gerenderde 3D‑rechthoek met een foto‑vulling op de voorzijde en oranje extrusie

3D‑opmaak toepassen op tekst

3D‑opmaak van een vorm beïnvloedt het vormlichaam. 3D‑opmaak van tekst beïnvloedt het tekstframe. Dit is handig voor WordArt‑achtige effecten waarbij de letters zelf extrusie, materiaal, verlichting en camera‑instellingen nodig hebben.

Het volgende voorbeeld maakt tekst met een patroonvulling, past een WordArt‑transformatie toe en configureert 3D‑instellingen op 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();
}

Gerenderde 3D‑tekst met een boog‑WordArt‑transformatie, oranje patroonvulling en donkere extrusie

Export‑ en rendergedrag

Aspose.Slides behoudt 3D‑opmaak bij het opslaan in PowerPoint‑formaten zoals PPTX. Bij het renderen of exporteren naar vaste‑layout‑formaten wordt de 3D‑scene gerasterd of in de output getekend als een 2D‑resultaat. Dit geldt wanneer je dia’s rendert naar PNG, exporteert naar PDF, exporteert naar HTML, of frames genereert voor video‑conversie.

Houd de volgende punten in gedachten:

Geëxporteerde afbeeldingen en PDF’s zijn niet interactief. Het object kan na export niet door de kijker worden gedraaid.
Het uiteindelijke uiterlijk hangt af van de combinatie van camera, lichtopstelling, materiaal, extrusie, vulling en schaling van de dia.
Als je de geërfde of themagebaseerde opmaakwaarden wilt inspecteren, lees dan de effectieve vormeigenschappen.
Sommige uitvoerformaten kunnen de bewerkbare PowerPoint‑3D‑opmaak niet opslaan. In die formaten wordt het visuele resultaat gerenderd in plaats van bewaard als bewerkbare 3D‑instellingen.

FAQ

Kan Aspose.Slides interactieve 3D‑presentaties maken?

Aspose.Slides creëert en rendert PowerPoint‑3D‑effecten voor vormen en tekst. Het maakt geëxporteerde afbeeldingen, PDF’s of HTML‑pagina’s geen interactieve 3D‑scènes die een kijker kan roteren. In PPTX blijft de 3D‑opmaak bewerkbaar in PowerPoint wanneer het formaat dit ondersteunt.

Wat is het verschil tussen een 3D‑model en een 3D‑effect?

Een 3D‑model is een afzonderlijk 3D‑object dat in een presentatie wordt ingevoegd. Een 3D‑effect is opmaak die wordt toegepast op een gewone PowerPoint‑vorm of -tekst, zoals rotatie, extrusie, bevel, verlichting en materiaal. Dit artikel behandelt 3D‑effecten.

Welke instellingen zijn vereist voor een zichtbare 3D‑vorm?

Als minimum moet je een camerarotatie en ofwel extrusie of diepte instellen. In de praktijk stel je ook een lichtopstelling en materiaal in zodat de gerenderde gezichten duidelijke accenten en schaduwen hebben.

Kan ik 3D‑effecten toepassen op zowel vormen als tekst?

Ja. Gebruik Shape.getThreeDFormat() voor het vormlichaam en TextFrameFormat.getThreeDFormat() voor tekst.

Zullen 3D‑effecten verschijnen bij het exporteren naar afbeeldingen, PDF, HTML of videoframes?

Ja. Aspose.Slides rendert 3D‑effecten bij het produceren van dia‑afbeeldingen, PDF‑output, HTML‑output en frames die worden gebruikt voor videoconversie. De geëxporteerde output bevat het gerenderde uiterlijk, niet een bewerkbaar 3D‑object.

Kan ik de uiteindelijke 3D‑waarden lezen nadat er overerving en themainstellingen zijn toegepast?

Ja. Gebruik de effectieve opmaak‑API’s beschreven in Shape Effective Properties om de definitieve camera-, lichtopstelling‑, bevel‑ en gerelateerde 3D‑waarden te lezen.

Verbeter PowerPoint-presentaties met animaties in JavaScript Verbeter beeldverwerking met de Modern API