返回列表 发新帖

babylonjs教程(25)-使用多重材料(Multi-Materials)

[复制链接]

138

主题

171

帖子

2564

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2564
发表于 2016-6-22 13:16:41 | 显示全部楼层 | 阅读模式
在前面的文章,我们讨论了光源以及它如何影像对象的外观。今天我们要讨论一个更加复杂的概念:多重材料。

我们在另外一篇文章中看到,对象使用材料是为了定义(连同光源)它看起来的样子。

多重材料是应用不同的材料在同一个对象的不同部分,正如你在下面屏幕截图所看到的(来自 www.babylonjs.com)。

0513.image_thumb_69C156E1.png

为了定义多重纹理你首先要定义一些标准材料:
  1. var material0 = new BABYLON.StandardMaterial("mat0", scene);
  2. material0.diffuseColor = new BABYLON.Color3(1, 0, 0);
  3. material0.bumpTexture = new BABYLON.Texture("normalMap.jpg", scene);


  4. var material1 = new BABYLON.StandardMaterial("mat1", scene);
  5. material1.diffuseColor = new BABYLON.Color3(0, 0, 1);


  6. var material2 = new BABYLON.StandardMaterial("mat2", scene);
  7. material2.emissiveColor = new BABYLON.Color3(0.4, 0, 0.4);
复制代码

然后你可以创建一个multi-material,来收集它们:
  1. var multimat = new BABYLON.MultiMaterial("multi", scene);
  2. multimat.subMaterials.push(material0);
  3. multimat.subMaterials.push(material1);
  4. multimat.subMaterials.push(material2);
复制代码

你现在可以用多材料影响你的网格:
  1. var sphere = BABYLON.Mesh.CreateSphere("Sphere0", 16, 3, scene);
  2. sphere.material = multimat;
复制代码

如果你这样做,你将会看到这个球只用了第一个submaterial(红色凸起的那个)。这是因为默认网格设计只用一个材料。

你可以指定特定的材料用于网格的特定部分通过使用subMeshes属性。默认情况下,每个网格仅仅只有一个子网格覆盖到了整个网格上面。

为了定义多重网格,你仅仅需要使用下面代码:
  1. sphere.subMeshes = [];
  2. var verticesCount = sphere.getTotalVertices();

  3. sphere.subMeshes.push(new BABYLON.SubMesh(0, 0, verticesCount, 0, 900, sphere));
  4. sphere.subMeshes.push(new BABYLON.SubMesh(1, 0, verticesCount, 900, 900, sphere));
  5. sphere.subMeshes.push(new BABYLON.SubMesh(2, 0, verticesCount, 1800, 2088, sphere));
复制代码

在这个例子中我们有三部分:

  • 第一部分从0开始到900
  • 第二部分从900开始到1800
  • 第二部分从1800开始到3880

子网格的定义有:

  • 使用材料的索引(这个索引用于从multi-material的subMaterial集合中选择正确的材料来使用)
  • 第一个顶点的索引和使用顶点的数量(用于优化碰撞的东西)
  • 指数的索引和指数的数量
  • 祖先网格

用上面的代码,球体的顶部部分使用第一个材料,中间部分使用第二个材料,最后一个材料使用在球体的底部。

回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表