我正在使用threejs在我的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">
<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>
<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>
