@@ -51,7 +51,7 @@ var color = new THREE.Color( 1, 0, 0 );
[page:Float g] - (optional) The green component of the color if it is defined.<br/>
[page:Float b] - (optional) The blue component of the color if it is defined.<br/><br/>
Note that standard method of specifying color in Three is with a [link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet], and that method is used
Note that standard method of specifying color in three.js is with a [link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet], and that method is used
throughout the rest of the documentation.<br/><br/>
When all arguments are defined then r is the red component, g is the green component and b is the blue component of the color.<br/>
NOTE: The Canvas renderer has been deprecated and is no longer part of the Three.js core.
NOTE: The Canvas renderer has been deprecated and is no longer part of the three.js core.
</b>
If you still need to use it you can find it here: [link:https://github.com/mrdoob/three.js/blob/master/examples/js/[path].js examples/js/[path].js].<br/><br/>
<div>The goal of this section is to give a brief introduction to Three.js. We will start by setting up a scene, with a spinning cube. A working example is provided at the bottom of the page in case you get stuck and need help.</div>
<div>The goal of this section is to give a brief introduction to three.js. We will start by setting up a scene, with a spinning cube. A working example is provided at the bottom of the page in case you get stuck and need help.</div>
<h2>Before we start</h2>
<div>Before you can use Three.js, you need somewhere to display it. Save the following HTML to a file on your computer, along with a copy of <ahref="http://threejs.org/build/three.js">three.js</a> in the js/ directory, and open it in your browser.</div>
<div>Before you can use three.js, you need somewhere to display it. Save the following HTML to a file on your computer, along with a copy of <ahref="http://threejs.org/build/three.js">three.js</a> in the js/ directory, and open it in your browser.</div>
<code>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first Three.js app</title>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
...
...
@@ -40,7 +40,7 @@
<h2>Creating the scene</h2>
<div>To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the scene with the camera.</div>
<div>To actually be able to display anything with three.js, we need three things: A scene, a camera, and a renderer so we can render the scene with the camera.</div>
<code>
var scene = new THREE.Scene();
...
...
@@ -51,13 +51,13 @@
document.body.appendChild( renderer.domElement );
</code>
<div>Let's take a moment to explain what's going on here. We have now set up the scene, our camera and the renderer. There are a few different cameras in Three.js. For now, let's use a PerspectiveCamera. The first attribute is the <strong>field of view</strong>.</div>
<div>Let's take a moment to explain what's going on here. We have now set up the scene, our camera and the renderer. There are a few different cameras in three.js. For now, let's use a PerspectiveCamera. The first attribute is the <strong>field of view</strong>.</div>
<div>The second one is the <strong>aspect ratio</strong>. You almost always want to use the width of the element divided by the height, or you'll get the same result as when you play old movies on a widescreen TV - the image looks squished.</div>
<div>The next two attributes are the <strong>near</strong> and <strong>far</strong> clipping plane. What that means, is that objects further away from the camera than the value of <strong>far</strong> or closer than <strong>near</strong> won't be rendered. You don't have to worry about this now, but you may want to use other values in your apps to get better performance.</div>
<div>Next up is the renderer. This is where the magic happens. In addition to the WebGLRenderer we use here, Three.js comes with a few others, often used as fallbacks for users with older browsers or for those who don't have WebGL support for some reason.</div>
<div>Next up is the renderer. This is where the magic happens. In addition to the WebGLRenderer we use here, three.js comes with a few others, often used as fallbacks for users with older browsers or for those who don't have WebGL support for some reason.</div>
<div>In addition to creating the renderer instance, we also need to set the size at which we want it to render our app. It's a good idea to use the width and height of the area we want to fill with our app - in this case, the width and height of the browser window. For performance intensive apps, you can also give <strong>setSize</strong> smaller values, like <strong>window.innerWidth/2</strong> and <strong>window.innerHeight/2</strong>, which will make the app render at half size.</div>
...
...
@@ -113,14 +113,14 @@
</div>
<h2>The result</h2>
<div>Congratulations! You have now completed your first Three.js application. It's simple, you have to start somewhere.</div>
<div>Congratulations! You have now completed your first three.js application. It's simple, you have to start somewhere.</div>
<div>The full code is available below. Play around with it to get a better understanding of how it works.</div>
