[英]how to make background transparent in threejs and PyQt app?
我正在使用 threejs 在我的 PyQt 應用程序中顯示一些 3D 對象。 經過一番搜索,我能夠顯示一個立方體。 我想要做的是從場景中刪除背景,即使其透明,以便我們可以看到設置為應用程序背景顏色的藍色。 我不知道我應該怎么做。 請幫忙。
主程序
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
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.