Open2022/12/29にコメント追加1

Three.jsのSVGLoaderでstrokeをdepth有りのgeometryにしたい！

ゴール

SVGで設定されているstrokeはpathの境界線が中央に来るように指定されたstroke-widthの幅で描画される。

今回は下記条件を満たすようなプログラムの作成をゴールとする。

SVGファイルをロードする際はSVGLoaderを利用している。
SVGの読み込みに成功すると、ShapePathの配列を返却する。

SVGファイルのpathで記述されている部分については、ShapePathで利用できるtoShapesを利用してshapeを取得することができる。
取得したshapeをExtrudeGeometryに渡すことで描画している。

SVGファイルのpath内のstroke部分については、SVGLoaderのpointsToStrokeを利用してBufferGeometryとして描画している。

pathで利用しているShapePathのデータはあるので、これを利用して所望のstrokeのShapePathを計算する。

SVGLoader – three.js docs
Three.jsでSVGをロードする際に利用。

Extrude SVG strokes and svg loader example extrude option. by repalash · Pull Request #20796 ·　mrdoob/three.js
SVGLoaderにstrokeをExtrudeGeometryとして出力するオプションを追加するPR。2021年5月で更新が止まっており、マージされる様子はない。

pointsToStroke: Return a shape rather than a geometry · Issue #21326 · mrdoob/three.js
pointsToStrokeでgeometryではなくshapeを返却する方が良いのでは？と言う提案をするIssue。

r3f svg react-spring transitions - CodeSandbox
react-three-fiberでSVGをロードしてそれぞれのpathをディレイ付きでアニメーション表示する例。