Verge3D

漫画漫文ツールで作成した漫画イラスト。

7月23日の記事で、lil-guiでボーンの名前をクリックして選べるようにしましたが、これがどうにも使いにくい。スケルトンの絵をクリックしてボーンを選べるようにbono.jsを書き直しました。

今回のアップロードでjsが上書きされたので、古い記事のボーン・ヘルパーはちゃんと動かなくなりました。記事をどうしようか迷いましたが、そのときどきの記録として、文もコードもそのまま掲載しておきます。

7月5日の記事で、オブジェクトにトランスフォーム・コントロールを付けたことを書きましたが、当初はオブジェクトが移動・回転できればいいと思っていました。でも、いじっているうちに「やっぱり身体の各部を動かしてポーズをつけたいよね」と欲が出て、スケルトン・ヘルパーという機能も実装したくなりました。

どうにか動いたので、htmlとjsを掲載します。

※ 08月08日の更新でjsを書き換えましたので、ダルマさんのスケルトンは動かなくなりました。この記事をどうしようか迷いましたが、そのときどきの記録として文もコードもそのまま掲載しておきます。

いずれ３Ｄペイントができるようにしたいのですが、まずはその土台として画像テクスチャの貼り付けを行います。

ポイントは、Blenderの段階で影なしのフラット・カラーでテクスチャを貼り付けること。というのも、漫画漫文ノートの使い途の一つとして「塗り絵」を考えていて、陰影のない単純な絵が欲しいからです。

クリックしてカーソルを動かすと、オービット・コントロールのおかげで、カメラ視点でいろんな角度や遠近の絵が得られます。

これだけでもある程度は遊べますが、やはり、キャラそのものを動かしたり回転させたりしてみたくなりますね。そこで今回はトランスフォーム・コントロールを導入しました。

Verge3Dの最大の特徴は、Puzzlesというビジュアル・プログラミングのツールが備わっていることです。JavaScriptに慣れていなくてもWeb3Dコンテンツが作れます。

いかんせん、Three.jsのいろいろなモジュールをインポートして使いたい時は、Puzzlesの「至れり尽くせり」ぶりが枷になります。

早い話、どうやってモジュールをインポートしていいか分からない😂　完璧過ぎて、Puzzlesがカバーする範囲の外の処理が記述しにくいのですね。

漫画漫文ノートの印刷用ＣＳＳを設定しました。

昭和の昔、「漫画漫文」というスタイルの書物がたくさん発行されていました。ページの上半分が１コマの漫画、下半分が文章になっています。

「この形で絵の部分を３Ｄにして、視点が自由に変えられたら面白いだろうな」と思い、作ってみました。

昨日はSVG画像の上にVerge3Dのモデルを重ねられるかテストしました。

今日はiframeのスタイルで、フルスクリーンやスマホの小さい画面でも思い通りに表示できるように調整したいと思います。

ついでにモデルにアニメーションをつけました。テストなので、描線がきれいじゃなくてもこだわらないことにします。

子供の頃読んだ「マンガ家入門」に

マンガには「音」と「動き」がない。そのために独自の工夫が生まれた

みたいな記述があったように思います（記憶違いかも知れない）

でも今はWebを援用すれば音と動き、さらには双方向性さえも漫画で実現できるかも知れません