Icons not displayed in the browser

Elements loaded from external sources, be it icons or others, may not display in the browser when HTML files are opened directly from your computer location. This issue occurs due to browsers' same origin policy security restrictions.

There are two ways to solve this:

Change security for local files in a browser (this allows you to access your page as
file:///yourFile.html ) Or use Mozilla Firefox browser. This is the only browser that allows to view files from your computer location without changing its settings.
Run files from a local webserver (this allows you to access your page as
http://localhost/yourFile.html

If you use option 1, be aware that you may open yourself to some vulnerabilities if using the same browser for regular web surfing. You may want to create a separate browser profile/shortcut used just for local development to be safe. Let's go over each option in turn.

Run a local server

Many programming languages have simple HTTP servers built-in. They are not as full-featured as production servers such as Apache or NGINX, however, they should be sufficient for testing your three.js application.

Node.js server

Node.js has a simple HTTP server package. To install:

npm install http-server -g

To run (from your local directory):

http-server . -p 8000

Python server

If you have Python installed, it should be enough to run this from a command line (from your working directory):

//Python 2.x
python -m SimpleHTTPServer

//Python 3.x
python -m http.server

This will serve files from the current directory at localhost under port 8000, i.e in the address bar type:

http://localhost:8000/

Ruby server

If you have Ruby installed, you can get the same result running this instead:

ruby -r webrick -e "s = WEBrick::HTTPServer.new(:Port => 8000, :DocumentRoot => Dir.pwd); trap('INT') { s.shutdown }; s.start"

PHP server

PHP also has a built-in web server, starting with php 5.4.0:

php -S localhost:8000

Lighttpd

Lighttpd is a very lightweight general-purpose webserver. We'll cover installing it on OSX with HomeBrew here. Unlike the other servers discussed here, lighttpd is a full-fledged production-ready server.

1. Install it via a homebrew

brew install lighttpd

2. Create a configuration file called lighttpd.conf in the directory where you want to run your webserver. There is a sample here.
3. In the conf file, change the server.document-root to the directory you want to serve files from.
4. Start it with

lighttpd -f lighttpd.conf

5. Navigate to http://localhost:3000/ and it will serve static files from the directory you chose.

Change local files security policy

Safari

Enable the develop menu using the preferences panel, under Advanced -> "Show develop menu in menu bar".

Then from the safari "Develop" menu, select "Disable local file restrictions", it is also worth noting safari has some odd behavior with caches, so it is advisable to use the "Disable caches" option in the same menu; if you are editing & debugging using safari.

Chrome

Close all running Chrome instances first. The important word here is 'all'.

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.

Then start the Chrome executable with a command-line flag:

chrome --allow-file-access-from-files

On Windows, probably the easiest is probably to create a special shortcut icon that has added the flag given above (right-click on shortcut -> properties -> target).

On Mac OSX, you can do this with

open /Applications/Google\ Chrome.app --args --allow-file-access-from-files

Firefox

1. In the address bar, type

about:config

2. Find the

security.fileuri.strict_origin_policy

parameter
3. Set it to false

Other simple alternatives are discussed here on Stack Overflow.