Я использую threejs, чтобы показать некоторые 3D-объекты в моем приложении PyQt. После недолгих поисков мне удалось отобразить куб. Что я хочу сделать, так это удалить фон из сцены, то есть сделать его прозрачным, чтобы мы могли видеть синий цвет, который установлен в качестве цвета фона для приложения. Я понятия не имею, как мне это сделать. Пожалуйста помоги.
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>
Во-первых, установите для 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
});
я бы начал с изучения слоев / z-index с помощью css developer.mozilla.org/en-US/docs/Web/CSS/z-index, сделал слой html 0 и ваши три слоя холста js -1 (я думаю)