如何在 ThreeJS 中将纹理放置到挤压几何体的一侧？

Question

在 ThreeJS 中，我通过加载 svg（我使用 SVGLoader）制作几何图形并挤压它。我也使用面部和侧面的材料。

这里是材料：

  const texture = new THREE.TextureLoader()
      .load('https://mail.dolodom.com/sendimg/admin/face2.jpg')
  var material = new THREE.MeshBasicMaterial( {
    map: texture,
  } );

  const texture2 = new THREE.TextureLoader()
      .load('https://mail.dolodom.com/sendimg/admin/side2.jpg')
  var material2 = new THREE.MeshBasicMaterial( {
    map: texture2,
  } );

几何：

    let extrGeometry = new THREE.ExtrudeGeometry(shape, {
      depth: 20,
      bevelThickness: 2,
      bevelSize: 0.5,
      bevelEnabled: true,
      bevelSegments: 3,
      curveSegments: 12,
      material: 0,
      extrudeMaterial: 1,
      UVGenerator: THREE.ExtrudeGeometry.BoundingBoxUVGenerator
    })

    var uvs = extrGeometry.faceVertexUvs[0];
    for (var i = 0; i < uvs.length; i++) {
      uv = uvs[i];
      for (var j = 0; j < uv.length; j++) {
        u = uv[j];
        u.x = (u.x - 0) / 700;
        u.y = (u.y - 0)  / 700;
      }
    }

    var mesh = new THREE.Mesh( extrGeometry, [material, material2] );

    group.add( mesh );

面部纹理可以，但侧面纹理不行。你可以看到face和side纹理

如何将第二个纹理映射到挤压几何体的一侧？

你可以看到full project on codepen

Answer 1

如何将第二个纹理映射到挤压几何体的一侧？

当然，这取决于您的用例。提高纹理质量的一种方法是在侧面纹理上使用THREE.RepeatWrapping，如下所示：

texture2.wrapT = THREE.RepeatWrapping;
texture2.repeat.y = 24;

在更新后的 codepen 中查看此方法：https://codepen.io/anon/pen/XGqypY?editors=1010

顺便说一句：我在您的代码中看到您为每个纹理创建了一个 TextureLoader 实例。这实际上是没有必要的。预期用途是为所有请求使用单个加载器实例。