Getting Started - Three.js - page 14

we will create a THREE.CSS3DRenderer object. Just as we did with the oth-
er renderers, we also need to set the size. Since we want to fill the screen,
we will use the window.innerwidth and window.innerheight proper-
ties. The rest of the code stays the same.
6. Now, all we need to do to finish this skeleton is add an element. With the
CSS 3D renderer, we can only add THREE.CSS3DObject elements. For this
step, just add the following function:
function createCSS3DObject(content)
{
// convert the string to dome
elements
var wrapper =
document.createElement('div');
wrapper.innerHTML = content;
var div = wrapper.firstChild;
// set some values on the div to
style it.
// normally you do this directly in
HTML and
// CSS files.
div.style.width = '370px';
div.style.height = '370px';
div.style.opacity = 0.7;
div.style.background = new
THREE.Color(Math.random() *
0xffffff).getStyle();
// create a CSS3Dobject and return
it.
var object = new
THREE.CSS3DObject(div);
return object;
}