|
|
@@ -8,8 +8,50 @@
|
|
|
<link type="text/css" rel="stylesheet" href="page.css" />
|
|
|
</head>
|
|
|
<body>
|
|
|
- <h1>[name] - STUB</h1>
|
|
|
+ <h1>[name]</h1>
|
|
|
|
|
|
+ <p>Let's say you want to draw a line or a circle, not a wireframe geometry.
|
|
|
+First we need to setup Renderer, Scene and camera (<a href="Getting%20Started">see Getting Started</a>).</p>
|
|
|
|
|
|
+<p>Here is the code that we will use:</p>
|
|
|
+
|
|
|
+<div class="highlight highlight-source-js"><pre> <span class="pl-k">var</span> renderer <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">THREE.WebGLRenderer</span>();
|
|
|
+ <span class="pl-smi">renderer</span>.<span class="pl-en">setSize</span>(<span class="pl-c1">window</span>.<span class="pl-c1">innerWidth</span>, <span class="pl-c1">window</span>.<span class="pl-c1">innerHeight</span>);
|
|
|
+ <span class="pl-c1">document</span>.<span class="pl-c1">body</span>.<span class="pl-c1">appendChild</span>(<span class="pl-smi">renderer</span>.<span class="pl-smi">domElement</span>);
|
|
|
+ <span class="pl-k">var</span> camera <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">THREE.PerspectiveCamera</span>(<span class="pl-c1">45</span>, <span class="pl-c1">window</span>.<span class="pl-c1">innerWidth</span> <span class="pl-k">/</span> <span class="pl-c1">window</span>.<span class="pl-c1">innerHeight</span>, <span class="pl-c1">1</span>, <span class="pl-c1">500</span>);
|
|
|
+ <span class="pl-smi">camera</span>.<span class="pl-smi">position</span>.<span class="pl-c1">set</span>(<span class="pl-c1">0</span>, <span class="pl-c1">0</span>, <span class="pl-c1">100</span>);
|
|
|
+ <span class="pl-smi">camera</span>.<span class="pl-en">lookAt</span>(<span class="pl-k">new</span> <span class="pl-en">THREE.Vector3</span>(<span class="pl-c1">0</span>, <span class="pl-c1">0</span>, <span class="pl-c1">0</span>));
|
|
|
+ <span class="pl-k">var</span> scene <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">THREE.Scene</span>();</pre></div>
|
|
|
+
|
|
|
+<p>Next thing we will do is define a material. For lines we have to use <code>LineBasicMaterial</code>.</p>
|
|
|
+
|
|
|
+<div class="highlight highlight-source-js"><pre> <span class="pl-k">var</span> material <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">THREE.LineBasicMaterial</span>({
|
|
|
+ color<span class="pl-k">:</span> <span class="pl-c1">0x0000ff</span>
|
|
|
+ });
|
|
|
+</pre></div>
|
|
|
+
|
|
|
+<p>After material we will need a <code>Geometry</code> with some vertices:</p>
|
|
|
+
|
|
|
+<div class="highlight highlight-source-js"><pre> <span class="pl-k">var</span> geometry <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">THREE.Geometry</span>();
|
|
|
+ <span class="pl-smi">geometry</span>.<span class="pl-smi">vertices</span>.<span class="pl-c1">push</span>(<span class="pl-k">new</span> <span class="pl-en">THREE.Vector3</span>(<span class="pl-k">-</span><span class="pl-c1">10</span>, <span class="pl-c1">0</span>, <span class="pl-c1">0</span>));
|
|
|
+ <span class="pl-smi">geometry</span>.<span class="pl-smi">vertices</span>.<span class="pl-c1">push</span>(<span class="pl-k">new</span> <span class="pl-en">THREE.Vector3</span>(<span class="pl-c1">0</span>, <span class="pl-c1">10</span>, <span class="pl-c1">0</span>));
|
|
|
+ <span class="pl-smi">geometry</span>.<span class="pl-smi">vertices</span>.<span class="pl-c1">push</span>(<span class="pl-k">new</span> <span class="pl-en">THREE.Vector3</span>(<span class="pl-c1">10</span>, <span class="pl-c1">0</span>, <span class="pl-c1">0</span>));</pre></div>
|
|
|
+
|
|
|
+<p>Note that lines are drawn between each consecutive pair of vertices, but not between the first and last (the line is not closed.)</p>
|
|
|
+
|
|
|
+<p>Now that we have points for two lines and a material, we can put them together to form a line.</p>
|
|
|
+
|
|
|
+<div class="highlight highlight-source-js"><pre>
|
|
|
+ <span class="pl-k">var</span> line <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">THREE.Line</span>(geometry, material);
|
|
|
+</pre></div>
|
|
|
+
|
|
|
+<p>All that's left is to add it to the scene and call <code>render</code>.</p>
|
|
|
+
|
|
|
+<div class="highlight highlight-source-js"><pre>
|
|
|
+ <span class="pl-smi">scene</span>.<span class="pl-c1">add</span>(line);
|
|
|
+ <span class="pl-smi">renderer</span>.<span class="pl-en">render</span>(scene, camera);
|
|
|
+</pre></div>
|
|
|
+
|
|
|
+<p>You should now be seeing a arrow pointing upwards, made from two blue lines.</p>
|
|
|
</body>
|
|
|
</html>
|
Lewy Blue