Gecko [ dp-client.com ]

Name	Size	Permission
align-html-elements-to-3d.html	31.92 KB	-rw-r--r--
backgrounds.html	12.91 KB	-rw-r--r--
billboards.html	14.75 KB	-rw-r--r--
cameras.html	29.83 KB	-rw-r--r--
canvas-textures.html	17.61 KB	-rw-r--r--
cleanup.html	17.12 KB	-rw-r--r--
custom-buffergeometry.html	23.65 KB	-rw-r--r--
debugging-glsl.html	6.83 KB	-rw-r--r--
debugging-javascript.html	28.47 KB	-rw-r--r--
fog.html	14.32 KB	-rw-r--r--
fundamentals.html	27.56 KB	-rw-r--r--
game.html	81.78 KB	-rw-r--r--
indexed-textures.html	28.62 KB	-rw-r--r--
lights.html	28.49 KB	-rw-r--r--
load-gltf.html	32.6 KB	-rw-r--r--
load-obj.html	34.76 KB	-rw-r--r--
material-table.html	1.77 KB	-rw-r--r--
materials.html	18.7 KB	-rw-r--r--
multiple-scenes.html	27.63 KB	-rw-r--r--
offscreencanvas.html	44.53 KB	-rw-r--r--
optimize-lots-of-objects-anima...	21.68 KB	-rw-r--r--
optimize-lots-of-objects.html	25.07 KB	-rw-r--r--
picking.html	20.61 KB	-rw-r--r--
post-processing-3dlut.html	25.43 KB	-rw-r--r--
post-processing.html	17.11 KB	-rw-r--r--
prerequisites.html	20.59 KB	-rw-r--r--
primitives.html	22.01 KB	-rw-r--r--
rendering-on-demand.html	11.92 KB	-rw-r--r--
rendertargets.html	7.85 KB	-rw-r--r--
responsive.html	15.02 KB	-rw-r--r--
scenegraph.html	28.84 KB	-rw-r--r--
setup.html	4.49 KB	-rw-r--r--
shadertoy.html	22.83 KB	-rw-r--r--
shadows.html	28.41 KB	-rw-r--r--
textures.html	31.92 KB	-rw-r--r--
tips.html	16.32 KB	-rw-r--r--
transparency.html	18.74 KB	-rw-r--r--
voxel-geometry.html	43.43 KB	-rw-r--r--
webxr-basics.html	18.92 KB	-rw-r--r--
webxr-look-to-select.html	21.23 KB	-rw-r--r--
webxr-point-to-select.html	17.52 KB	-rw-r--r--

Code Editor : prerequisites.html

<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8">
    <title>Prerequisites</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@threejs">
    <meta name="twitter:title" content="Three.js – Prerequisites">
    <meta property="og:image" content="https://threejs.org/files/share.png">
    <link rel="shortcut icon" href="../../files/favicon_white.ico" media="(prefers-color-scheme: dark)">
    <link rel="shortcut icon" href="../../files/favicon.ico" media="(prefers-color-scheme: light)">

&lt;script type="importmap"&gt;
{
  "imports": {
    "three": "./path/to/three.module.js",
    "three/addons/": "./different/path/to/examples/jsm/"
  }
}
&lt;/script&gt;

&lt;script type="module"&gt;
import * as THREE from 'three';
import {OrbitControls} from 'three/addons/controls/OrbitControls.js';

...

&lt;/script&gt;
</pre>
<p>See more details at the bottom of <a href="fundamentals.html">this article</a>.</p>
<h2 id="-document-queryselector-and-document-queryselectorall-"><code class="notranslate" translate="no">document.querySelector</code> and <code class="notranslate" translate="no">document.querySelectorAll</code></h2>
<p>You can use <code class="notranslate" translate="no">document.querySelector</code> to select the first element
that matches a CSS selector. <code class="notranslate" translate="no">document.querySelectorAll</code> returns
all elements that match a CSS selector.</p>
<h2 id="you-don-t-need-onload-">You don't need <code class="notranslate" translate="no">onload</code></h2>
<p>Lots of 20yr old pages use HTML like</p>
<pre class="prettyprint showlinemods notranslate notranslate" translate="no">&lt;body onload="somefunction()"&gt;
</pre><p>That style is deprecated. Put your scripts
at the bottom of the page.</p>
<pre class="prettyprint showlinemods notranslate lang-html" translate="no">&lt;html&gt;
  &lt;head&gt;
    ...
  &lt;/head&gt;
  &lt;body&gt;
     ...
  &lt;/body&gt;
  &lt;script&gt;
    // inline javascript
  &lt;/script&gt;
