background

As mentioned earlier, using materials allows you to overlay the colors and textures of the object mesh that need to be seen under light. A material that can be used to overlay the mesh of the object you wish to change.

We’re going to talk about texture today.

Textures are made up of saved images.

Use one or more of the diffuseTexture, specularTexture, emissiveTexture, and ambientTexture attributes to set the texture of a material. The ambientTexture is only used when the environment color is not set.

Special instructions

[Bug Mc-10868] – Loading local images is not successful when loading texture images. The page will display the default red and black grid pattern.

This should still be an issue with the loading mechanism. Get around this problem by loading the URL image.

The body of the

1 – wireframes texture

    var materialSphere1 = new BABYLON.StandardMaterial("texture1", scene);
    materialSphere1.wireframe = true;
Copy the code

The effect is hollow out.

Texture 2- Solid color with transparency

var materialSphere2 = new BABYLON.StandardMaterial("texture2", scene); materialSphere2.diffuseColor = new BABYLON.Color3(0, 0, 1); MaterialSphere2. Alpha = 0.3;Copy the code

The result is a solid color + transparency. Point light and diffuseColor colors are used here.

Texture 3- Image texture

var materialSphere3 = new BABYLON.StandardMaterial("texture3", scene); MaterialSphere3. DiffuseTexture = new BABYLON. Texture (" http://10.101.16.11:5000/static/file/test.png ", the scene).Copy the code

In the previous special instructions, pay attention to the image load, otherwise you will get a red black.

Texture 4- Picture texture + flip

var materialSphere4 = new BABYLON.StandardMaterial("texture4", scene); MaterialSphere4. DiffuseTexture = new BABYLON. Texture (" http://10.101.16.11:5000/static/file/test.png ", the scene). MaterialSphere4. DiffuseTexture. VOffset = 0.5; / / Vertical offset of 50% materialSphere4. DiffuseTexture. UOffset = 0.5; //Horizontal offset of 50%Copy the code

This is the displacement of the texture, which is not really useful.

Texture 5- PNG texture + Transparency

var materialSphere5 = new BABYLON.StandardMaterial("texture5", scene); MaterialSphere5. DiffuseTexture = new BABYLON. Texture (" http://10.101.16.11:5000/static/file/test2.png ", the scene). materialSphere5.diffuseTexture.hasAlpha = true; //Has an alphaCopy the code

Add transparency. This effect is ok.

Texture 6- PNG texture + back display

var materialSphere6 = new BABYLON.StandardMaterial("texture6", scene); MaterialSphere6. DiffuseTexture = new BABYLON. Texture (" http://10.101.16.11:5000/static/file/test3.png ", the scene). materialSphere6.diffuseTexture.hasAlpha = true; //Have an alpha materialSphere6.backFaceCulling = false; //Show all the faces of the elementCopy the code

From another Angle, you can see that even more information is displayed when backFaceCulling is turned off.

API

Using the above examples, we can list the common configuration items.

  • Wireframes, hollow out
  • DiffuseColor, which assigns the color directly to the material, was covered in the previous section
  • Alpha, assigns transparency to the material directly
  • DiffuseTexture, diffuseTexture, load a new BABYLON.Texture will do, if it is a static image
  • DiffuseTexture. VOffset, vertical turnover percentage
  • DiffuseTexture. UOffset, horizontal reversal percentage
  • IffuseTexture. HasAlpha, whether there is transparency
  • BackFaceCulling, with or without background excision

Other configuration items will be sorted out later.

conclusion

Material, New BABYLON.StandardMaterial gives you a new material, which can be color, texture, transparency, etc. Finally, assign the material attribute to the base element (object).