Issue
I'm using threejs to show some 3D objects in my PyQt application. After a little searching, I was able to display a cube. What I want to do is remove the background from the scene, that is, make it transparent so that we can see the blue color that is set as the background color for the app. I have no idea how I should do this. Please help.
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>
Solution
First, set the QWebEngineView's page to have a transparent background.
In main.py:
...
self.scheme_handler = QtSchemeHandler()
+++ self.browser.page().setBackgroundColor(Qt.GlobalColor.transparent)
self.browser.page().profile().installUrlSchemeHandler(
b"qt", self.scheme_handler
)
...
Then, set the HTML page's background to transparent.
In index.html:
...
<style>
body{
margin: 0;
overflow: hidden;
+++ background: rgba(0, 0, 0, 0);
}
</style>
...
And finally, set the Three.js WebGLRenderer to use a transparent background.
Still in index.html:
// renderer setup
const renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: true,
+++ alpha: true
});
Answered By - Phil N.
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.