How do you put an svg on face of mesh?

Questions
, , , , ,
1

I am a newbie at three fiber, and I was wondering how to place an svg as a material on a mesh element.

So far I have this as my code:

export default function Tile() {
    const { nodes, materials } = useGLTF('/3D_Assets/Tile_Separate-transformed.glb')

	const loader = new SVGLoader();
	const svgData = useLoader(SVGLoader, '/public/presets_library/symbol_presets/snail_shell.svg')
	const svgGroup = new THREE.Group();
  
	svgGroup.scale.y *= -1;
	svgData.paths.forEach((path) => {
	  const shapes = SVGLoader.createShapes(path);
 
	  shapes.forEach((shape) => {
		svgGroup.add(shape);
	  });
	});
  
	

    return (
		<group dispose={null}>
			<mesh geometry={nodes.Tile_Back_Face.geometry} material={materials.Tile_Back_Face} />
			<mesh geometry={svgData} material={materials.Tile_Back_Face} />
			<mesh geometry={nodes.Tile_Body_1.geometry} material={materials.Tile_Front} />
			<mesh geometry={nodes.Tile_Body_2.geometry} material={materials.Tile_Body} />
			<mesh geometry={nodes.Tile_Body_3.geometry} material={materials.Tile_Back} />
		</group>
    )
}

useGLTF.preload('/3D_Assets/Tile_Separate-transformed.glb')

I’ve been looking at this blog, but it was using three js instead of three fiber. If there is anything that I might have missed, please let me know.

Thank you.

2

According to Chat GPT, try this

Yes, you can render SVG to a texture in WebGL, which is particularly relevant since you’re using three.js. In three.js, textures can be created from various sources, including SVG images. The basic idea is to draw the SVG onto an HTML canvas and then use that canvas as the source for a texture. Here’s a general approach:

  1. Create an SVG Image: First, you need an SVG image. This can be an SVG file or an SVG string defined within your code.

  2. Draw SVG onto Canvas: Create an HTML canvas element and draw the SVG image onto this canvas using the drawImage method of the canvas context. You might need to convert the SVG into a format that can be drawn onto the canvas, such as converting it to a data URL.

  3. Create Texture from Canvas: Use the canvas as the source for a Three.js texture. This texture can then be applied to any material.

Here’s a basic example in JavaScript, assuming you are familiar with three.js setup:

// Create a new canvas element
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// Set the canvas size
canvas.width = 512; // You can adjust the size as needed
canvas.height = 512;

// Create an SVG image
const svgImage = new Image();
const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">...your SVG content...</svg>`;
const svgBlob = new Blob([svgString], {type: 'image/svg+xml;charset=utf-8'});
const url = URL.createObjectURL(svgBlob);

svgImage.onload = () => {
    // Draw the SVG onto the canvas
    ctx.drawImage(svgImage, 0, 0);

    // Use the canvas as the source for a texture
    const texture = new THREE.Texture(canvas);
    texture.needsUpdate = true;

    // Create material with this texture
    const material = new THREE.MeshBasicMaterial({ map: texture });

    // Create a mesh and add it to the scene
    const geometry = new THREE.PlaneGeometry(1, 1);
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    // Render your scene as usual
};

// Set the source of the image to the SVG URL
svgImage.src = url;

This is a basic example, and depending on your specific requirements, you might need to adjust the canvas size, SVG size, or other parameters. Keep in mind that working with SVG in WebGL can have some limitations, especially regarding SVG features that might not be fully supported when rendered onto a canvas.

3

I took the GitHub code from the example they had for displaying svgs and tweaked some things to make it work for three fiber, and here is the result:

	function loadSymbol() {

		const finalSvg = [];
        // This will end up being an array of objects, each object containing 
        // a material and geometry that will be mapped over and added to a mesh.

		const texture = useLoader(SVGLoader, '/public/presets_library/symbol_presets/shooting_star.svg')

		let renderOrder = 0;
        // The renderOrder prevents the pieces of the svg from 
        // flickering in and out of each other after being mapped over.

		for ( const path of texture.paths ) {

			const fillColor = path.userData.style.fill;

			if ( fillColor !== undefined && fillColor !== 'none' ) {

				const material = new THREE.MeshBasicMaterial( {
					color: new THREE.Color().setStyle( fillColor ),
					opacity: path.userData.style.fillOpacity,
					transparent: true,
					side: THREE.DoubleSide,
					depthWrite: false,
				} );

				const shapes = SVGLoader.createShapes( path );

				for ( const shape of shapes ) {

					const geometry = new THREE.ShapeGeometry( shape );
					geometry.applyMatrix4(new THREE.Matrix4().makeScale ( 1, -1, 1 ))
					// Without this, the svg would be displayed upside down

					finalSvg.push({
						material: material,
						geometry: geometry
					})
					const mesh = new THREE.Mesh( geometry, material );
					mesh.renderOrder = renderOrder ++;



				}

			}

			const strokeColor = path.userData.style.stroke;

			if ( strokeColor !== undefined && strokeColor !== 'none' ) {

				const material = new THREE.MeshBasicMaterial( {
					color: new THREE.Color().setStyle( strokeColor ),
					opacity: path.userData.style.strokeOpacity,
					transparent: true,
					side: THREE.DoubleSide,
					depthWrite: false,
				} );

				for ( const subPath of path.subPaths ) {

					const geometry = SVGLoader.pointsToStroke( subPath.getPoints(), path.userData.style );
					geometry.applyMatrix4(new THREE.Matrix4().makeScale ( 1, -1, 1 ))
					// Without this, the svg would be displayed upside down

					finalSvg.push({
						material: material,
						geometry: geometry
					})

					if ( geometry ) {

						const mesh = new THREE.Mesh( geometry, material );
						mesh.renderOrder = renderOrder ++;

						

					}

				}

			}

		}

		return finalSvg;
		
	}

	let symbolTexture = loadSymbol();

Here is the svg being mapped over in jsx:

<group>
    {
        symbolTexture?.map(({material, geometry}, index) => {
            return (
                <mesh 
                    key={material.uuid + index} 
                    renderOrder={index} 
                    position={symbolPosition} 
                    scale={symbolScale} 
                    geometry={geometry} 
                    material={material}
                ></mesh>
            )
        })
    }
</group>
1 Like