{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 我想做一个坏孩纸 的问题《How to Set WebGLRender background to transparent》','https://www.manongdao.com/q-1061264.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I'm trying to put objects in front of CSS3DObjects with the THREE.NoBlending hack. But I only see the black plane without the CSS3DObject in the newest revisions (tried r65 and r66). A small example I made looks like this:
index.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>
moo.html:
<!DOCTYPE html>
<html>
<body style="background-color: purple">
<p align="center"><font color="lime" size="150">hello world</font> </p>
</body>
</html>
This is the result:
Revision 58: http://i.imgur.com/tCszJ8X.jpg
Revision 66: http://i.imgur.com/kfppVwF.jpg
I've tried to understand why, it's probably something very simple. I can't find anything in migration that would change the behavior in this way.
Thanks in advance.
If you want a transparent background with
WebGLRenderer, you need to setalpha = truein theWebGLRendererconstructor. You can then set the clear color.three.js r.66