这是对直接在webglRender前面运行场景的cssRenderer的测试，基本上两者一起运行，以伪造在webgl中包含html dom元素（div和text）。
我试图让文本框背景（在cssScene中呈现）透明，这样你就可以看到后面的地板（在glscene中呈现）。
cssObject已映射到planeMesh，planeMesh的不透明度为零，material.blending = THREE.NoBlending;为cssObject。这就是事情，混合似乎没有效果，当我改变混合模式（完全不透明）时没有任何反应。当我在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);
}
上尝试一些混合模式时，也没有任何反应。
有趣的是，如果我旋转场景并浏览文本框的背面，即使文本向后，也会看到文本框。嗯......那里发生了什么，如何让文本框正确地看到文本？ ：d
以下是相关的js：
{{1}}
答案 0 :(得分：1)
MeshBasicMaterial没有opacity参数。
您必须设置material = new THREE.Material();
或者，您可以从场景中删除此planeMesh，并在css文件中为cssObject提供背景颜色。