Three.js Development Guide (10): Loading and Using Textures

    Apply textures to meshes

10.1 Using textures in materials

       Textures are used in a few different ways, they can be used to define the color of the mesh, and they can be used to define highlights, bumps, and reflections. But we'll look at the most basic method first, using a texture to assign a color to each pixel on the mesh.

       Load textures and apply to meshes : The most basic use of textures is to set maps on materials. Almost any image can be used as a texture. But in order to achieve the best effect, it is best to use a square image whose length and width are the power of 2. For example, images of size 256x256, 512x512, 1024x2014 are most suitable. Since textures need to be scaled up and down, pixels on a texture usually don't map one-to-one to pixels on a face.

       You can use mipmaps, a set of texture images, each one half the size of the previous one. These images are created when the texture is loaded, which produces a smoother filter effect.

       Create wrinkles with bump mapping : the purpose of bump mapping is to add thickness to the material

       Use normal maps to create more detailed bumps and wrinkles : With normal maps you can create very detailed models with very few vertices and faces.

       Use lightmaps to create fake shadows : pre-rendered shadows that can be used to simulate real shadows. Only valid for static scenes.

       Create fake reflections with environment maps : Computing ambient reflections is very CPU-intensive and often uses ray tracing algorithms.

       Specular Map : You can assign a shiny, brightly colored map to the material

10.2 Advanced uses of textures

       Custom UV Mapping : With UV mapping you can specify which part of the texture is displayed on the surface of the object.

       Draw a pattern on a canvas as a texture : Use the canvas as a texture to create an interactive canvas using the Literally library.

       Use video output as texture :


Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325468540&siteId=291194637