ThreeJS Compatibiliy Check and Running Locally

Even though this is becoming less of an issue, some devices or browsers may still be incompatible with WebGL. The method below enables you to check if it is supported and display a message to the user if it is not.

Before attempting to render anything, add https://github.com/mrdoob/three.js/blob/master/examples/jsm/WebGL.js to your javascript and run the following.

if ( WEBGL.isWebGLAvailable() ) {


	// Initiate function or other initializations here
	animate();


} else {


	const warning = WEBGL.getWebGLErrorMessage();
	document.getElementById( 'container' ).appendChild( warning );


}

If you only use procedural geometries and do not load any textures, webpages should work directly from the file system; simply double-click on an HTML file in a file manager and it should appear working in the browser (you'll see file:/yourFile.html in the address bar).

Content Loaded from External Files

Loading models or textures from external files will fail with a security exception due to browsers' same origin policy security restrictions. Loading from a file system will succeed with a security exception.

There are two options for dealing with this:

• In a browser, change the security settings for local files. This allows you to access your page using the following URL: file:/yourFile.html.
• Files from a local web server can be executed. This allows you to access your page by typing http://localhost/yourFile.html.

If you choose option 1, be aware that you may expose yourself to vulnerabilities if you use the same browser for regular web browsing. To be safe, you should create a separate browser profile / shortcut for local development. Let's go over each option one at a time.

Run a Local Server

Many programming languages include basic HTTP servers. They are not as feature-rich as production servers like Apache or NGINX, but they should suffice for testing your three.js application.

Node.js five-server

Development server with live reload capability. To install:

# Remove live-server (if you have it)
npm -g rm live-server


# Install five-server
npm -g i five-server


# Update five-server (from time to time)
npm -g i five-server@latest
To run (from your local directory):


five-server . -p 8000

Node.js http-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 small general-purpose webserver. We'll go over how to install it on OSX with HomeBrew in this section. Lighttpd, unlike the other servers discussed here, is a full-fledged production-ready server.

1. Install it via 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.

IIS

If you use Microsoft IIS as your web server. Before loading, please add a MIME type setting for the.fbx extension.

File name extension: fbx        
MIME Type: text/plain

By default, IIS blocks .fbx, .obj files downloads. You have to configure IIS to enable these kinds of files can be downloaded.