Skip to content

Commit

Permalink
Followed best practises (mdn#1557)
Browse files Browse the repository at this point in the history
* Used `const` instead of `var`

* Added declaration
  • Loading branch information
subtra3t authored Jan 21, 2021
1 parent 8dde24c commit 3187987
Showing 1 changed file with 5 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@ <h2 id="HTML_structure">HTML structure</h2>
&lt;body&gt;
&lt;script src="three.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
const WIDTH = window.innerWidth;
const HEIGHT = window.innerHeight;
/* all our JavaScript code goes here */
&lt;/script&gt;
&lt;/body&gt;
Expand Down Expand Up @@ -80,7 +80,7 @@ <h2 id="Scene">Scene</h2>

<p>A scene is the place where everything happens. When creating new objects in the demo, we add them all inside the scene to become visible on the screen. In three.js, the scene is represented by a <code>Scene</code> object. Let's create it, by adding the following line below our previous lines:</p>

<pre class="brush: js">var scene = new THREE.Scene();
<pre class="brush: js">const scene = new THREE.Scene();
</pre>

<p>Later, we will be using the <code>.add()</code> method, to add objects to this scene.</p>
Expand All @@ -89,7 +89,7 @@ <h2 id="Camera">Camera</h2>

<p>We have the rendered scene, but we still need to add a camera to view our handiwork — imagine a movie set without any cameras. The following lines put the camera in place in the 3D coordinate system, and point it in the direction of our scene, so we can finally see something:</p>

<pre class="brush: js">var camera = new THREE.PerspectiveCamera(70, WIDTH/HEIGHT);
<pre class="brush: js">const camera = new THREE.PerspectiveCamera(70, WIDTH/HEIGHT);
camera.position.z = 50;
scene.add(camera);
</pre>
Expand Down Expand Up @@ -129,7 +129,7 @@ <h2 id="Geometry">Geometry</h2>

<p>Now our scene is properly rendering, we can start adding 3D shapes. To speed up development, Three.js provides a bunch of predefined primitives, which you can use to create shapes instantly in a single line of code. There's cubes, spheres, cylinders, and more complicated shapes available. Detail like drawing required vertices and faces, for a given shape, is handled by the Three framework, so we can focus on higher level coding. Let's start, by defining the geometry for a cube shape, adding the following just above the <code>render()</code> function:</p>

<pre class="brush: js">var boxGeometry = new THREE.BoxGeometry(10, 10, 10);
<pre class="brush: js">const boxGeometry = new THREE.BoxGeometry(10, 10, 10);
</pre>

<p>In this case, we define a simple cube that is 10 x 10 x 10 units. The geometry itself is not enough though, we also need a material that will be used for our shape.</p>
Expand Down

0 comments on commit 3187987

Please sign in to comment.