昨年はスティミュラスイメージのコーポーレートサイト制作と、
知り合いの個人作家さんのページのコーディングのみを担当させていただきました。

基本は映像屋なので元々映像屋としてのお付き合いがあり
個人的に理解していただける知り合いからの依頼のみお請けしています。
つまり、こちらがweb制作のプロではないという前提でお付き合いいただけるのが重要です。
SEOとかそーいったことはよーわかりませんということですね。
※時々web制作のご相談、協力などのお問い合わせをいただくことがありますが
映像での協業やコミュニケーションをベースとした受注とさせていただいております。

現在はスタジオポメロの大幅リニューアルの終盤にあります。
3年を経過しタイトルも充実してきましたのでリニューアルの好機ではないかと思います。
起業以降一貫して映像、webの仕事依頼をしてくれているので
できるだけ、目を惹くデザインで長く残せるページを制作できればと思っている次第です。
まもなくローンチできそうな感じがするのでその際はまたエントリーしたいと思います。

前置きはさておき、webpack5やthree.jsの備忘録です。
今更ですがTypeScriptもひっそりとはじめてみました。
そもそもAfterEffectsのExtendScriptを書き始めたのが発端になって
ちょっとずつJSっぽいものに触れてきましたから型定義なしのユルユルになれきっており
TSを使い始めたばかりの頃は少々きつかったですが先々を見越すとエラー箇所の同定などがしやすくなるだろうことや
いずれはC++を覚えてAEのプラグインを書いてみたり、
現状でもHoudiniのテストでいちいち行き詰まったり、理解が及ばないこともあり慣れておこうと考えてのことです。
まさに、エンジニア ワナビーの考えそうなことだと笑ってください 。

---

webpack5

TypeScriptを使い始めてみて、設定ファイルも設定項目も増えました。
これまで通りの結果を得られるようにするため
トランスパイル時のes5になるように設定してみました。
これでbabelを通して古いブラウザに対応してきたのと同様のことができると、
どこかで読んだのですが、、、アロー関数がある。最近までまったく気づいてませんでした。
色々調べた結果、webpack.config.jsに以下を追加することで回避できました。

environment: { arrowFunction: false, }

webpack-dev-server

webpackを使う際にデフォルトでインストールするlocalサーバーを使用する開発支援機能
dev serverですが、いまさらながら、なんかだるくねー？と思ったことがあったので調べて実装してみました。

それは、実行してもなんで自動でウィンドウ開かねんダベか？ってことです。

というのも、sampleでgit cloneしてきたソースにparcelをモジュールバンドラとして構築されたモノがあり
ビルドすると自動でブラウザが立ち上がってプレビューができます。

これって楽です。そしてしらべたらwebpackにも普通にありますし、特に難しくありません。
が、かならずsafariでひらかれます。
chromeで開くにはやはりwebpack.config.jsに以下を追加します。

open: { app: "google chrome" },

---

three.js-fbxloader

Cinema4Dで3Dモデルを作成、UV展開、テクスチャベイク・埋め込み
fbxとしてエクスポートしました。
three.js側ではloaderを使いfbxを表示させました。
以前にも試しており自分の中では実績のある方法というつもりでしたが
読み込まれたモデルはテクスチャが無茶苦茶です。
デフォルトのマテリアルにアサインされてはいるっぽいですがuvが無視されている。
出力時に軸関係の設定を色々変更てみましたがいずれも改善はみられません。

なので、別途テクスチャ出力しマテリアルにアサインするという
まさに実績のある方法で試してみました。バッチリです。

とりあえず、fbxにテクスチャを埋め込んでもサクッといかないことはわかったので
別にするのが賢明だということを忘れないようにします。