css - 带有 css 的 JavaFx 样式 3D 对象

Question

我知道可以使用 Css 在 JavaFx 中设置 2D 元素的样式。我想知道是否有可能对 3D 对象实现相同的效果。

我认为让样式代码远离 java(逻辑)代码是一种很好的做法。

问题:谁能提供一些示例代码，其中 JavaFx 中的 3D 对象的样式是用 Css 完成的？

谢谢。

Answer 1

JavaFX 的 CSS 功能主要用于控件(2D)的样式。

通常，您不会使用 CSS 设置 3D 对象的样式。相反，你 load the objects up from mesh models .这些基于 MeshView 的 3D 对象或其他Shape3D对象不能不使用 CSS 设置样式(至少就做任何有用的样式而言)。例如，您不能使用 CSS 设置 Shape3D 的颜色样式，因为形状的颜色是通过光照和形状 material 确定的。 ，它们都不能使用 CSS 设置样式。还有其他格式用于描述 3D 模型(例如 obj、STL 等)，它们是专门为 3D 设计的，并且提供了比 CSS 更好的样式化 3D 对象的替代方法。

如果您拍摄 2D 场景并在 3D 空间中显示它们，则可以使用 CSS 设置 2D 场景的样式。这是一个例子。不过，我不认为这真的是您要找的东西。

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.image.*;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;
import javafx.scene.transform.Rotate;
import javafx.stage.Stage;

public class ThreeDStyle extends Application {
    @Override
    public void start(Stage stage) {
        // create label.
        final Label label = new Label(TEXT);
        label.setGraphic(new ImageView(new Image(IMAGE_LOC)));
        label.setStyle(DEFAULT_STYLE);

        // create 3D rotation transform on label.
        Rotate rotate = new Rotate(-30, Rotate.Y_AXIS);
        label.getTransforms().setAll(
            rotate
        );

        // layout scene.
        VBox root = new VBox(10,
                createControls(label, rotate),
                new Group(label)
        );
        root.setStyle("-fx-background-color: null; -fx-padding: 10px;");

        // create a 3D scene with perspective capability.
        Scene scene = new Scene(root, 525, 400, true, SceneAntialiasing.BALANCED);
        scene.setCamera(new PerspectiveCamera());
        scene.setFill(Color.MIDNIGHTBLUE);
        stage.setScene(scene);

        stage.show();
    }

    private Node createControls(Label label, Rotate rotate) {
        TextArea style = new TextArea(label.getStyle());

        Button apply = new Button("Apply Style");
        apply.setMinSize(Button.USE_PREF_SIZE, Button.USE_PREF_SIZE);
        apply.setDefaultButton(true);
        apply.setOnAction(event -> label.setStyle(style.getText()));

        Slider rotateSlider = new Slider(0, 60, rotate.getAngle() * -1);
        rotate.angleProperty().bind(rotateSlider.valueProperty().multiply(-1));

        VBox controlPanel = new VBox(10,
                new HBox(10, style, apply),
                new HBox(new Label("Rotate"), rotateSlider)
        );
        controlPanel.setPadding(new Insets(10));
        controlPanel.setStyle("-fx-background-color: antiquewhite;");

        return controlPanel;
    }

    private static final String TEXT =
            "O for a Muse of fire, that would ascend\n" +
            "The brightest heaven of invention,\n" +
            "A kingdom for a stage, princes to act\n" +
            "And monarchs to behold the swelling scene!\n" +
            "Then should the warlike Harry, like himself,\n" +
            "Assume the port of Mars; and at his heels,\n" +
            "Leash'd in like hounds, should famine, sword and fire\n" +
            "Crouch for employment";

    private static final String IMAGE_LOC =
            "http://ia.media-imdb.com/images/M/MV5BMTI1ODg1Mjk5NF5BMl5BanBnXkFtZTcwNzQyNjUxMQ@@._V1_SX214_AL_.jpg";

    private static final String DEFAULT_STYLE =
            "-fx-background-color: mediumseagreen;\n" +
            "-fx-background-radius: 10px;\n" +
            "-fx-padding: 10px;\n" +
            "-fx-graphic-text-gap: 10px;\n" +
            "-fx-font-family: 'American Typewriter';\n" +
            "-fx-font-size: 18px;";

    public static void main(String[] args) {
        launch(args);
    }
}