Load svg model on mesh

I have an SVG file that I want to place as a texture on a mesh layer

const loader = new GLTFLoader();
const draco = new DRACOLoader();
draco.setDecoderConfig({ type: ‘js’ });

loader.load('model/GLTF/GLTF.gltf', (gltf) => {

  var textureloader = new THREE.TextureLoader();

  gltf.scene.traverse((child) => {
    if (child.isMesh) {

      if (child.name === 'Cloth_mesh_1') {

        textureloader.load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/911157/good-morning-three.svg', function (texture) {
          texture.repeat.set(0.1, 0.1);
          var material = new THREE.MeshStandardMaterial({ map: texture });

          child.material = material



}, undefined, (error) => {
  console.error('Error loading GLTF model:', error);

When I write the above code, the part of the model where the SVG is placed becomes black
Can you please guide me in writing codes

See this thread and this example.

1 Like