Getting Started - Three.js - page 15

This function takes an HTML string as the input, converts it to an HTML
element, sets some CSS styles, and uses this as the input to create a
THREE.CSS3DObject object, which is added to the scene.
If you open this file in your browser, you'll see something that resembles the example
we showed in the Getting ready section of this recipe. You can use the HTML page
and JavaScript as a template for the entirety of your CSS 3D renderer project.
How it works...
With CSS 3D, you can apply all kinds of transformations to the HTML elements. For
instance, you can apply a specific rotation around an axis using the transform prop-
erty. The interesting thing is that you can also apply matrix transformations. Three.js
uses matrix transformations internally to position and rotate the elements. With the
THREE.CSS3DRenderer object, Three.js hides the internal CSS 3D specific trans-
formations and styles and provides a nice abstraction level, which you can use to
work with the HTML elements in 3D.
See also
• If you can use the WebGL approach from the Getting started with the WebGL
renderer recipe, you should really use it. It provides more features than those
that are available with the CSS-based approach, but has less support for mo-
bile devices. If, on the other hand, you're looking to manipulate the HTML
elements on screen, the THREE.CSS3DRenderer object is a great solution.