本文介绍了如何将WebGLRender背景设置为透明的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试着用THREE.NoBlending hack将对象放在CSS3DObjects前面。但是我只看到最新版本中没有CSS3DObject的黑色飞机（试过r65和r66）。我做的一个小例子如下所示：
index.html：
<！doctype html>
< script src =lib / three58.js>< / script>
< script src =lib / CSS3dRenderer.js>< / script>
< body>
< script>
var camera = new THREE.PerspectiveCamera（60，window.innerWidth / window.innerHeight，0.01，555）;
camera.position.z + = 20;
var rendererCSS = new THREE.CSS3DRenderer（）;
rendererCSS.setSize（window.innerWidth，window.innerHeight）;
rendererCSS.domElement.style.position ='absolute';
document.body.appendChild（rendererCSS.domElement）;
var rendererMain = new THREE.WebGLRenderer（）;
rendererMain.setSize（window.innerWidth，window.innerHeight）;
rendererMain.setClearColor（white，0）;
rendererMain.domElement.style.position ='绝对';
document.body.appendChild（rendererMain.domElement）;
var scene = new THREE.Scene（）;
var sceneCSS = new THREE.Scene（）;
var planeWidth = 15;
var planeHeight = 15;
$ b $ var planeMaterial = new THREE.MeshBasicMaterial（{
blending：THREE.NoBlending，
opacity：0.0，
transparent：true，
color：0x000000 ，
side：THREE.DoubleSide
}）;
var planeGeometry = new THREE.PlaneGeometry（planeWidth，planeHeight）;
var planeMesh = new THREE.Mesh（planeGeometry，planeMaterial）;
scene.add（planeMesh）;
var element = document.createElement（'iframe'）
var aspectRatio = planeHeight / planeWidth;
var elementWidth = 1024;
var elementHeight = elementWidth * aspectRatio;
element.src ='moo.html';
element.style.width = elementWidth +px;
element.style.height = elementHeight +px;
var objectCSS = new THREE.CSS3DObject（element）;
objectCSS.scale.x = planeWidth / elementWidth;
objectCSS.scale.y = planeHeight / elementHeight;
objectCSS.position = planeMesh.position;
objectCSS.rotation = planeMesh.rotation;
sceneCSS.add（objectCSS）;
var material = new THREE.MeshBasicMaterial（{color：0xff0000}）;
var mesh = new THREE.Mesh（new THREE.SphereGeometry（5.0，20.0，20.0），material）;
var mesh2 = new THREE.Mesh（new THREE.SphereGeometry（5.0，20.0，20.0），material）;
mesh.position.set（5，0，-1）;
mesh2.position.set（-8，0，-6）;
scene.add（mesh）; //前面
scene.add（mesh2）; //后面
animate（）;
函数animate（）{
requestAnimationFrame（animate）;
rendererMain.render（scene，camera）;
rendererCSS.render（sceneCSS，camera）;
}
< / script>
< / body>
<！DOCTYPE html>
< html>
< body style =background-color：purple>
< p align =center>< font color =limesize =150> hello world< / font> < / p为H.
< / body>
< / html>
这是结果：
修订58：
修订版66：
我试图理解为什么，这可能很简单。我无法在迁移中找到任何会以此方式改变行为的内容。
预先致谢。
解决方案
如果你想要一个透明的背景， WebGLRenderer ，你需要设置 alpha = true 在 WebGLRenderer 构造函数中。您可以设置清晰的颜色。
var renderer = new THREE.WebGLRenderer（{alpha：true}）;
renderer.setClearColor（0x00ff00，0.5）;
three.js r.66
I'm trying to put objects in front of CSS3DObjects with the THREE.NoBlending hack. But I only see the black plane without the CSS3DObject in the newest revisions (tried r65 and r66). A small example I made looks like this:
index.html:
<!doctype html>
<script src="lib/three58.js"></script>
<script src="lib/CSS3dRenderer.js"></script>
<body>
<script>
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 555);
camera.position.z += 20;
var rendererCSS = new THREE.CSS3DRenderer();
rendererCSS.setSize(window.innerWidth, window.innerHeight);
rendererCSS.domElement.style.position = 'absolute';
document.body.appendChild(rendererCSS.domElement);
var rendererMain = new THREE.WebGLRenderer();
rendererMain.setSize(window.innerWidth, window.innerHeight);
rendererMain.setClearColor("white", 0);
rendererMain.domElement.style.position = 'absolute';
document.body.appendChild(rendererMain.domElement);
var scene = new THREE.Scene();
var sceneCSS = new THREE.Scene();
var planeWidth = 15;
var planeHeight = 15;
var planeMaterial = new THREE.MeshBasicMaterial({
blending: THREE.NoBlending,
opacity : 0.0,
transparent : true,
color : 0x000000,
side : THREE.DoubleSide
});
var planeGeometry = new THREE.PlaneGeometry(planeWidth, planeHeight);
var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(planeMesh);
var element = document.createElement('iframe')
var aspectRatio = planeHeight / planeWidth;
var elementWidth = 1024;
var elementHeight = elementWidth * aspectRatio;
element.src = 'moo.html';
element.style.width = elementWidth + "px";
element.style.height = elementHeight + "px";
var objectCSS = new THREE.CSS3DObject(element);
objectCSS.scale.x = planeWidth / elementWidth;
objectCSS.scale.y = planeHeight / elementHeight;
objectCSS.position = planeMesh.position;
objectCSS.rotation = planeMesh.rotation;
sceneCSS.add(objectCSS);
var material = new THREE.MeshBasicMaterial({color: 0xff0000});
var mesh = new THREE.Mesh(new THREE.SphereGeometry(5.0, 20.0, 20.0), material);
var mesh2 = new THREE.Mesh(new THREE.SphereGeometry(5.0, 20.0, 20.0), material);
mesh.position.set(5, 0, -1);
mesh2.position.set(-8, 0, -6);
scene.add(mesh); // in front
scene.add(mesh2); // behind
animate();
function animate() {
requestAnimationFrame(animate);
rendererMain.render(scene, camera);
rendererCSS.render(sceneCSS, camera);
}
</script>
</body>
moo.html:
<!DOCTYPE html>
<html>
<body style="background-color: purple">
<p align="center"><font color="lime" size="150">hello world</font> </p>
</body>
</html>
This is the result:
Revision 58: http://i.imgur.com/tCszJ8X.jpg
Revision 66: http://i.imgur.com/kfppVwF.jpg
I've tried to understand why, it's probably something very simple. I can't find anything in migration that would change the behavior in this way.
Thanks in advance.
解决方案
If you want a transparent background with WebGLRenderer, you need to set alpha = true in the WebGLRenderer constructor. You can then set the clear color.
var renderer = new THREE.WebGLRenderer( { alpha: true } );
renderer.setClearColor( 0x00ff00, 0.5 );
three.js r.66
这篇关于如何将WebGLRender背景设置为透明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！