如何在 threejs 和 PyQt 应用程序中使背景透明？

Question

我正在使用 threejs 在我的 PyQt 应用程序中显示一些 3D 对象。经过一番搜索，我能够显示一个立方体。我想要做的是从场景中删除背景，即使其透明，以便我们可以看到设置为应用程序背景颜色的蓝色。我不知道该怎么做。请帮忙

main.py

from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
from PyQt5.QtWebEngineCore import *
from PyQt5.QtWebEngineWidgets import *
import sys

class QtSchemeHandler(QWebEngineUrlSchemeHandler):
    def requestStarted(self, job):
        request_url = job.requestUrl()
        request_path = request_url.path()
        file = QFile('.' + request_path)
        file.setParent(job)
        job.destroyed.connect(file.deleteLater)
        file_info = QFileInfo(file)
        mime_database = QMimeDatabase()
        mime_type = mime_database.mimeTypeForFile(file_info)
        job.reply(mime_type.name().encode(), file)


class MainWindow(QWidget):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.setStyleSheet('background-color: blue;')
        self.verticalLayout = QVBoxLayout()
        self.setLayout(self.verticalLayout)
        self.browser = QWebEngineView()
        self.scheme_handler = QtSchemeHandler()
        self.browser.page().profile().installUrlSchemeHandler(
            b"qt", self.scheme_handler
        )
        url = QUrl("qt://main")
        url.setPath("/index.html")
        self.browser.load(url)
        self.verticalLayout.addWidget(self.browser)
        self.browser.loadFinished.connect(self.show)


if __name__ == "__main__":
    scheme = QWebEngineUrlScheme(b"qt")
    scheme.setFlags(QWebEngineUrlScheme.CorsEnabled)
    QWebEngineUrlScheme.registerScheme(scheme)
    app = QApplication(sys.argv)
    window = MainWindow()
    sys.exit(app.exec_())

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three js earth</title>
    <style>
        body{
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    
    <canvas class="webgl"></canvas>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" integrity="sha512-dLxUelApnYxpLt6K2iomGngnHO83iUvZytA3YjDUCjT0HDOHKXnVYdf3hU4JjM8uEhxf9nD1/ey98U3t2vZ0qQ==" crossorigin="anonymous"></script>
    <script type="module">
        
        const canvas = document.querySelector('.webgl');

        // scene setup
        const scene = new THREE.Scene();

        // camera setup
        const fov = 60;
        const aspect = window.innerWidth / window.innerHeight;
        const near = 0.1;
        const far = 10;
        const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
        camera.position.set(0, 0, 3)
        scene.add(camera);
 
        // renderer setup
        const renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});

        // 3D Object
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const material = new THREE.MeshPhongMaterial({color: 0xFF0000});
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        // point light
        const pointLight = new THREE.PointLight(0xffffff, 1)
        pointLight.position.set(0, 0, 5);
        scene.add(pointLight);

        // handling resizing
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
            render();
        }, false);

        // main loop
        function render(time) {
            cube.rotation.x -= 0.005;
            cube.rotation.y -= 0.005;
            renderer.render(scene, camera);
            requestAnimationFrame(render);
        }
        render();

  </script>
</body>

</html>

Answer 1

首先，将 QWebEngineView 的 page 设置为透明背景。

在main.py中：

    ...
    self.scheme_handler = QtSchemeHandler()
+++ self.browser.page().setBackgroundColor(Qt.GlobalColor.transparent)      
    self.browser.page().profile().installUrlSchemeHandler(
      b"qt", self.scheme_handler
    )
    ...

然后，将 HTML 页面的背景设置为透明。

在index.html中：

    ...
    <style>
      body{
        margin: 0;
        overflow: hidden;
+++     background: rgba(0, 0, 0, 0);
      }
    </style>
    ...

最后，设置 Three.js WebGLRenderer 使用透明背景。

还在index.html:

    // renderer setup
    const renderer = new THREE.WebGLRenderer({
      canvas: canvas, 
      antialias: true, 
+++   alpha: true
    });

如何在 threejs 和 PyQt 应用程序中使背景透明？

how to make background transparent in threejs and PyQt app?

python

pyqt

three.js

pyqt5