[page:String url] — the path or URL to the file. This can also be a
[link:https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs Data URI].<br/>
[page:Function onLoad] — Will be called when load completes. The argument will be the loaded texture.<br/>
[page:Function onProgress] — Will be called while load progresses. The argument will be the XmlHttpRequest instance, that contain .[page:Integer total] and .[page:Integer loaded] bytes.<br/>
[page:Function onError] — Will be called when load errors.<br/>
</div>
<div>
Begin loading from url and pass the loaded texture to onLoad.
[page:String url] — the path or URL to the file. This can also be a
[link:https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs Data URI].<br/>
[page:Function onLoad] — Will be called when load completes. The argument will be the loaded texture.<br/>
[page:Function onProgress] — Will be called while load progresses. The argument will be the XmlHttpRequest instance, that contain .[page:Integer total] and .[page:Integer loaded] bytes.<br/>
[page:Function onError] — Will be called when load errors.<br/>
</div>
<div>
Begin loading from url and pass the loaded texture to onLoad.
@@ -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>
<p>There are often times when you might need to use text in your Three.js application. Here's are some options you may consider when you wish to add Text.</p>
<h2>1. DOM + CSS</h2>
<p>Using HTML could simply be the easiest and fastest manner to add text. This is commonly used for descriptive overlays in three.js examples.</p>
<p>and use css markup to position absolutely at a position above all others with a z-index especially if you are running three.js full screen.</p>
<p><code>#info {
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display:block;
}</code></p>
<h2>2. Draw text to canvas and use as Texture</h2>
<p>Use this method if you wish to draw text easily on a plane in your three.js scene. This technique can be seen utilized in the <ahref="http://plumegraph.org/">Civilian Casualties in Afghanistan</a> visualization.</p>
<h2>3. Create a 3d model in your 3d application and export to three.js</h2>
<p>Use this method if you prefer working with your 3d applications and importing the models to three.js</p>
<h2>4. Procedural Text Geometry</h2>
<p>Use this method if you prefer to work purely in three.js or create procedural and dynamic 3d text geometries. However, font data files <ahref="http://typeface.neocracy.org/fonts.html">http://typeface.neocracy.org/fonts.html</a> in the typeface.js format needs to be loaded.</p>
<p>A Text Geometry can then be created with <code>new THREE.TextGeometry( text, parameters );</code></p>
<p>For examples, see <ahref="https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_text.html">https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_text.html</a>, <ahref="https://github.com/mrdoob/three.js/blob/master/examples/canvas_geometry_text.html">https://github.com/mrdoob/three.js/blob/master/examples/canvas_geometry_text.html</a> and <ahref="https://github.com/mrdoob/three.js/blob/master/examples/webgl_shadowmap.html">https://github.com/mrdoob/three.js/blob/master/examples/webgl_shadowmap.html</a></p>
<p>If Typeface is down, or you want to use a font that is not there, there's a tutorial with a python script for blender that allows you to export text to Three.js's JSON format: <ahref="http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html">http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html</a></p>
<spanclass="pl-k">var</span> scene <spanclass="pl-k">=</span><spanclass="pl-k">new</span><spanclass="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>
<divclass="highlight highlight-source-js"><pre><spanclass="pl-k">var</span> material <spanclass="pl-k">=</span><spanclass="pl-k">new</span><spanclass="pl-en">THREE.LineBasicMaterial</span>({
"!doc":"Initialises using the data in the array as a series of points. Each value in *a* must be another array with three values, where a[n] is v, the value for the *nth* point, and v[0], v[1] and v[2] are the x, y and z coordinates of that point n, respectively."
},
"getPoint":{
"!type":"fn(k: number) -> +THREE.Vector3",
"!doc":"Return the interpolated point at *k*."
},
"getControlPointsArray":{
"!type":"fn() -> []",
"!doc":"Returns an array with triplets of x, y, z coordinates that correspond to the current control points."
},
"getLength":{
"!type":"fn(nSubDivisions: number) -> object",
"!doc":"Returns an object with the two properties. The property .[page:Number total] contains\n\t\t\tthe length of the spline when using nSubDivisions. The property .[page:Array chunkLength]\n\t\t\tcontains an array with the total length from the beginning of the spline to the end of that chunk."
},
"reparametrizeByArcLength":{
"!type":"fn(samplingCoef: number)",
"!doc":"This is done by resampling the original spline, with the density of sampling controlled by *samplingCoef*. Here it's interesting to note that denser sampling is not necessarily better: if sampling is too high, you may get weird kinks in curvature."
