@threepipe/plugin-svg-renderer

Exports ThreeSVGRendererPlugin and BasicSVGRendererPlugin which provide support for rendering the 3d scene as SVG(Scalable Vector Graphics). The generated SVG is compatible with browser rendering and other software like figma, illustrator etc.

Example — Source Code — API Reference — GPLV3 License

bash

npm install @threepipe/plugin-svg-renderer

Note

This is still a WIP. API might change a bit

ThreeSVGRendererPlugin uses three-svg-renderer, which is a modified version of three-svg-renderer (GPLV3 Licenced). The plugin renderers meshes in the viewer scene to svg objects by computing polygons and contours of the geometry in view space. Check LokiResearch/three-svg-renderer for more details. In the modified version that is used here, support for some types of geometries is added and a rendered image in screen-space is used to create raster fill images for paths along with some other small changes. Check out the Example for demo. See also svg-geometry-playground example for usage with other plugins PickingPlugin, TransformControlsPlugin and GeometryGeneratorPlugin.

Note that this does not support all the features of three.js and may not work with all types of materials and geometries. Check the examples for a list of sample models that do and don't work.

BasicSVGRendererPlugin is a sample plugin using SVGRenderer from three.js addons. This renders all triangles in the scene to separate svg paths. Check the three.js docs for more details. Check out the Example for demo.

typescript

import {ThreeViewer} from 'threepipe'
import {ThreeSVGRendererPlugin} from '@threepipe/plugin-svg-renderer'

const viewer = new ThreeViewer({
  ...,
  rgbm: false, // this is required
})
const svgRender = viewer.addPluginSync(ThreeSVGRendererPlugin)
svgRender.autoRender = true // automatically render when camera or any object changes.
svgRender.autoMakeSvgObjects = true // automatically create SVG objects for all meshes in the scene.
// svgRender.makeSVGObject(object) // manually create SVG object for an object. (if autoMakeSvgObjects is false) 

// Now load or generate any 3d model. Make sure its not very big. And the meshes are optimized.
const model = await viewer.load<IOBject3D>('path/to/file.glb')

// clear the background of the viewer 
viewer.scene.backgroundColor = null
viewer.scene.background = null
        
// disable damping to get better experience.
viewer.scene.mainCamera.controls!.enableDamping = false

// hide the canvas to see the underlying svg node.
// note: do not set the display to none or remove the canvas as OrbitControls and other plugins might still be tracking the canvas.
viewer.canvas.style.opacity = '0'

// 3d pipeline can also be disabled like this if `drawImageFills` is `false` to get better performance. Do this only after loading the model.
// await viewer.doOnce('postFrame') // wait for the first frame to be rendered (for autoScale etc)
// viewer.renderManager.autoBuildPipeline = false
// viewer.renderManager.pipeline = [] // this will disable main viewer rendering

@threepipe/plugin-svg-renderer ​

@threepipe/plugin-svg-renderer