【babylonjs】babylonjs实践（七）--材质的纹理

Ws努力做全栈
2,261 阅读2分钟

背景

前面讲了，使用材质可以使你能够覆盖物体网格的颜色和纹理，它们需要在被光线照射下才能被看到。一种材质可以用来覆盖你所希望改变的物体的网格。

我们今天要讲纹理。

纹理由保存的图片组成。

使用diffuseTexture、specularTexture、emissiveTexture以及ambientTexture等属性中的一个或多个来设置一个材质的纹理。其中，ambientTexture只有在没有设置场景环境颜色的时候才被使用。

特别说明

加载纹理图片的时候，加载本地图片显示会有问题，图片加载不成功。页面就会呈现默认的红黑格子纹理。

直接改成在线图片即可，这个应该还是加载机制的一个问题。通过加载url图片绕过这个问题。

正文

纹理1-wireframe

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

效果是镂空效果。

image.png

纹理2-纯色加透明

                var materialSphere2 = new BABYLON.StandardMaterial("texture2", scene);
                materialSphere2.diffuseColor = new BABYLON.Color3(0, 0, 1); 
                materialSphere2.alpha = 0.3;

得到的是纯色+透明度。这里用的是点光源和diffuseColor漫反射颜色。

image.png

纹理3-图片纹理

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

前面特别说明的时候说了，注意图片加载，不然得到的是红黑格。

image.png

纹理4-图片纹理+翻转

                var materialSphere4 = new BABYLON.StandardMaterial("texture4", scene);
                materialSphere4.diffuseTexture = new BABYLON.Texture("http://10.101.16.11:5000/static/file/test.png", scene);
                materialSphere4.diffuseTexture.vOffset = 0.5;//Vertical offset of 50%
                materialSphere4.diffuseTexture.uOffset = 0.5;//Horizontal offset of 50%

这个就是纹理的位移，这个用处不大其实。

image.png

纹理5-png纹理+透明度

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

加了透明度。这个效果还ok。

image.png

纹理6-png纹理+背面展示

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

换个角度还是可以看到关闭了backFaceCulling后，展示了更多的信息。

image.png

API

结合上面的例子，我们把常用的配置项就可以列出来了。

  • wireframe，镂空
  • diffuseColor，直接给材质赋值颜色，这个是上一节的内容
  • alpha，直接给材质赋值透明度
  • diffuseTexture，漫反射纹理，加载一个new BABYLON.Texture就可以了，要是静态图片
  • diffuseTexture.vOffset，垂直翻转百分比
  • diffuseTexture.uOffset，水平翻转百分比
  • iffuseTexture.hasAlpha，是否有透明度
  • backFaceCulling，是否背景切除

其他配置项后面再整理。

总结

材质，new BABYLON.StandardMaterial就可以得到一种新的材质，给该材质可以是颜色，可以是纹理，同时可以设置透明度等等属性。最后给基本元素（物体）的材质属性赋值就可以了。

avatar
文章
阅读
粉丝