Modifying the provided examples online is a great way to get started, but once you move past simple experiments into making significant code modifications or using your own models, you will need to get your own copy of the example using the "Download" button and work from a copy of the example on your own local hard drive. If you are unfamiliar with web development, you may be surprised that extra steps are required to pull this off due to security restrictions. If this seems strange, consider how much more dangerous malicious web code could be if browsers could easily access your hard drive.
One of the advantages of running locally is that it makes it easier to use the debugging capabilities of the browser. Each browser has a JavaScript console on which errors appear. These errors may be extremely helpful in finding problems with your code. Furthermore, you can write to the console from your code using console.log("this string appears on the console")
.
In addition to the console, breakpoints can be set and variables examined while the program is stopped at a breakpoint. This ability ships with Chrome, and is now present in Firefox as well.
Note that in Chrome, the console and debugger can be easily popped up by pressing Ctrl-Shift-J
or from the wrench icon->Tools->Developer tools.
In order to work from your hard drive, you need to explicitly allow your browser to access it. The method for doing so is different for each browser.
For Chrome, add the --allow-file-access-from-files
command line switch to make it work. On Windows, this is accomplished by creating a shortcut to Chrome (right click a Chrome icon and select "Create shortcut", or try dragging it to your desktop), right clicking it, selecting Properties, and typing --allow-file-access-from-files
after "...chrome.exe" in the Target box.
For Firefox, type about:config
in the URL bar. Then locate the security.fileuri.strict_origin_policy
parameter and set it to false
.
In order to confirm that your preparations have succeeded, go to the first example and click the Download button. Save the zip file, and then unpack it in a convenient location. Start a fresh copy of your browser. If using Chrome, be sure to use the special shortcut you created. Run your html file in the browser (just double clicking will work if the browser in question is your default browser, otherwise try right clicking the html file and selecting "Open with" and the correct browser. If you can see the model in your browser, you pass the test. Otherwise, examine the instructions above to determine the source of the problem.