如何将 WebGLRender 背景设置为透明答案

【问题标题】：How to Set WebGLRender background to transparent如何将 WebGLRender 背景设置为透明
【发布时间】：2014-04-05 07:19:01
【问题描述】：

我正在尝试使用 THREE.NoBlending hack 将对象放在 CSS3DObjects 前面。但我只在最新版本（尝试 r65 和 r66）中看到没有 CSS3DObject 的黑色平面。我做的一个小例子是这样的：

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>

这是结果：

修订版 58：http://i.imgur.com/tCszJ8X.jpg

修订版 66：http://i.imgur.com/kfppVwF.jpg

我试图理解为什么，这可能很简单。我在迁移中找不到任何会以这种方式改变行为的东西。

提前致谢。

【问题讨论】：

你想达到什么目的？ “黑客”应该做什么？为什么你有两架飞机在同一个地方？两个渲染器 domElement 的 z-index 应该是多少？你的问题到底是什么？
@WestLangley 带有 THREE.NoBlending 的 planeMesh 帮助我让 CSS3DObject 了解世界中的 z 值，这样我就可以将对象放在它上面。所以我的问题是为什么 CSS3DObject 在新版本中没有以相同的方式呈现？如您所见，它在修订版 58 中运行良好。
在此示例中，rendererMain 稍后添加，因此与将 z-index 1 放在其上相同。 rendererCSS 在背景中，但通过我的透明平面网格“窗口”看不到，仅在 r58 中。这就是我想知道的原因。
试试 rendererMain = new THREE.WebGLRenderer( { alpha: true } ) 并删除你所谓的 NoBlending hack。
哇哦，非常感谢！也有道理。我称它为 hack 的原因是因为它并不完全清楚如何将 css 烘焙到您的 3d 环境中，当我发现它可能时觉得它真的很酷。我也从平面网格中删除了“透明：真实”，它工作得很好。

标签： javascript html graphics three.js

【解决方案1】：

如果你想要一个带有WebGLRenderer 的透明背景，你需要在WebGLRenderer 构造函数中设置alpha = true。然后您可以设置清除颜色。

var renderer = new THREE.WebGLRenderer( { alpha: true } );

renderer.setClearColor( 0x00ff00, 0.5 );

three.js r.66

【讨论】：