A test is being conducted on a cssRenderer that is running a scene directly in front of a webglRender. This setup allows both to run together, creating the illusion of including html dom elements (div and text) in webgl.
The goal is to make the textbox background, rendered in the cssScene, transparent so that the floor, rendered in the glscene, is visible behind it.
The cssObject is linked to the planeMesh, with the planeMesh having zero opacity and
material.blending = THREE.NoBlending;cssObject does not produce any results either.
An intriguing observation is that when spinning the scene around and looking through the back of the text box, the text may appear backwards but the textbox is transparent. This raises the question of why this occurs and how to achieve transparency in the text box while keeping the text oriented correctly.
Below is the relevant js code:
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);
}