Graphics Reference
In-Depth Information
How to do it...
To set up a
THREE.CSS3DRenderer
based scene, we need to perform a couple of
simple steps:
1. Before we get started with the
THREE.CSS3DRenderer
specific information,
first, you have to set up a simple basic HTML page as we did in the
Getting
started with the WebGL renderer
recipe. So walk through the first three steps
of that recipe, and then continue with the next step.
2. After the initial setup, the first thing that we need to do is to add the correct
JavaScript to our head element:
<script src="../libs/
CSS3DRenderer.js"></script>
Next, we'll start with the definition of the global variables that we need:
var content = '<div>' +
'<h1>This is an H1 Element.</h1>' +
'<span class="large">Hello Three.js
cookbook</span>' +
'<textarea> And this is a
textarea</textarea>' +
'</div>';
// global variables, referenced from
render loop
var renderer;
var scene;
var camera;
3. What we define here is a string representation of the element that we want
to render. As the
THREE.CSS3DRenderer
object works with the HTML ele-
ments, we won't use any of the standard Three.js geometries here, but just
plain HTML. The renderer, scene, and camera are simple variables for the
corresponding Three.js elements, so that we can easily access them from
the
render()
function, which we'll see later on.