three.js如何设置canvas纹理尺寸

Question

比如我有一个 通过 extrudeGeometry 生成的立体几何
然后有一个canvas纹理

function textures () {
    var canvas = document.createElement( 'canvas' );
    var ctx = canvas.getContext( '2d' );

    canvas.width = 30
    canvas.height = 30

    var colors = {
      border: '#3c3443',
      top: '#9d94a7',
      bottom: '#796e8c'
    }

    ctx.fillStyle = colors.border
    ctx.fillRect(0, 0, 30, 30)
    ctx.fillStyle = colors.top
    ctx.fillRect(2, 2, 12, 12)
    ctx.fillStyle = colors.top
    ctx.fillRect(16, 2, 12, 12)
    ctx.fillStyle = colors.bottom
    ctx.fillRect(2, 16, 12, 12)
    ctx.fillStyle = colors.bottom
    ctx.fillRect(16, 16, 12, 12)

    var canvasTexture = new THREE.Texture(canvas);
    canvasTexture.wrapS = THREE.RepeatWrapping;
    canvasTexture.wrapT = THREE.RepeatWrapping;
    canvasTexture.needsUpdate = true;
    
    return canvasTexture;
  }

把纹理加到这个几何材质上

var material = new THREE.MeshLambertMaterial({map: textures()})

最后生成的纹理很小

怎么设置才能放大纹理呢？

Answer 1

通过设置uv可以改变纹理的缩放比例，修改geometry对象的faceVertexUvs，具体uv的设置方法可以参照three.js官方文档。