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.
Search WWH ::




Custom Search