Graphics Reference
In-Depth Information
4. Similar to the other skeletons we will initialize the scene in the
init()
func-
tion. The function that you need to add to the
THREE.CSS3DRenderer
ob-
ject is shown as follows:
function init() {
scene = new THREE.Scene();
camera = new
THREE.PerspectiveCamera(45,
window.innerWidth / window.innerHeight,
0.1, 1000);
// create a CSS3DRenderer
renderer = new
THREE.CSS3DRenderer();
renderer.setSize(window.innerWidth,
window.innerHeight);
document.body.appendChild(renderer.domElement);
// position and point the camera to
the center of the scene
camera.position.x = 500;
camera.position.y = 500;
camera.position.z = 500;
camera.lookAt(scene.position);
var cssElement =
createCSS3DObject(content);
cssElement.position.set(100, 100,
100);
scene.add(cssElement);
render();
}
5. We'll focus on the highlighted parts in this code fragment. For an explanation
of the other parts of this function, we will take a look at the
Getting started
with the WebGL renderer
recipe. As you can see in this fragment, this time
