If we increase the window height by a certain percentage, then what we want is the visible height at all distances
to increase by the same percentage.
This can not be done by changing the camera position. Instead you have to change the camera field-of-view.
[link:http://jsfiddle.net/Q4Jpu/ Example].
</div>
<h2>Why is part of my object invisible?</h2>
<div>
This could be because of face culling. Faces have an orientation that decides which side is which. And the culling removes the backside in normal circumstances. To see if this is your problem, change the material side to THREE.DoubleSide.
<p>If you use just procedural geometries and don't load any textures, webpages should work straight from the file system, just double-click on HTML file in a file manager and it should appear working in the browser (accessed as <code>file:///example</code>).</p>
<h2>Content loaded from external files</h2>
<p>If you load models or textures from external files, due to browsers' "<ahref="http://en.wikipedia.org/wiki/Same_origin_policy">same origin policy</a>" security restrictions, loading from a file system will fail with a security exception.</p>
<p>There are two ways how to solve this:</p>
<ol>
<li><p>Change security for local files in a browser (access page as <code>file:///example</code>)</p></li>
<li><p>Run files from a local server (access page as <code>http://localhost/example</code>)</p></li>
</ol>
<p>If you use option 1, be aware that you may open yourself to some vulnerabilities if using the same browser for a regular web surfing. You may want to create a separate browser profile / shortcut used just for local development to be safe.</p>
<hr>
<h3>Change local files security policy</h3>
<h4>Safari</h4>
<p>Enable the develop menu using the preferences panel, under Advanced -> "Show develop menu in menu bar"</p>
<p>Then from the safari "Develop" menu, select "Disable local file restrictions", it is also worth noting safari has some odd behaviour with caches, so it is advisable to use the "Disable caches" option in the same menu; if you are editing & debugging using safari.</p>
<h4>Chrome</h4>
<p>Close all running Chrome instances first. The important word here is 'all'.</p>
<p>On Windows, you may check for Chrome instances using the Windows Task Manager. Alternatively, if you see a Chrome icon in the system tray, then you may open its context menu and click 'Exit'. This should close all Chrome instances.</p>
<p>Then start the Chrome executable with a command line flag:</p>
<pre><code>chrome --allow-file-access-from-files
</code></pre>
<p>On Windows, probably the easiest is probably to create a special shortcut icon which has added the flag given above (right-click on shortcut -> properties -> target).</p>
<p>Other simple alternatives are <ahref="http://stackoverflow.com/q/12905426/24874">discussed here</a> on Stack Overflow.</p>
<p>Of course, you can use any other regular full-fledged web server like <ahref="http://www.apachefriends.org/en/xampp.html">Apache</a> or <ahref="http://nginx.org/">nginx</a>.</p>
<p>Example with lighttpd, which is a very lightweight general purpose webserver (on MAC OSX):</p>
<ol>
<li>Install it via homebrew <code>brew install lighttpd</code>
</li>
<li>Create a configuration file called lighttpd.conf in the directory where you want to run your webserver. There is a sample in <ahref="http://redmine.lighttpd.net/projects/lighttpd/wiki/TutorialConfiguration">this</a> page.</li>
<li>In the conf file, change the server.document-root with the directory you want to serve</li>
<li>Start it with <code>lighttpd -f lighttpd.conf</code>
</li>
<li>Navigate to http://localhost:3000/ and it will serve static files from the directory you chose.</li>
[link:https://www.udacity.com/course/cs291 Interactive 3D Graphics] - a free course on Udacity that teaches the fundamentals of 3D Graphics,
and uses three.js as it coding tool.
</li>
<li>
[Link:https://aerotwist.com/tutorials/ Aerotwist] tutorials by [link:https://github.com/paullewis/ Paul Lewis].
</li>
<li>
[link:http://www.natural-science.or.jp/article/20120220155529.php Building A Physics Simulation Environment] - three.js tutorial in Japanese
</li>
<li>
[link:http://www.senaeh.de/einstieg-in-webgl-mit-three-js/ Einstieg in WebGL mit three.js] - three.js tutorial in German
</li>
<li>
[link:http://learningthreejs.com/ Learning Three.js] – blog where each post is dedicated to teaching an aspect of three.js
</li>
</ul>
<h2>Old Links</h2>
<div>
These links are kept for historical purposes - you may still find them useful, but be warned that
they may have information relating to very old versions of three.js.
</div>
<ul>
<li>
<ahref="https://www.youtube.com/watch?v=Dir4KO9RdhM">AlterQualia at WebGL Camp 3</a>
</li>
<li>
[link:http://yomotsu.github.io/threejs-examples/ Yomotsus Examples] - a collection of examples using three.js r45.
</li>
<li>
[link:http://fhtr.org/BasicsOfThreeJS/#1 Introduction to Three.js] by [link:http://github.com/kig/ Ilmari Heikkinen] (slideshow).
</li>
<li>
[link:http://www.slideshare.net/yomotsu/webgl-and-threejs WebGL and Three.js] by [link:http://github.com/yomotsu Akihiro Oyamada] (slideshow).
</li>
<li>
[link:http://bkcore.com/blog/general/adobe-user-group-nl-talk-video-hexgl.html Fast HTML5 game development using three.js] by [link:https://github.com/BKcore BKcore] (video).
</li>
<li>
<ahref="http://www.youtube.com/watch?v=VdQnOaolrPA">Trigger Rally</a> by [link:https://github.com/jareiko jareiko] (video).
</li>
<li>
[link:http://blackjk3.github.io/threefab/ ThreeFab] - scene editor, maintained up until around three.js r50.
</li>
<li>
[link:http://bkcore.com/blog/3d/webgl-three-js-workflow-tips.html Max to Three.js workflow tips and tricks] by https://github.com/BKcore BKcore]
</li>
<li>
[link:http://12devsofxmas.co.uk/2012/01/webgl-and-three-js/ On the twelfth day of Xmas, take a whirlwind look at Three.js]
