Skip to content

Instantly share code, notes, and snippets.

@dirkk0

dirkk0/css3d_webgl.html

Last active Nov 9, 2016
Embed
What would you like to do?
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.