Отображение текста на лицевой стороне блока в зависимости от видимой области при увеличении/уменьшении масштаба

По первому вопросу, по поводу "скачка", который можно заметить именно тогда, когда после прокрутки выкладывается новый текстовый элемент:

Покопавшись в коде, я заметил, что UIPane3D имеет VBox textPane, который содержит различные узлы Text. Каждый раз, когда вызывается updateContent, он пытается добавить текстовый узел, но проверяет, что высота vbox всегда ниже высоты панели, иначе узел будет удален:

    for (Text textNode : infoTextValues) {
        textPane.getChildren().add(textNode);
        textPane.autosize();
        if (textPane.getHeight() > getHeight()) {
            textPane.getChildren().remove(textNode);
            textPane.autosize();
            break;
        }
    }

Хотя это в принципе правильно, но когда вы добавляете ноду в сцену, вы не можете получить textPane.getHeight() сразу, так как она еще не выложена, и вам нужно ждать до следующего импульса. Вот почему при следующей прокрутке высота будет правильной, а ограничительная рамка правильно расположена.

Один из способов заставить макет и получить правильную высоту textNode — это принудительно использовать CSS и проход макета:

    for (Text textNode : infoTextValues) {
        textPane.getChildren().add(textNode);

        // force css and layout
        textPane.applyCss();
        textPane.layout();

        textPane.autosize();
        if (textPane.getHeight() > getHeight()) {
            textPane.getChildren().remove(textNode);
            textPane.autosize();
            break;
        }
    }

Обратите внимание, что:

Этот метод [applyCss] обычно не нужно вызывать напрямую, но его можно использовать в сочетании с Parent.layout() для определения размера узла перед следующим импульсом или если сцена не находится в сцене.

Что касается второго вопроса, о другом решении для добавления текста в 3D-форму.

Действительно, разместить (2D) текст поверх 3D-фигуры довольно сложно и требует сложной математики (кстати, в проекте это сделано довольно хорошо).

Существует альтернатива, позволяющая избежать прямого использования 2D-узлов.

Именно в предыдущем вопросе Я «записал» изображение, которое позже использовал в качестве диффузной карты материала 3D-формы.

Встроенное 3D Box помещает одно и то же изображение на каждое лицо, так что это не сработает. Мы можем реализовать трехмерную призму или использовать узел CuboidMesh из библиотеки FXyz3D.

Замена Box в UIPaneBoxGroup:

final CuboidMesh contentShape;
UIPane3D displaypane = null;
PhongMaterial shader = new PhongMaterial();
final Color pColor;

public UIPaneBoxGroup(final double pWidth, final double pHeight, final double pDepth, final Color pColor) { 
    contentShape = new CuboidMesh(pWidth, pHeight, pDepth);
    this.pColor = pColor;
    contentShape.setMaterial(shader);
    getChildren().add(contentShape);
    addInfoUIPane();
}

и добавляем метод generateNet:

private Image generateNet(String string) {

    GridPane grid = new GridPane();
    grid.setAlignment(Pos.CENTER);

    Label label5 = new Label(string);
    label5.setFont(Font.font("Consolas", FontWeight.BLACK, FontPosture.REGULAR, 40));
    GridPane.setHalignment(label5, HPos.CENTER);

    grid.add(label5, 3, 1);

    double w = contentShape.getWidth() * 10; // more resolution
    double h = contentShape.getHeight() * 10;
    double d = contentShape.getDepth() * 10;
    final double W = 2 * d + 2 * w;
    final double H = 2 * d + h;

    ColumnConstraints col1 = new ColumnConstraints();
    col1.setPercentWidth(d * 100 / W);
    ColumnConstraints col2 = new ColumnConstraints();
    col2.setPercentWidth(w * 100 / W);
    ColumnConstraints col3 = new ColumnConstraints();
    col3.setPercentWidth(d * 100 / W);
    ColumnConstraints col4 = new ColumnConstraints();
    col4.setPercentWidth(w * 100 / W);
    grid.getColumnConstraints().addAll(col1, col2, col3, col4);

    RowConstraints row1 = new RowConstraints();
    row1.setPercentHeight(d * 100 / H);
    RowConstraints row2 = new RowConstraints();
    row2.setPercentHeight(h * 100 / H);
    RowConstraints row3 = new RowConstraints();
    row3.setPercentHeight(d * 100 / H);
    grid.getRowConstraints().addAll(row1, row2, row3);
    grid.setPrefSize(W, H);
    grid.setBackground(new Background(new BackgroundFill(pColor, CornerRadii.EMPTY, Insets.EMPTY)));
    new Scene(grid);
    return grid.snapshot(null, null);
}

Теперь весь код, связанный с 2D, можно удалить (включая displaypane), и после события прокрутки получить изображение:

public void refreshBomUIPane() {        
    Image net = generateNet(displaypane.getText());
    shader.setDiffuseMap(net);
}

где в UIPane3D:

public String getText() {
    return infoTextKeys.stream().collect(Collectors.joining("\n"));
}

Я также удалил ограничивающую рамку, чтобы получить это изображение:

Я не экспериментировал с количеством текстовых узлов, которые можно добавить в VBox, с размером шрифта и со стратегией предотвращения создания изображений при каждой прокрутке: это следует делать только при изменении текста. Таким образом, текущий подход довольно медленный, но его можно заметно улучшить, поскольку для каждого поля есть только три возможных изображения.