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;

在更新的代码笔中检查这种方法：https://codepen.io/anon/pen/XGqypY?editors=1010

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

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

1 个答案: