在three.js中将多个材质添加到单个网格中

我一直在做一些阅读,似乎无法找出一个好办法做到这一点..

我有一个简单的地球仪上的材料就像这样:

const earthGeomerty = new THREE.SphereGeometry( 4, 48, 48 ); const earthDiffuse = loader.load('assets/drought_earth_texture.png'); const earthSpec = loader.load('assets/drought_earth_texture_bump.png'); const material = new THREE.MeshPhongMaterial( { specular: 0xffffff, map: earthDiffuse, specularMap: earthSpec, normalScale: new THREE.Vector2( 1, 1 ), shininess: 5, transparent: true, depthTest: true, depthWrite: false, polygonOffset: true, polygonOffsetFactor: - 4, wireframe: false } ); 

我把这种材料应用到我的earthGeometry如下:

 const sphere = new THREE.Mesh( earthGeomerty, material ); 

但现在我想添加一个大气焕发,我发现一个很好的扩展和创建像这样:

 const atmosphereMaterial = THREEx.createAtmosphereMaterial(); 

但经过大量的阅读后,我不确定如何使用materialatmosphereMaterial material到我的单个sphere网格。

任何帮助? 谢谢!

首先,代码存在问题,使用TextureLoader时应该使用callback函数 ,而使用Promise时应该使用callback函数 ,而您的代码不会等待纹理加载,并且材质将不起作用。

但经过大量的阅读,我不确定如何使用材料和大气材料到我的单个球形网格。

简而言之,您不能使用Three.js将两个材质添加到同一个网格,材质是耦合的顶点片段着色器,几何graphics是vector位置的arrays。

您可以使用ShaderMaterial使用自定义材质,因此您可以创建一个自定义着色器来组合这两个效果,然后可以将材质应用到网格。

或者你可以简单地使用两个网格物体,并将它们绑定到一个父Object3D 。

像这样的东西:

 var earthObj = new THREE.Object3D(); var sphereMesh = new THREE.Mesh(geometry, material); earthObj.add(sphereMesh); var atmosphereMaterial = THREEx.createAtmosphereMaterial(); earthObj.add(atmosphereMaterial); 

重要的是要知道,孩子网格会从父母那里得到起源。 每个平移,旋转都与父网格位置有关,这对于构建具有多个网格的复杂对象有很大的意义。

我前段时间做了一个关于使用多个纹理和多个网格的例子 。

Three.js中的一个网格中可以有多个材质。 向Mesh构造函数提供一组材质,而不是单个材质。 然后,您还必须在几何中指定顶点组。 如果你愿意,你可以指定组包含相同的顶点,只有不同的材质索引。

也可以使用相同的几何体定义多个网格,但使用独特的材质。 如果你喜欢,你可以添加一个作为另一个的孩子。