Question

我刚刚开始使用threejs，而我想做的第一件事就是将纹理应用于模型。我可以用以下内容加载PNG纹理：

var material = new THREE.MeshBasicMaterial({
    map: THREE.ImageUtils.loadTexture('textures/wood.png'),
});

object.material = material;

它完全适合，无需做其他任何事情。我假设已经使用正确的选项（因为PNG非常适合）导出了.obj，所以我尝试改用SVG创建相同的纹理。

var canvasElement = document.getElementById('svgTexture');
var img = new Image();
img.onload = function() {
  canvasElement.getContext('2d').drawImage(img, 0, 0);

  var texture = new THREE.CanvasTexture(
    canvasElement,
    THREE.UVMapping,
    THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping,
    THREE.LinearFilter, THREE.LinearFilter,
  );

  material = new THREE.MeshBasicMaterial({
    map: texture
  });
}

img.src = 'textures/wood.svg';

不幸的是，SVG纹理已加载，但映射全部弄乱了。如果我确实使用了PNG，似乎Threejs可以“使用”导出的UVMap，而使用SVG则不能。

注意：两个文件的纹理相同，尺寸相同。的确，PNG是由带有SVG转换器（OS X）的SVG直接创建的。

Threejs-如何正确地将svg纹理应用于.obj文件

0 个答案: