🌊

JSCAD を使って TypeScript で CAD

2021/10/04に公開

jscad

tech

JSCAD を使うことで、JS を使って STL を生成することができます。

https://github.com/jscad/OpenJSCAD.org

例えば、こんな感じの TS ファイルから

こんな感じの STL を生成できます。

VSCode で開発する場合、以下のように TS ファイルを編集したらそれがプレビューに反映されるような形になります。

セットアップ

必要なものは以下です。

@jscad/cli
- JSCAD 本体。JS から STL にするために必要
typescript
- TS ファイルを JS ファイルにするために必要
chokidar
- @jscad/cli に watch 機能がないため
ts-node
- chokidar を使ったスクリプトを TypeScript で書くため

ファイルを変更したら自動的に STL を作り直す機構は @jscad/cli には 2021-10-04 現在ありません。そのために、chokidar (と ts-node) で以下のような簡易的なスクリプトを用意します:

import { watch } from "chokidar";
import { execSync } from "child_process";
import { readFileSync, writeFileSync } from "fs";

const runCommand = (command: string) => {
  try {
    execSync(command);
  } catch (e) {
    console.error((e as any).stderr.toString());
  }
};

watch("**/*.ts", { ignored: "index.ts" }).on("change", (path) => {
  runCommand("tsc");
  const js = path.substr(0, path.lastIndexOf(".")) + ".js";
  const data = readFileSync(js, "utf-8");
  // JSCAD は module.exports 前提だが、TypeScript はエイリアスである exports で JS ファイルを出力する。
  // これを module.exports にするオプションは見つけられなかった。
  // @jscad/cli では問題にならないが、https://openjscad.xyz/ や
  // https://marketplace.visualstudio.com/items?itemName=crysislinux.openjscad はファイルを読み込めなくなってしまう。
  writeFileSync(
    js,
    `
    exports = module.exports
    ${data}
  `
  );
  runCommand(`jscad ${js}`);
});

VSCode を利用する場合には、https://marketplace.visualstudio.com/items?itemName=slevesque.vscode-3dviewer や https://marketplace.visualstudio.com/items?itemName=crysislinux.openjscad を使うとプレビューを利用することができます。

slevesque.vscode-3dviewer は STL ファイルのビュアーですが、crysislinux.openjscad は .js ファイルが JSCAD として利用可能な場合にそのままプレビューすることが可能です。
slevesque.vscode-3dviewer は、私の環境では自動リロードがいまいちうまく動かなかったため、crysislinux.openjscad を利用しています。なお、この場合にはプレビュー目的では STL ファイルの出力は必要ありませんが、3D プリンタで印刷する際など、結局 STL ファイルが必要になるため合わせて生成してしまったほうが便利です。

Eclipse Che を利用している場合、次の devfile を使っていただくと、そのままいきなり開発環境が作られます。

セットアップ

Discussion