KinoStlViewer で Three.js による 3D コンテンツを表示する

はじめに

Three.js は HTML5 で 3D コンテンツを作成するためのライブラリです

3D コンテンツのデータは STL (Standard Triangulated Language) という形式のファイルで扱います

KinoStlViewer は Livebook 上で STL ファイルを読み込み、コンテンツを表示します

実装したノートブックはこちら

セットアップ

セットアップセルで KinoStlViewer と、 Web 上から STL ファイルをダウンロードするための Req をインストールします

Mix.install([
  {:kino_stl_viewer, "~> 0.1"},
  {:req, "~> 0.5"}
])

3D コンテンツの表示

3D コンテンツを表示するための viewer を用意します

viewer = KinoStlViewer.new()

実行結果

この時点では灰色の四角形が表示されるだけです

次のコードで Web から STL ファイルを読み込んで KinoStlViewer.load に渡すと、 3D コンテンツが表示されます

"https://raw.githubusercontent.com/Buildbee/example-stl/main/binary_cube.stl"
|> Req.get!()
|> Map.get(:body)
|> then(&KinoStlViewer.load(viewer, &1))

マウス操作でカメラ角度を変更できます

STL ファイルはこちらのリポジトリーのものを使用しました

まとめ

KinoStlViewer で 3D コンテンツを表示することができました

JS と Elixir の間でデータをやり取りすれば、色々できそうですね