BabylonJs系列-6.纹理

BabylonJs系列-6.纹理

纹理可以修改物体本身的颜色，或者给物体覆盖图片，添加一些透明/透视效果。这里只列举一些简单的API，可以自行尝试效果。
todo 添加demo

API

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

使用

纹理一般是配合材质一起使用，将纹理添加到材质，材质再应用到模型上面

1. 镂空效果

需要配合有骨骼的模型，使用该API会显示模型骨骼。

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

2. 透明效果

var materialSphere1 = new BABYLON.StandardMaterial("texture1", scene);
materialSphere1.alpha = 0.1;

3. 覆盖图片

使用Babylon自带的Texture可以加载图片，再将图片添加到材质上

var materialSphere3 = new BABYLON.StandardMaterial("texture3", scene);
materialSphere3.diffuseTexture = new BABYLON.Texture(图片url, scene);

4. 图片纹理的位移

var materialSphere4 = new BABYLON.StandardMaterial("texture4", scene);
materialSphere4.diffuseTexture = new BABYLON.Texture(图片地址, scene);
materialSphere4.diffuseTexture.vOffset = 0.5;//Vertical offset of 50%
materialSphere4.diffuseTexture.uOffset = 0.5;//Horizontal offset of 50%

5. 图片纹理使用透明

这个挺有用的，如果threejs例子中有图片透明的效果，换到Babylon就是这个配置。

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;//图片透明计算

6.png纹理+背面展示

var materialSphere6 = new BABYLON.StandardMaterial("texture6", scene);
materialSphere6.diffuseTexture = new BABYLON.Texture(图片地址, scene);
materialSphere6.diffuseTexture.hasAlpha = true;//Have an alpha
materialSphere6.backFaceCulling = false;//Show all the faces of the element