如何在JavaFX中创建相对面带有不同同尺寸图片的盒子？

核心需求回顾 #

需要创建一个可旋转的盒子，两个相对面显示不同的指定图片，其余四个面为白色，类似书籍的正反封面。

最优方案：直接为Box的单个面设置纹理 #

JavaFX的PhongMaterial支持为Box的六个独立面（FRONT/BACK/LEFT/RIGHT/TOP/BOTTOM）分别设置纹理，无需额外节点或纹理合并，这是最简洁高效的实现方式。

代码示例

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.paint.Color;
import javafx.scene.paint.PhongMaterial;
import javafx.scene.shape.Box;
import javafx.scene.shape.CullFace;
import javafx.stage.Stage;

public class BookBox extends Application {
    @Override
    public void start(Stage stage) {
        // 盒子尺寸：宽、高、厚度
        double bookWidth = 200;
        double bookHeight = 300;
        double bookDepth = 20;

        Box bookBox = new Box(bookWidth, bookHeight, bookDepth);
        PhongMaterial material = new PhongMaterial(Color.WHITE);

        // 加载正反封面图片（替换为你的本地图片路径）
        Image frontCover = new Image("front_cover.png");
        Image backCover = new Image("back_cover.png");

        // 为正反两面绑定对应纹理
        material.setDiffuseMap(Box.Face.FRONT, frontCover);
        material.setDiffuseMap(Box.Face.BACK, backCover);

        // 关闭背面剔除，确保旋转时背面纹理正常显示
        bookBox.setCullFace(CullFace.NONE);
        bookBox.setMaterial(material);

        Group root = new Group(bookBox);
        Scene scene = new Scene(root, 600, 600);
        stage.setTitle("Book Box");
        stage.setScene(scene);
        stage.show();
    }

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

你提到的两种方案实现与对比 #

方案1：双MeshView叠加（盒子主体+两个独立封面）

通过一个白色Box作为主体，再用两个Plane作为封面贴在盒子的正反面上，逻辑直观，适合新手。

代码示例

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.paint.Color;
import javafx.scene.paint.PhongMaterial;
import javafx.scene.shape.Box;
import javafx.scene.shape.Plane;
import javafx.stage.Stage;

public class BookBoxDualMesh extends Application {
    @Override
    public void start(Stage stage) {
        double bookWidth = 200;
        double bookHeight = 300;
        double bookDepth = 20;

        // 白色盒子主体
        Box bookBody = new Box(bookWidth, bookHeight, bookDepth);
        bookBody.setMaterial(new PhongMaterial(Color.WHITE));

        // 正面封面
        Plane frontCover = new Plane(bookWidth, bookHeight);
        PhongMaterial frontMat = new PhongMaterial();
        frontMat.setDiffuseMap(new Image("front_cover.png"));
        frontCover.setMaterial(frontMat);
        frontCover.setTranslateZ(bookDepth / 2); // 贴在盒子正面

        // 背面封面（旋转180度让图片朝外）
        Plane backCover = new Plane(bookWidth, bookHeight);
        PhongMaterial backMat = new PhongMaterial();
        backMat.setDiffuseMap(new Image("back_cover.png"));
        backCover.setMaterial(backMat);
        backCover.setTranslateZ(-bookDepth / 2); // 贴在盒子背面
        backCover.setRotate(180);

        Group root = new Group(bookBody, frontCover, backCover);
        Scene scene = new Scene(root, 600, 600);
        stage.setTitle("Dual Mesh Book Box");
        stage.setScene(scene);
        stage.show();
    }

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

方案2：合并纹理为单张后使用单个MeshView

需要提前将两张封面图片合并为一张大图，再手动调整盒子正反两面的纹理坐标，实现分别显示不同区域。这种方式较繁琐，仅适合有批量优化需求的场景。

代码示例

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.paint.Color;
import javafx.scene.paint.PhongMaterial;
import javafx.scene.shape.Box;
import javafx.scene.shape.CullFace;
import javafx.stage.Stage;

public class BookBoxMergedTexture extends Application {
    @Override
    public void start(Stage stage) {
        double bookWidth = 200;
        double bookHeight = 300;
        double bookDepth = 20;

        Box bookBox = new Box(bookWidth, bookHeight, bookDepth);
        PhongMaterial material = new PhongMaterial(Color.WHITE);

        // 加载合并后的纹理（正面图在左，背面图在右，宽为2*bookWidth，高为bookHeight）
        Image mergedCovers = new Image("merged_covers.png");
        material.setDiffuseMap(mergedCovers);

        // 设置正面纹理坐标：取合并图左半部分
        bookBox.getFaceElement(Box.Face.FRONT).getTexCoords().setAll(
                0.0f, 1.0f,
                0.5f, 1.0f,
                0.5f, 0.0f,
                0.0f, 0.0f
        );

        // 设置背面纹理坐标：取合并图右半部分，并翻转适配背面方向
        bookBox.getFaceElement(Box.Face.BACK).getTexCoords().setAll(
                1.0f, 1.0f,
                0.5f, 1.0f,
                0.5f, 0.0f,
                1.0f, 0.0f
        );

        bookBox.setCullFace(CullFace.NONE);
        bookBox.setMaterial(material);

        Group root = new Group(bookBox);
        Scene scene = new Scene(root, 600, 600);
        stage.setTitle("Merged Texture Book Box");
        stage.setScene(scene);
        stage.show();
    }

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

方案优劣对比 #

内容的提问来源于stack exchange，提问作者ArTist