svg-to-3d-mesh

v0.0.1

Published

3 years ago

Render SVG path into 3d triangulated mesh

Downloads

0High
0Medium
0Low

anhnicky66

svg 3d mesh web-components

Introduction

This Stencil component is a wrapper of @mattdesl's work on rendering SVG path string into 3D triangulated mesh.

Installation

npm install svg-to-3d-mesh --save

yarn add svg-to-3d-mesh

Usage

Without a Framework

<html>
  <head>
    <script type="module">
      import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/svg-to-3d-mesh/loader/index.es2017.js';
      defineCustomElements();
    </script>
  </head>
  <body>
    <svg-to-3d-mesh></svg-to-3d-mesh>
    <script>
        const svgTo3DMeshElement = document.querySelector("svg-to-3d-mesh");
        svgTo3DMeshElement.svgs = [
            "https://icons.getbootstrap.com/icons/alarm-fill.svg",
            "https://icons.getbootstrap.com/icons/basket.svg",
            "https://icons.getbootstrap.com/icons/battery-half.svg"
        ];
        svgTo3DMeshElement.explodeInDuration = 0.5;
        svgTo3DMeshElement.explodeOutDuration = 1;
        svgTo3DMeshElement.color = "#ffffff"
        svgTo3DMeshElement.backgroundColor = "#c42b6b";
    </script>
  </body>
</html>

With VueJS

In main.js (or main.ts) file.

import Vue from "vue";
import { applyPolyfills, defineCustomElements } from 'svg-to-3d-mesh/loader';

Vue.config.ignoredElements = [/svg-to-3d-mesh/];
applyPolyfills().then(() => {
    defineCustomElements();
});

new Vue({
    render: h => h(App)
}).$mount('#app');

the component will then be avaiable in any of the Vue components

<div style="height: 800px; width: 100%;">
    <svg-to-3d-mesh
        :background-color.prop="'#c42b6b'"
        :color.prop="'ffffff'"
        :svgs.prop="[
            'https://icons.getbootstrap.com/icons/alarm-fill.svg',
            'https://icons.getbootstrap.com/icons/basket.svg',
            'https://icons.getbootstrap.com/icons/battery-half.svg'
        ]"
    ></svg-to-3d-mesh>
</div>

Options

svgs (default [])
- An array of URL to the svg file
height : The height of the canvas. By default, the canvas height will be the same as it's container.
color : The converted 3d mesh color
backgroundColor : The canvas background color
opacity : The rendered scene opacity
explodeInDuration : The duration of triangulated mesh explode-in animation
scaleUpDuration : The duration of triangulated mesh scale-up animation
scaleDownDuration : The duration of triangulated mesh scale-down animation
explodeOutDuration : The duration of triangulated mesh explode-out animation

Published

Vulnerabilities

Links

Maintainers

Keywords