|
|
@@ -10,18 +10,18 @@
|
|
|
<body>
|
|
|
<h1>[name]</h1><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 <a href="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 <a href="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>
|
|
|
|
|
|
<code>
|
|
|
<html>
|
|
|
<head>
|
|
|
- <title>My first Three.js app</title>
|
|
|
+ <title>My first three.js app</title>
|
|
|
<style>
|
|
|
body { margin: 0; }
|
|
|
canvas { width: 100%; height: 100% }
|
Lewy Blue