Verge3D

2Dモードで適当に描いた図形から3Dメッシュを作り、Blenderで仕上げをする練習２日目。

某マスコットに似てしまったので、Ｘではつぶやかないことにします。

screenleapという画面共有サービスが良さそうなので、テストします。

無料のお試しコースは「１日４０分、同時視聴８名まで」の制約があります。どんなものか見たかったのでメインPCをホストに、出張用PCから https://www.screenleap.com/keiko にアクセスして動作を確認しました。

視聴者としてのブラウザから見ると、若干の遅れはあるもののホストの画面がきれいに出ていて、まあまあ使えるのではないかと思いました。

※スクリプト変更のため、ツールへのリンクが切れています。専用ページでお試し下さい。

※スクリプト変更のため、ツールへのリンクが切れています。専用ページでお試し下さい。

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

※スクリプト変更のため、ツールへのリンクが切れています。専用ページでお試し下さい。

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

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

※スクリプト変更のため、ツールへのリンクが切れています。専用ページでお試し下さい。

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

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

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

※スクリプト変更のため、ツールへのリンクが切れています。専用ページでお試し下さい。

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

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

※スクリプト変更のため、ツールへのリンクが切れています。専用ページでお試し下さい。

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

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

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

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

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

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