three.js - 如何使用多个纹理？答案

【问题标题】：three.js - How to use multiple textures?three.js - 如何使用多个纹理？
【发布时间】：2019-11-23 02:26:05
【问题描述】：

好的，你好。我刚刚进入 threejs。我目前正在开发一种积木游戏（比较 Minecraft）。

我决定不将整个程序基于对象，而是基于平面。（每个 PlaneGeometry 类）

由于我几乎完成了渲染器的编写，我想使用具有不同纹理的不同块 - 就像在我的世界中一样 - 因为到目前为止每个块的纹理都是相同的。

如何在一个 Geometry 对象上使用不同的 THREE.Mesh 纹理？

这有可能吗？有人知道我该怎么做吗？

我在下面发布了我的部分代码：

/* geometry.js */

let size = 100;
let matrix = new THREE.Matrix4();

for (let z = 0; z < world.size.depth; z++) {
  for (let x = 0; x < world.size.width; x++) {
    for (let y = 0; y < world.size.height; y++) {
      matrix.makeTranslation(
        x * size - (world.size.width / 2) * size,
        y * size,
        z * size - (world.size.depth / 2) * size
      );
      // generate 6 PlaneGeometry's (6 cube sides)
      // and merge visible ones to the geometry
      geometry.merge(PlaneGeometry_N_0to5, matrix);
    }
  }
}
geometry = new THREE.BufferGeometry().fromGeometry(geometry);

/* texture.js */

// make this stuff for multiple textures (different $path$) for sure
let loader = new THREE.TextureLoader();
let texture = loader.load("$path$"); // path of texture
texture.magFilter = THREE.NearestFilter;
texture.minFilter = THREE.LinearMipMapLinearFilter;

let mesh = new THREE.Mesh(
  geometry,
  new THREE.MeshLambertMaterial({
    map: texture,
    vertexColors: THREE.VertexColors,
    side: THREE.DoubleSide
  })
);
scene.add(mesh)

【问题讨论】：

标签： javascript html three.js 3d rendering

【解决方案1】：

我不确定我是否正确理解了您的问题，但几何对象不依赖于材质。因此，您可以为不同的网格重用单个几何体并对其应用不同的材质。每种材料当然可以指代不同的纹理。简单代码示例：

const loader = new THREE.TextureLoader();
const texture1 = loader.load( 'path/to/texture1.jpg' );
const texture2 = loader.load( 'path/to/texture2.jpg' );

const material1 = new THREE.MeshLambertMaterial( { map: texture1 } );
const material2 = new THREE.MeshLambertMaterial( { map: texture2 } );

const mesh1 = new THREE.Mesh( geometry, material1 );
const mesh2 = new THREE.Mesh( geometry, material2 );

顺便说一句：重用材质对象也很有意义。所以没有必要为每个网格创建一个材质。

three.js R106

【讨论】：

【解决方案2】：

您可以将多个纹理应用于同一几何体，只需创建一个空白纹理并将每个现有纹理堆叠为该空白纹理上的水平切片。然后，为几何图形的每个部分重新映射 uv。例如：如果你想让一个立方体有 5 个面和一个纹理，1 个面有另一个纹理，只需创建一个带有两个条纹的空白纹理：底部条纹将映射到 uv: (0,0)-(0.5, 1) 和上面的条纹：(0.5,0)-(1,1) 然后，在您的立方体几何体中，您可以将 5 面的 uvs 从 (0,0) 映射到 (0.5,1)，第 6 面将从上面的条带获取纹理，将其 uvs 从 (0.5, 0) 映射到(1,1) :-)

【讨论】：