Detailed explanation of how to run three.js locally

This article mainly introduces to you the relevant information about how to run the three.js Chinese document learning locally. The article introduces it in detail through the example code. It has certain reference learning value for everyone's study or work. Friends who need it Let’s learn together with the editor below.

Loading content from external files

If you download modules and materials from external files, due to the security restrictions of the browser's Same Origin Policy, a security exception will occur and the loading will fail.

There are two solutions:

Modify the security of local files in the browser. You can enter the web page like this:

file:///yourFile.html

Run the file from the local web server, you can enter the web page like this:

http://localhost/yourFile.html

If you use the first method, pay attention to what you use The same browser (after modifying the security) will leave itself vulnerable when surfing the Internet normally. You can create a separate browser configuration and shortcuts for local development only to ensure security. Let's look at each method in turn.

Running a local server

Many programming languages ​​have built-in HTTP servers. They don't have the full functionality of Apache or NGINX, but they are sufficient for testing three.js applications.

Node.js Server

There is a simple HTTP server installation package, install:

npm install http-server -g

Run:

http-server -p 8000

Python server

If you have installed Python, run the following command line in your working directory:

//Python 2.x
python -m SimpleHTTPServer

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

It will go from the current directory to port 80 of localhost to initiate the service. The address bar is like this:

http://localhost:8000/

PHP Server

PHP also has a built-in web server, php 5.4.0 and later:

php -S localhost:8000

Ruby Server

If Once you have this installed, you can run code like:

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

Lighttpd

It is a very lightweight general purpose web server. Let’s take an OSX system with HomeBrew installed as an example. Unlike the above servers, lighttpd is a mature server product.

Install via homebrew

brew install loghttpd

Create a configuration file named lighttpd.conf where you want to run the web server. Example:

server.document-root = "/var/www/servers/www.example.org/pages/"

server.port = 3000

mimetype.assign = (
 ".html" => "text/html", 
 ".txt" => "text/plain",
 ".jpg" => "image/jpeg",
 ".png" => "image/png" 
)

In the configuration file, change server.document-root to the directory you need to serve.

Enable:

lighttpd -f lighttpd.conf

Enter http://localhost:3000/ to serve static files from the directory you choose.

Change the security policy for local files

Safari

Use the preferences panel to turn on developer options: Advanced-> "In the menu The development menu ".

is displayed in the bar and then in Develop-> disable local file restrictions. If you use Safari for editing and debugging, it's worth noting that Safari always behaves strangely with caching, so clicking Disable Cache in the same menu is a wise choice.

chrome

First close all running chrome instances, remember all.

Under Windows, you need to use the process manager to check whether they are all closed. Or, if you see the chrome icon in the system tray, open the right-click menu and click Exit. This should shut down all instances.

Then start the chrome program through the command line flag:

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

Under Window, the easiest way is to create a special shortcut icon and add the above logo at the end. (Right-click the chrome shortcut-> Properties-> Target)

Firefox

In the address bar, enter about:config

to find security The .fileuri.strict_origin_policy parameter

is set to false

Other simple methods are also discussed in Stack Overflow.

Related recommendations:

Three.js implementation of 3D map example sharing

A project class example written by three.js Code sharing

Examples to explain Three.js loading external models

The above is the detailed content of Detailed explanation of how to run three.js locally. For more information, please follow other related articles on the PHP Chinese website!