我如何让cssRenderer图层元素是透明的,通过它显示webglRenderer图层
Three.js: How do I get cssRenderer layer element to be transparent showing webglRenderer layer through it?
这是一个cssRenderer直接在webglRender前面运行场景的测试,基本上两者一起运行,以在webgl中包含html dom元素(div和text)。
我试图使文本框背景(在cssScene中渲染)透明,这样你就可以看到后面的地板(在glscene中渲染)。
cssObject
映射到planeMesh
, planeMesh
的不透明度为零,material.blending = THREE.NoBlending;
在其上。事情是这样的,混合似乎没有效果,当我改变混合模式(完全不透明度)什么也没有发生。当我在cssObject
上尝试一些混合模式时,也没有发生任何事情。
有趣的是,如果我旋转场景并透过文本框的背面看,即使文本是向后的,文本框也可以被看到。嗯……这里发生了什么,我如何让文本框以正确的方式看到文本?: D
这是一个活塞
下面是相关的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);
}
MeshBasicMaterial
没有opacity
参数。
你必须设置material = new THREE.Material();
或者,你可以从场景中删除这个planeMesh
,并在css文件中给你的cssObject
一个背景色。
更新恰好
相关文章:
- 更改图层中单个矢量特征的图标
- 谷歌地图热图图层点半径
- 谷歌地图-更改图层图标大小
- 如何通过ID获取图层对象
- CS5隐藏图层的速度非常慢
- 开放图层导出为 KML 并保留我的地图样式
- 传单问题:使折线的图层组不可单击
- 将图层添加到另一个图层
- 图层删除(图像);在 Kinetic.js 中不起作用
- HTML5 Canvas 的初学者,使用图层
- 如何在“控制缩放”下的“打开图层”上添加一些图像
- 无法让 jQuery floatThead 处理嵌入在选项卡式图层中的表
- 如何在开放层 3 中设置矢量图层选择的样式
- 添加支持异步重新加载的 Web 图层
- 3d图层滑块Wordpress插件:编辑3d颜色
- 在jQuery中移动DOM元素(图层滑块)
- 如何用程序更改传单中的图层
- 从智能对象和图层替换Photoshop中的关键字
- 如何在添加新标记和图层之前清除所有标记和图层的传单地图
- 我如何让cssRenderer图层元素是透明的,通过它显示webglRenderer图层