QT使用qt最小示例在webgl引擎中加载webgl

在WebGL引擎中使用Qt加载WebGL内容，可以通过Qt的WebEngine模块来实现。Qt WebEngine基于Chromium，能够很好地支持WebGL。以下是一个最小示例，展示如何在Qt应用程序中嵌入并加载一个包含WebGL内容的网页。

前提条件

安装Qt：确保你已经安装了Qt，并且包含了Qt WebEngine模块。你可以在安装Qt时选择相应的组件，或者通过Qt MaintenanceTool添加缺失的模块。
开发环境：确保你的开发环境已经配置好，可以编译和运行Qt应用程序。

步骤一：创建Qt项目

使用Qt Creator创建一个新的Qt Widgets应用程序项目。

步骤二：配置.pro文件

在你的项目文件（.pro）中添加WebEngine模块：

proQT += core gui webenginewidgets

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

TARGET = QtWebGLExample
TEMPLATE = app

SOURCES += main.cpp \
           mainwindow.cpp

HEADERS += mainwindow.h

步骤三：编写代码

mainwindow.h

cpp#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QWebEngineView>

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private:
    QWebEngineView *webView;
};
#endif // MAINWINDOW_H

mainwindow.cpp

cpp#include "mainwindow.h"

#include <QVBoxLayout>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    // 创建一个QWebEngineView
    webView = new QWebEngineView(this);

    // 设置要加载的URL，这里以一个包含WebGL内容的示例网页为例
    webView->setUrl(QUrl("https://threejs.org/examples/#webgl_geometry_cube"));

    // 设置为主窗口的中心部件
    setCentralWidget(webView);
}

MainWindow::~MainWindow()
{
}

main.cpp

cpp#include "mainwindow.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();
    return a.exec();
}

步骤四：编译和运行

在Qt Creator中编译并运行你的项目。你应该会看到一个窗口，其中加载了包含WebGL内容的网页。

说明

QWebEngineView：这是Qt WebEngine提供的用于显示网页的控件。
setUrl：用于设置要加载的网页URL。你可以将其替换为你自己的包含WebGL内容的网页URL。
threejs.org：这是一个流行的WebGL库，提供了许多示例。上面的URL指向一个包含3D立方体的示例。

进一步扩展

如果你需要在Qt应用程序中与WebGL内容进行交互，可以使用Qt WebEngine提供的JavaScript桥接功能。例如，你可以在C++代码中调用网页中的JavaScript函数，或者在网页中调用C++代码。

示例：从C++调用JavaScript

cpp// 在MainWindow.cpp中添加一个按钮，点击后调用JavaScript函数
#include <QPushButton>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    webView = new QWebEngineView(this);
    webView->setUrl(QUrl("https://threejs.org/examples/#webgl_geometry_cube"));

    QPushButton *button = new QPushButton("Call JavaScript", this);
    connect(button, &QPushButton::clicked, this, [this]() {
        webView->page()->runJavaScript("alert('Hello from C++!');");
    });

    QVBoxLayout *layout = new QVBoxLayout;
    layout->addWidget(webView);
    layout->addWidget(button);

    QWidget *centralWidget = new QWidget(this);
    centralWidget->setLayout(layout);
    setCentralWidget(centralWidget);
}

示例：从JavaScript调用C++

cpp// 在MainWindow.cpp中注册一个C++对象到JavaScript
#include <QWebChannel>

class WebEnginePage : public QWebEnginePage
{
    Q_OBJECT
public:
    WebEnginePage(QObject *parent = nullptr) : QWebEnginePage(parent) {}
};

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    webView = new QWebEngineView(this);
    WebEnginePage *page = new WebEnginePage(this);
    webView->setPage(page);

    // 设置JavaScript桥接
    QWebChannel *channel = new QWebChannel(this);
    page->setWebChannel(channel);
    channel->registerObject("bridge", this);

    webView->setUrl(QUrl("qrc:/index.html")); // 使用本地HTML文件

    setCentralWidget(webView);
}

// 在类中添加一个可以被JavaScript调用的槽函数
public slots:
    void jsCallCpp(const QString &message) {
        qDebug() << "JavaScript called C++ with message:" << message;
    }

在HTML文件中使用：

html<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Qt WebEngine Example</title>
    <script src="qrc:/qtwebchannel/qwebchannel.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            new QWebChannel(qt.webChannelTransport, function(channel) {
                window.bridge = channel.objects.bridge;
            });
        });

        function callCpp() {
            window.bridge.jsCallCpp("Hello from JavaScript!");
        }
    </script>
</head>
<body>
    <h1>Qt WebEngine Example</h1>
    <button onclick="callCpp()">Call C++</button>
</body>
</html>

这样，你就可以在Qt应用程序中实现C++与WebGL内容的双向交互。