https://hukurouo-voxel.netlify.app/

作りました。

ここに至るまで非常に長かったので記録しておこう。

今日やったこと

• スイッチのオブジェクトを MagicalVoxel で作ってみる。
  • 操作方法を調べつつ、30分くらいで作成
  • obj ファイルでエクスポート
• これを three.js でインポートしようとしたところで、3時間ほど持っていかれる。
  • どうも Nuxt 固有の記法が影響しているらしく、公式ドキュメントの通りにやっても動かない。ggってもそもそもnuxtでthree.jsを動かそうとしている記事がほとんど無かった。
  • ので、Nuxtでやることを諦める。というかよく考えてみればオブジェクトを展覧させたいだけなのでNuxtでやる意味なんてどこにも無かった。
• バニラjsへ方針転換
  • しかし驚くべきほど知識が無い。何でも揃ってる便利なvue/nuxtから入ったのでバニラでどうやってサーバー建てるかも分からない･･･。
• jsの勉強
  • https://ics.media/entry/16028/#webpack-babel-three
    • このサイトめちゃくちゃ分かりやすくて良かった
  • https://qiita.com/soarflat/items/28bf799f7e0335b68186
  • このあたりを参考に、まずwebpack+Babel+Three.jsの構成を作成してみる。
  • これがモダンフロントエンドの世界......
  • 最小のファイルで構成している感が良いですね　好き
• ホットリロードの開発環境と静的ファイル生成機構を作れたので、objファイルのインポートを試みる。
  • 出来た～～！！！
  • この瞬間があるからプログラミングがやめられないね本当に
• デフォルトの設定だと静的ファイル生成時にjsファイルが1つのmain.jsファイルに纏まってしまう。
  • 複数の作品を表示できるようにしたいので、別途管理できるようにしたい。
  • webpack.config.jsを書き換えて各jsからそれぞれのhtmlファイルを生成できるようにした。
  • HtmlWebpackPluginを利用
• Netlify にホスティングさせる。設定で簡単にdistをrootにできるので便利。
• スペクトラちゃんを作る。
  • 30分ちょいで製作。周りの部屋とかも作りたいな。
  • MagicalVoxelを使いこなすための勉強しなければ

objファイルをthree.jsで読み込んでサイトに表示させるまでの流れ、纏まったドキュメントが無いんですよね。今日やったことを良い感じにまとめてzennあたりに投稿してみようかな。