one_milliのブログ

three.jsのデバックについて

公開日:2021/12/29

目次

  1. 概要
  2. three.js について
  3. three.js のデバッグについて
  4. まとめ

概要

ここ最近のマイブームのa-frameをより深く知るためにthree.jsで遊び始めたのでデバックについて調査したことを備忘録として本記事を記述します。

three.js について

ウェブブラウザ上で 3D 表現をする際によく使われる WebGL ライブラリだと認識しています。

three.js のデバッグについて

three.js を触っていると何かと思い通りの表現になるまで値を変更する作業があるかと思います。手作業で値を変更していくことに辟易していた頃にデバッグツールなるものが存在することを観測しました。本記事時点では、更新が途絶えたdat.guiからlil-guiへの転換期のようです。雑感としては、lil-guiを使っておけば問題ないようです。dat.guiをサンプルにしてlil-guiでデバッグを行ったりしましたが、問題なく動作しました。
以下のようにインポートしてあげると情報の多いdat.guiのサンプルもいい感じに使えました。(簡単なことしかしてないからかもしれないです。。。)
import * as dat from "lil-gui"

まとめ

three.js のデバッグの触りについて記述しました。まだまだthree.jsに慣れていないので正月の時間を使って戯れようと思います。