An experimental three.js SVG renderer written in Typescript to render 3D scenes as Vector Graphics. The renderer analyzes the geometry in the scene, builds a viewmap of the mesh edges and computes the visible and hidden contours to draw.
npm i three-svg-renderer
Documentation is still in progress.
const scene = new Scene();
const camera = new PerspectiveCamera();
// Gather meshes from the scene and setup SVGMesh
const meshes = new Array<SVGMesh>();
scene.traverse(obj => {
(obj as Mesh).isMesh && meshes.push(new SVGMesh(obj as Mesh));
});
// Setup the svg renderer and add pass to it
const renderer = new SVGRenderer();
// This pass will draw fills for meshes using the three.js material color
const fillPass = new FillPass();
// This pass will draw visible contours of meshes on top of fills
// using black color and solid line of width 1
const visibleContourPass = new VisibleContourPass({
color: "#000000",
width: 1
});
// This pass will draw hidden contours on top of visible and fills
// using red color, dash line of width 1
const hiddenContourPass = new HiddenContourPass({
color: "#FF0000",
width: 1,
dasharray: "2,2"
});
renderer.addPass(fillPass);
renderer.addPass(visibleContourPass);
renderer.addPass(hiddenContourPass);
// Get the SVG
renderer.generateSVG(meshes, camera, {w: 1000, h:1000})
.then((svg) => {
console.log(svg);
});
Generated using TypeDoc