Three.js：如何让 cssRenderer 图层元素透明地显示 webglRenderer 图层？答案

【问题标题】：Three.js: How do I get cssRenderer layer element to be transparent showing webglRenderer layer through it?Three.js：如何让 cssRenderer 图层元素透明地显示 webglRenderer 图层？
【发布时间】：2015-11-11 23:38:52
【问题描述】：

这是一个 cssRenderer 直接在 webglRender 前面运行场景的测试，基本上两者一起运行，以假装在 webgl 中包含 html dom 元素（div 和 text）。

我正在尝试使文本框背景（在 cssScene 中渲染）透明，以便您可以看到后面的地板（在 glscene 中渲染）。

cssObject 映射到planeMesh，planeMesh 的不透明度为零，material.blending = THREE.NoBlending; 在上面。事情是这样的，混合似乎没有效果，当我改变混合模式（完全不透明度）时，什么也没有发生。当我在cssObject 上尝试一些混合模式时，也没有任何反应。

有趣的是，如果我旋转场景并查看文本框的背面，即使文本是向后的，文本框也可以看穿。嗯...那里发生了什么，如何使文本框以正确的方式透视文本？ :D

Here's a plunker

下面是相关的js：

function drawMesh(){
// create the plane mesh
//var material = new THREE.MeshBasicMaterial({ wireframe: false, color: 0xFF00FF });

var material   = new THREE.MeshBasicMaterial();
material.color.set('black');
material.opacity   = 0;
// material = THREE.DoubleSide;
material.blending = THREE.NoBlending;

var geometry = new THREE.PlaneGeometry(1.70,0.49);
  planeMesh = new THREE.Mesh( geometry, material );
  planeMesh.position.x = 2.5;
  planeMesh.position.y = 1.8;
  planeMesh.position.z = -2;
  planeMesh.rotation.y = Math.PI / 1;


// add it to the WebGL scene
glscene.add(planeMesh);

var number = document.createElement( 'div' );
number.className = 'number';
number.textContent = "This is an html textbox and that is a cube. blah blah blah";
// create the object3d for this element
cssObject = new THREE.CSS3DObject( number );
// we reference the same position and rotation 
cssObject.position = planeMesh.position;
cssObject.rotation = planeMesh.rotation;


cssObject.scale.set(0.0075,0.0075,0.0075);
cssObject.rotation.y = Math.PI / 1;
cssObject.position.x = 2.5;
cssObject.position.y = 1.8;
cssObject.position.z = -2;

cssObject.blending = THREE.AdditiveBlending;
console.log(cssObject.position.x);
// add it to the css scene
cssScene.add(cssObject);
}

【问题讨论】：

你为什么不从场景中移除这个 planeMesh 并给你的 cssObject 一个背景色？ plnkr.co/edit/bsUVriQjbl3TWHtogyb7?p=preview
这是一个不错的尝试，但它的运动与`planeMesh'相关联，这就是它插入webGL场景的方式。
啊，我刚看到你的 plunker，这正是我想要完成的 :D 你为什么不把它作为答案，我可以检查标记它。非常感谢。

标签： javascript canvas 3d three.js

【解决方案1】：

MeshBasicMaterial 没有opacity 参数。

您必须设置material = new THREE.Material();
或者，您可以从场景中删除此 planeMesh，并在 css 文件中为您的 cssObject 提供背景颜色。

updated plunker

【讨论】：