Learn Three.js - Third Edition

Extruding from SVG

When we discussed THREE.ShapeGeometry, we mentioned that SVG follows pretty much the same approach of drawing shapes. SVG very closely matches how Three.js handles shapes. In this section, we'll look at how you can use a small library from https://github.com/asutherland/d3-threeD to convert SVG paths to a Three.js shape (Three.js also provides a specific THREE.SVGLoader, which is explained in Chapter 8, Creating and Loading Advanced Meshes and Geometries). For the 05-extrude-svg.html example, we've taken an SVG drawing of the Batman logo and used ExtrudeGeometry to convert it to 3D, as shown in the following screenshot:

43 FPS (6-60)

First, let's look at what the original SVG code looks like (you can also see this for ...