Detailed explanation of how to run three.js locally

This article mainly introduces to you the relevant information on 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 follow the editor to learn together, I hope it can help everyone.

If you are just using procedural geometry and do not need to load any materials, the web page should be loaded directly from the file system. Just double-click the HTML file in the file manager and it should run in your browser (address bar Looks like this: file:///yourFile.html)

Loading content from external files

If you download modules and materials from external files, due to the browser’s same-origin policy Security restrictions will cause a security exception and fail to load.

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:

JS Library Three.js Basics Introduction

Three.js How to Create a Scene

Three.js basic part learning

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!