Game Development Reference
In-Depth Information
Now we can add our mesh to the scene:
scene.add(mesh);
We've put together what we want to display, so the next step is to actually display it.
Three.js accomplishes this with renderers , which take the objects in a scene, perform
some calculations, and then ask the browser to display the result in a specific format
like WebGL. The renderer creates a new <canvas> element by default that should be
added to the DOM:
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
Here, we're using the CanvasRenderer as our method of displaying the scene. (We'll
cover other renderers such as WebGLRenderer in Chapter 2 , Building a World .) We're
also telling the renderer to display the scene at the full size of the browser window
with our setSize() call. Then we will add the renderer's canvas to the DOM with
appendChild(renderer.domElement) .
Avoid changing the canvas' size with CSS; use the renderer's
setSize method instead, which sets the width and height HTML
attributes on the canvas element. This is because CSS describes the
display size but not the render size. That is, if the canvas is rendered
at 800 x 600, but the CSS shows it at 1024 x 768, the rendering will be
stretched to fill the space just like if you specified the CSS size of an
image to be larger than its true size. This can result in distortion and
difficulty converting between "screen space" and "canvas space."
The one last thing we need is a camera object as shown in the following code
snippet, which is something Three.js uses to tell the renderer from what perspective
the scene should be displayed. If the player was standing in your virtual world and
their screen represented what they could see, camera would be their eyes, renderer
would be their brain, and scene would be their universe.
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.
innerHeight, 1, 1000);
camera.position.z = 500;
 
Search WWH ::




Custom Search