如何将WebGLRender背景设置为透明

我试图用三个把对象放在CSS3DObjects前面。不混合黑客。但我只在最新版本中看到没有 CSS3DObject 的黑色飞机（尝试了 r65 和 r66）。我做的一个小例子看起来像这样：

索引.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>

哞

哞.html：

<!DOCTYPE html>
<html>
<body style="background-color: purple">
<p align="center"><font color="lime" size="150">hello world</font> </p>
</body>
</html>

结果如下：

修订版 58：https://i.stack.imgur.com/jAKsU.jpg

修订版 66：https://i.stack.imgur.com/xzcSA.jpg

我试图理解为什么，这可能是非常简单的事情。我在迁移中找不到任何可以以这种方式改变行为的内容。

提前谢谢。

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

var renderer = new THREE.WebGLRenderer( { alpha: true } );
renderer.setClearColor( 0x00ff00, 0.5 );

三.js 66

相关内容

最新更新

热门标签：