javascript - Three.js 对象上的多种 Material 通过 OBJMTLLoader 加载

Question

我有一个模型的“.obj”和“.mtl”文件，我正在通过 OBJMTLLoader 加载它。 “.mtl”指定要应用于模型的纹理，three.js 加载模型并使用应用的纹理渲染它。

但事情是这样的。

加载对象后，我想在其上应用另一个纹理。这是因为第一个纹理表示物体的表面 Material 。第二个纹理是绘图，我想将其放置在模型的特定位置。

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

我看到 three.js 创建了 THREE.Object3D 的一个实例，并且该实例具有“children”数组和一个 THREE.Mesh 实例。

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

我调查了这个question about applying multiple textures and JSONLoader但没有找到答案。

我也尝试使用 new THREE.MeshFaceMaterial( materials )(如 this answer 中的建议)但未成功。

更新:

我尝试了@WestLangley 的建议来使用多 Material 对象，但我仍然无法在另一种 Material 之上渲染一种 Material 。

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

我正在按照建议使用 THREE.SceneUtils.createMultiMaterialObject，并将从 .obj 加载的主网格的克隆几何体传递给它。我还为它提供了 2 种纹理 - 一种用于整个表面，另一种用于模型的前表面。

但这行不通。我添加了 2 个复选框，用于切换相应 Material 的“可见”属性。您可以看到存在 Material ，但我无法从第二个下方看到第一个。

加载/渲染的症结如下:

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 将一个纹理应用到另一个纹理上。我看到一些 examples of using one texture但仍然不确定如何在重叠状态下显示两者。我也不确定如何将纹理定位在网格上的特定位置。

Answer 1

你有几个选择:

1. 您可以使用 Canvas 工具在 javascript 端混合图像，并使用单个纹理贴图创建单一 Material 。

2. 您可以从单个几何体和一系列 Material 创建多 Material 对象。 (这种方法只是创建多个相同的网格，每个网格具有一种 Material ，并且通常在其中一种 Material 是线框时使用。如果一种 Material 是透明的，它也可以正常工作。)

   THREE.SceneUtils.createMultiMaterialObject( geometry, materials );

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

这里是最简单的 three.js ShaderMaterial 示例，可实现两个纹理的混合:https://jsfiddle.net/6bg4qdhx/3/ .

---

编辑:另见 Is there a built-in way to layer textures within the standard PBR shader?

three.js r.92