Three.js Development Guide (4): Using Three.js Materials

      Materials can be combined with geometry to form a mesh. Materials are like the skin of an object, determining how the geometry looks. You can decide whether a piece of geometry looks like metal, is transparent or not, and whether it is displayed as wireframe.



4.1 Understanding Common Properties

    Material base class, THREE.Material.

The common attributes are divided into three categories:

    Basic properties: You can control the transparency of objects, whether they are visible, or how objects are referenced.

    Blend Properties: Determines how objects blend with the background

    Advanced properties: methods that can control how the underlying WebGL renders objects up and down

4.2 Start with simple mesh materials (base, depth and face)

    MeshBasicMaterial for simple surfaces :

    MeshDepthMaterial based on depth shading :

    Joint material :

    Compute the MeshNormalMaterial of the normal color :

    A MeshFaceMaterial that assigns a material to each face :

4.3 Learning Advanced Materials

     MeshLambertMaterial for dull, matte surfaces:

     MeshPhongMaterial for shiny surfaces:

     Create your own shaders with ShaderMaterial: Shaders are not written in JavaScript. Shaders can only be written in a C-like GLSL language.

4.4 Materials for line segment geometry

     LineBasicMaterial: The color, width, endpoint and connection point properties of the line segment can be set through the line segment basic material.

     LineDashedMaterial: The same properties as LineBasicMaterial, but by specifying the length of dashes and spaces, a dashed line effect can be created.


Guess you like

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