dirkk0/css3d_webgl.html

## css3d_webgl.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            body {
                background-color: #ffffff;
                margin: 0;
                overflow: hidden;
            }
        </style>
    </head>
    <body>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.js'></script>
    <script src='http://threejs.org/examples/js/renderers/CSS3DRenderer.js'></script>
    <script src='http://threejs.org/examples/js/controls/TrackballControls.js'></script>

    <script>

// http://stackoverflow.com/questions/24681170/three-js-properly-blending-css3d-and-webgl/24688807#24688807
var camera, sceneGl, rendererGl;
var sceneCss, rendererCss;
var controls;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.set(60, 50, 100);

    controls = new THREE.TrackballControls(camera);

    sceneGl = new THREE.Scene();
    sceneCss = new THREE.Scene();

    var material = new THREE.MeshBasicMaterial({
        color: 0x000000,
        opacity: 0.0,
        side: THREE.DoubleSide
    });

    var size_x = 400;
    var size_y = 490;

    var element = document.createElement('iframe')
    element.src = 'https://www.w3.org/'
    element.style.width = size_x + 'px';
    element.style.height = size_y + 'px';

    var object = new THREE.CSS3DObject(element);
    object.position.set(0,0,0);
    object.scale.x = 0.1;
    object.scale.y = 0.1;
    sceneCss.add(object);

    var geometry = new THREE.PlaneGeometry(size_x, size_y);
    var mesh = new THREE.Mesh(geometry, material);
    mesh.position.copy(object.position);
    mesh.rotation.copy(object.rotation);
    mesh.scale.copy(object.scale);
    sceneGl.add(mesh);

    var geometry = new THREE.BoxGeometry( 10, 10, 10 );
    var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    var cube1 = new THREE.Mesh( geometry, material );
    cube1.position.copy(  new THREE.Vector3(0, 0, 50) );
    sceneGl.add( cube1 );

    var geometry = new THREE.BoxGeometry( 10, 10, 10 );
    var material = new THREE.MeshBasicMaterial( { color: 0x0000ff } );
    var cube2 = new THREE.Mesh( geometry, material );
    cube2.position.copy(  new THREE.Vector3(0, 0, -50) );
    sceneGl.add( cube2 );

    rendererCss = new THREE.CSS3DRenderer();
    rendererCss.setSize(window.innerWidth, window.innerHeight);
    rendererCss.domElement.style.position = 'absolute';
    rendererCss.domElement.style.top = 0;

    rendererGl = new THREE.WebGLRenderer({alpha:true});
    rendererGl.setClearColor(0x00ff00, 0.0);
    rendererGl.setSize(window.innerWidth, window.innerHeight);
    rendererGl.domElement.style.position = 'absolute';
    rendererGl.domElement.style.zIndex = 1;
    rendererGl.domElement.style.top = 0;

    rendererCss.domElement.appendChild(rendererGl.domElement);
    document.body.appendChild(rendererCss.domElement);
}

function animate() {
    requestAnimationFrame(animate);

    controls.update();

    rendererGl.render(sceneGl, camera);
    rendererCss.render(sceneCss, camera);
}
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<style>
	body {
	background-color: #ffffff;
	margin: 0;
	overflow: hidden;
	}
	</style>
	</head>
	<body>

	<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.js'></script>
	<script src='http://threejs.org/examples/js/renderers/CSS3DRenderer.js'></script>
	<script src='http://threejs.org/examples/js/controls/TrackballControls.js'></script>

	<script>

	// http://stackoverflow.com/questions/24681170/three-js-properly-blending-css3d-and-webgl/24688807#24688807
	var camera, sceneGl, rendererGl;
	var sceneCss, rendererCss;
	var controls;

	init();
	animate();

	function init() {

	camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
	camera.position.set(60, 50, 100);

	controls = new THREE.TrackballControls(camera);

	sceneGl = new THREE.Scene();
	sceneCss = new THREE.Scene();

	var material = new THREE.MeshBasicMaterial({
	color: 0x000000,
	opacity: 0.0,
	side: THREE.DoubleSide
	});

	var size_x = 400;
	var size_y = 490;

	var element = document.createElement('iframe')
	element.src = 'https://www.w3.org/'
	element.style.width = size_x + 'px';
	element.style.height = size_y + 'px';

	var object = new THREE.CSS3DObject(element);
	object.position.set(0,0,0);
	object.scale.x = 0.1;
	object.scale.y = 0.1;
	sceneCss.add(object);

	var geometry = new THREE.PlaneGeometry(size_x, size_y);
	var mesh = new THREE.Mesh(geometry, material);
	mesh.position.copy(object.position);
	mesh.rotation.copy(object.rotation);
	mesh.scale.copy(object.scale);
	sceneGl.add(mesh);

	var geometry = new THREE.BoxGeometry( 10, 10, 10 );
	var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
	var cube1 = new THREE.Mesh( geometry, material );
	cube1.position.copy( new THREE.Vector3(0, 0, 50) );
	sceneGl.add( cube1 );

	var geometry = new THREE.BoxGeometry( 10, 10, 10 );
	var material = new THREE.MeshBasicMaterial( { color: 0x0000ff } );
	var cube2 = new THREE.Mesh( geometry, material );
	cube2.position.copy( new THREE.Vector3(0, 0, -50) );
	sceneGl.add( cube2 );

	rendererCss = new THREE.CSS3DRenderer();
	rendererCss.setSize(window.innerWidth, window.innerHeight);
	rendererCss.domElement.style.position = 'absolute';
	rendererCss.domElement.style.top = 0;

	rendererGl = new THREE.WebGLRenderer({alpha:true});
	rendererGl.setClearColor(0x00ff00, 0.0);
	rendererGl.setSize(window.innerWidth, window.innerHeight);
	rendererGl.domElement.style.position = 'absolute';
	rendererGl.domElement.style.zIndex = 1;
	rendererGl.domElement.style.top = 0;

	rendererCss.domElement.appendChild(rendererGl.domElement);
	document.body.appendChild(rendererCss.domElement);
	}

	function animate() {
	requestAnimationFrame(animate);

	controls.update();

	rendererGl.render(sceneGl, camera);
	rendererCss.render(sceneCss, camera);
	}
	</script>
	</body>
	</html>