&lt;/html&gt;
</pre>
<p>or <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script">use the <code class="notranslate" translate="no">defer</code> property</a>.</p>
<h2 id="know-how-closures-work">Know how closures work</h2>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function a(v) {
  const foo = v;
  return function() {
     return foo;
  };
}

function lengthOfVector([x, y]) {
  return Math.sqrt(x * x + y * y);
}

const dist = lengthOfVector(vector);  // dist = 5

<p>Above you can see I mis-spelled <code class="notranslate" translate="no">doTheThing</code> as <code class="notranslate" translate="no">doThing</code>. There's a red squiggle
under <code class="notranslate" translate="no">doThing</code> and hovering over it it tells me it's undefined. One error
avoided.</p>
<p>If you're using <code class="notranslate" translate="no">&lt;script&gt;</code> tags to include three.js you'll get warnings using <code class="notranslate" translate="no">THREE</code> so add <code class="notranslate" translate="no">/* global THREE */</code> at the top of your
JavaScript files to tell eslint that <code class="notranslate" translate="no">THREE</code> exists. (or better, use <code class="notranslate" translate="no">import</code> 😉)</p>
<div class="threejs_center"><img style="width: 615px;" src="../resources/images/vscode-eslint-not-a-constructor.png"></div>

<p>Above you can see eslint knows the rule that <code class="notranslate" translate="no">UpperCaseNames</code> are constructors
and so you should be using <code class="notranslate" translate="no">new</code>. Another error caught and avoided. This is <a href="https://eslint.org/docs/rules/new-cap">the
<code class="notranslate" translate="no">new-cap</code> rule</a>.</p>
<p>There are <a href="https://eslint.org/docs/rules/">100s of rules you can turn on or off or
customize</a>. For example above I mentioned you
should use <code class="notranslate" translate="no">const</code> and <code class="notranslate" translate="no">let</code> over <code class="notranslate" translate="no">var</code>.</p>
<p>Here I used <code class="notranslate" translate="no">var</code> and it warned me I should use <code class="notranslate" translate="no">let</code> or <code class="notranslate" translate="no">const</code></p>
<div class="threejs_center"><img style="width: 615px;" src="../resources/images/vscode-eslint-var.png"></div>

<p>Here I used <code class="notranslate" translate="no">let</code> but it saw I never change the value so it suggested I use <code class="notranslate" translate="no">const</code>.</p>
<div class="threejs_center"><img style="width: 615px;" src="../resources/images/vscode-eslint-let.png"></div>

<p>Of course if you'd prefer to keep using <code class="notranslate" translate="no">var</code> you can just turn off that rule.
As I said above though I prefer to use <code class="notranslate" translate="no">const</code> and <code class="notranslate" translate="no">let</code> over <code class="notranslate" translate="no">var</code> as they just
work better and prevent bugs.</p>
<p>For those cases where you really need to override a rule <a href="https://eslint.org/docs/user-guide/configuring#disabling-rules-with-inline-comments">you can add comments
to disable
them</a>
for a single line or a section of code.</p>
<h1 id="if-you-really-need-to-support-legacy-browsers-use-a-transpiler">If you really need to support legacy browsers use a transpiler</h1>
<p>Most modern browsers are auto-updated so using all these features will help you 
be productive and avoid bugs. That said, if you're on a project that absolutely
must support old browsers there are <a href="https://babeljs.io">tools that will take your ES5/ES6/ES7 code
and transpile the code back to pre ES5 Javascript</a>.</p>

</div>
      </div>
    </div>
  
  <script src="../resources/prettify.js"></script>
  <script src="../resources/lesson.js"></script>

</body></html>

${this.title}

Code Editor : prerequisites.html