Personally, I would recommend using Three.JS over BabylonJs as it is easier to handle and has a smaller size.
If you're interested, here is an example code snippet that might be helpful for achieving what you are looking for:
To transfer an SVG from FabricJS to ThreeJS, you simply need to extract the SVG and then place it in ThreeJS.
// --- Initializing the threejs scene
// ----------------------
const scene = new THREE.Scene();
const ratio = window.innerWidth / window.innerHeight;
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
const camera = new THREE.PerspectiveCamera(100, ratio, 0.01, 1000);
camera.position.z = 300;
document.querySelector("body").appendChild(renderer.domElement);
// Resizing and updating the camera
window.addEventListener('resize', function(e) {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
// Adding axes helper
const axesHelper = new THREE.AxesHelper(500);
scene.add(axesHelper);
// --- Main part, loading and parsing SVG
// ---------------------------------
const svgMarkup = document.querySelector('svg').outerHTML;
// Note: SVG Loader is not included in the main three.js bundle so needs to be loaded separately
// Refer to this link for more info on how to include it - https://threejs.org/docs/#examples/en/loaders/SVGLoader
const loader = new THREE.SVGLoader();
const svgData = loader.parse(svgMarkup);
// Group used for all SVG paths
const svgGroup = new THREE.Group();
// Inverting Y axis for imported SVGs
svgGroup.scale.y *= -1;
const material = new THREE.MeshNormalMaterial();
// Loop through parsed paths
svgData.paths.forEach((path, i) => {
const shapes = path.toShapes(true);
// Each path consists of multiple shapes
shapes.forEach((shape, j) => {
// Extrude each shape
const geometry = new THREE.ExtrudeGeometry(shape, {
depth: 20,
bevelEnabled: false
});
// Creating a mesh and adding it to the group
const mesh = new THREE.Mesh(geometry, material);
svgGroup.add(mesh);
});
});
// Centering elements within the group
svgGroup.children.forEach(item => {
item.position.x -= size.x / 2;
item.position.y -= size.y / 2;
});
// Adding the SVG group to the scene
scene.add(svgGroup);
// --- Animation loop
// ------------------
function animate() {
renderer.render(scene, camera);
// Rotating the group
svgGroup.rotation.y += 0.005;
requestAnimationFrame(animate);
}
animate();
svg {
display: none;
}
canvas {
display: block;
}
a {
font-family: Helvetica, Arial, sans-serif;
font-size: 15px;
padding: 10px 16px;
display: block;
position: fixed;
bottom: 0;
right: 0;
color: #ddd;
transition: all 0.25s;
}
a:hover {
color: #3498db;
}
<script src="https://unpkg.com/three@0.131.3/build/three.js"></script>
<script src="https://unpkg.com/three@0.131.3/examples/js/loaders/SVGLoader.js"></script>
<svg width="202px" height="202px" viewBox="0 0 202 202" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path fill="none" d="M201,1 L201,201 L1,201 L1,1 L201,1 Z M53.27053,71 L37.6666667,71 L37.6666667,134.333333 L53.27053,134.333333 L53.27053,86.6038647 C59.2367133,86.879227 66.1207733,91.1014493 66.1207733,99.9130433 L66.1207733,134.333333 L80.4396133,134.333333 L80.4396133,99.9130433 C80.4396133,91.1014493 87.32367,86.879227 93.2898567,86.6038647 L93.2898567,134.333333 L110.63768,134.333333 L110.63768,86.6038647 C116.603863,86.879227 123.487923,91.1014493 123.487923,99.9130433 L123.487923,134.333333 L137.806763,134.333333 L137.806763,99.9130433 C137.806763,91.1014493 144.69082,86.879227 150.657003,86.6038647 L150.657003,134.333333 L166.26087,134.333333 L166.26087,71 L150.657003,71 C142.120773,71 133.859903,75.589372 130.647343, 80.178744 C127.434783,75.589372 119.173913,71 110.63768,71 L93.2898567,71 C84.7536233,71 76.4927533,75.589372 73.2801933,80.178744 C70.0676333,75.589372 61.8067633,71 53.27053,71 Z" stroke="#979797"></path></svg>