Load svg model on mesh

Questions
, , , , ,
1

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’ });
draco.setDecoderPath(‘/draco/’);
loader.setDRACOLoader(draco);

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
        });


      }

    }
  });

  scene.current.add(gltf.scene);
}, 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

2

See this thread and this example.

1 Like