The machine uses Three. js to load the texture and three. js texture on the machine.

Source: Internet
Author: User

The machine uses Three. js to load the texture and three. js texture on the machine.
How to load a texture // first, create a texture
Var mapUrl = "../images/molumen_small_funny_angry_monster.jpg ";
Var map = THREE. ImageUtils. loadTexture (mapUrl );
// Then, create a phong material to display the light and shade effect, and pass the texture to the material.
Var material = new THREE. MeshPhongMaterial ({map: map });
// Create a geometric object
Var geometry = new THREE. CubeGeometry (1, 1, 1 );
// Integrate the ry object and texture into a collection of patches
Cube = new THREE. Mesh (geometry, material );
See WebGL Up and Running by Tony Parisi how to use local files

By default, WebGL does not allow the use of local textures and model files. If you are only using WebGL to draw ry or something, click the html file without texture loading and access it using the file protocol. The format displayed in the address bar is right: file: // C: /dir/to/example.html

Load External files

If you want to load external models and texture files, file loading from the file system due to security restrictions of the same-source policy will fail due to security exceptions. However, there are two solutions:

1. Reduce the security level of the browser

2. Create a server on the local machine and place the external files on the server for network file access.

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


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 behaviour 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. Then start Chrome executable with a command line flag:


Chrome -- allow-file-access-from-files
On Windows, the easiest is probably to create a special cut which has added flag (right-click on shortcut-> properties-> target ).


Firefox


Go to about: config
Find security. fileuri. strict_origin_policy parameter
Set it to false
Run local server


The simplest probably is to use Python's built-in http server.


If you have Python installed, it shoshould be enough to run this from a command line:


# 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:


Http: // localhost: 8000/


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


Ruby-r webrick-e "s = WEBrick: HTTPServer. new (: Port = & gt; 8000,: DocumentRoot = & gt; Dir. pwd); trap ('int') {s. shutdown}; s. start"
PHP also has a built-in web server, starting with php 5.4.0:


Php-S localhost: 8000
Node. js has a simple HTTP server package. To install:


Npm install http-server-g
To run:


Http-server.
Other simple alternatives are discussed here on Stack Overflow.


Of course, you can use any other regular full-fledged web server like Apache or nginx.


Example with lighttpd, which is a very lightweight general purpose webserver (on mac osx ):


Install it via homebrew brew install lighttpd
Create a configuration file called lighttpd. conf in the directory where you want to run your webserver. There is a sample in this page.
In the conf file, change the server.doc ument-root with the directory you want to serve
Start it with lighttpd-f lighttpd. conf
Navigate to http: // localhost: 3000/and it will serve static files from the directory you chose.


Threejs texture Problems

I also encountered this problem and I couldn't open both browsers to solve it.
I put it in apacche, so there is no texture. Do you know any other principles?
 
[Threejs] How can I display a 3D model with a texture?

3D models with Textures?

This is mainly integrated with 3D modeling software.
If it is 3 DMAX, export OBJ
For SKETCHUP, export the DAE

This is my exported DAE, which is very complete.

This is OBJ, and there are some issues with transparency.

If it is other industrial software such as ug soldwork autocad proe, export STL



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.