Threejs - Как правильно применить текстуру SVG к файлу .obj - PullRequest
Новая
       65

Threejs - Как правильно применить текстуру SVG к файлу .obj

1 голос
/ 27 июня 2019

Я только начал играть с threejs, и первое, что я пытаюсь сделать, это применить текстуры к моделям. Я могу загрузить текстуру PNG с чем-то вроде: 

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

object.material = material;

и идеально подходит к 3D-модели, не делая ничего другого. Я предполагаю, что экспортировал .obj с правильными параметрами (так как PNG подходит идеально), поэтому я попытался создать такую ​​же текстуру из 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 загружается, но отображение все испорчено . Кажется, Threejs может «использовать» экспортированные UVMaps, если я использую PNG, тогда как с SVG это невозможно.

ПРИМЕЧАНИЕ. Оба файла имеют одинаковую текстуру и одинаковые размеры. Действительно, PNG был создан прямо из SVG с SVG Converter (OS X).

...