通过OBJMTLLoader加载对象的三个.js多个材质

Question

我有一个模型的".obj"和".mtl"文件,我正在加载它OBJMTLLoader.".mtl"指定要应用于模型的纹理,并且three.js加载模型并使用应用的纹理渲染它就好了.

但这就是事情.

一旦加载了一个对象,我想在其上应用另一个纹理.这是因为第一纹理表示对象的表面材质.第二个纹理是一个绘图,我想定位在模型上的特定位置.

我的问题是:如何将第二个纹理应用到已加载(和纹理化)的对象上？

我看到three.js创建了一个实例THREE.Object3D,并且该实例具有带有一个实例的"children"数组THREE.Mesh.

当我尝试将纹理应用于该网格(mesh.material.map = texture)时,我失去了初始纹理.

我查看了关于应用多个纹理和JSONLoader但没有找到答案的问题.

我也尝试过使用new THREE.MeshFaceMaterial( materials )(如本答案所示),但没有成功.

更新:

我试过@WestLangley建议使用多材质对象,但仍然无法在另一个上面渲染一个材质.

我做了这个简单的演示,改编自three.js OBJLoader - http://dl.dropboxusercontent.com/u/822184/webgl_multiple_texture/index.html

我THREE.SceneUtils.createMultiMaterialObject按照建议使用它,传递克隆从.obj加载的主网格的几何体.我也给它2个纹理 - 一个用于整个表面,另一个用于模型的前表面.

但这不起作用.我添加了2个复选框,用于切换相应材料的"可见"属性.你可以看到材料存在,但我看不到第二个下面的第一个.

加载/渲染的关键如下:

var texture = THREE.ImageUtils.loadTexture('fabric.jpg');
var texture2 = THREE.ImageUtils.loadTexture('table.jpg');

texture2.offset.set(-0.65, -2.5);
texture2.repeat.set(4, 4);

var loader = new THREE.OBJLoader();
loader.addEventListener( 'load', function ( event ) {

  var mainMesh = event.content.children[0].children[0];

  multiMaterialObject = THREE.SceneUtils.createMultiMaterialObject( 
    mainMesh.geometry.clone(), [
      new THREE.MeshLambertMaterial({ map: texture2 }),
      new THREE.MeshLambertMaterial({ map: texture })
    ]);

  multiMaterialObject.position.y = -80;
  scene.add(multiMaterialObject);
});

loader.load( 'male02.obj' );

更新#2

在这一点上,我认为最好的办法就是THREE.ShaderMaterial将一个纹理应用到另一个纹理上.我看到一些使用一个纹理的例子,但仍不确定如何在叠加状态下显示两者.我也不确定如何将纹理定位在网格上的特定位置.

Answer 1

你有几个选择:

1. 您可以使用画布工具在javascript端混合图像,并使用单个纹理贴图创建单个材质.

2. 您可以从单个几何体和材质数组创建多材质对象.(这种方法只创建了多个相同的网格,每个网格都有一种材质,通常在其中一种材质为线框时使用.如果一种材质是透明的,它也可以正常工作.)

   THREE.SceneUtils.createMultiMaterialObject( geometry, materials );

3. 您可以使用自定义实现多纹理效果ShaderMaterial.有两个纹理输入,并在着色器中实现颜色混合.

这里有一个关于ShaderMaterial实现两种纹理混合的最简单的三种可能的例子:https://jsfiddle.net/6bg4qdhx/3/ .

编辑:另请参阅标准PBR着色器中是否有内置的图层分层方法？

three.js r.92