如何在 QML 中制作 3D 文本

Question

使用Qt Creator 4.9.1(基于Qt 5.12.3(，我正在尝试通过QML项目制作一个简单的3D文本，如"Hello 3D"。

我已经搜索了很多，但不幸的是没有找到一个简单的例子。在这种情况下，文档也很糟糕。

这是我用于该文本的代码：

import QtQuick 2.12
import QtQuick.Window 2.12
import Qt3D.Extras 2.12
Window {
    visible: true
    width: 640
    height: 480
ExtrudedTextMesh {
        depth: 2.5
        font.family: "Helvetica"
        text: "Hello 3D" 
    }
}

问题是应用程序的窗口上没有显示任何文本！
有没有办法解决这个问题？

Answer 1

一个简单的方法是使用带有sourceItem集合的Texture。这将允许您使用所需的任何 2D 渲染，例如带有居中Text的Rectangle：

Texture {
    sourceItem: Rectangle {
        width: 150
        height: 150
        color: Qt.rgba(0.2, 0.4, 0.7, 0.75)
        Text {
            anchors.centerIn: parent
            text: "Hello 3D"
            color: "white"
            font.pointSize: 12
        }
    }
}

在下面的示例中，我将上述Texture渲染到旋转的 3D 立方体上：

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick3D
Page {
    anchors.fill: parent
    background: Rectangle { color: "#848895" }
    Node {
        id: standAloneScene
        DirectionalLight { ambientColor: Qt.rgba(1.0, 1.0, 1.0, 1.0) }
        Node {
            id: node
            Model {
                id: model
                source: "#Cube"
                materials: [
                    DefaultMaterial {
                        diffuseMap: Texture {
                            sourceItem: Rectangle {
                               width: 150
                               height: 150
                               color: Qt.rgba(0.2, 0.4, 0.7, 0.75)
                               Text {
                                   anchors.centerIn: parent
                                   text: "Hello 3D"
                                   color: "white"
                                   font.pointSize: 12
                               }
                            }
                        }
                    }
                ]
            }
        }
        OrthographicCamera {
            id: cameraOrthographicFront
            y: 800; z: 1000
            Component.onCompleted: lookAt(node)
        }
    }
    View3D {
        anchors.fill: parent
        importScene: standAloneScene
        camera: cameraOrthographicFront
    }
    NumberAnimation {
        target: model
        property: "eulerRotation.y"
        loops: Animation.Infinite
        running: true
        from: 720; to: 0
        duration: 10000
    }
}

您可以在线试用！