scriptの3Dライブラリであるthree.jsの環境構築と、3Dモデルをアニメーションさせる方法を記載する。scriptライブラリ。EdgeやChrome等、ほぼすべてのブラウザで対応しており、ドライバなどのインストールも不要。GPUの機能も利用可能。Kinematics)や物理演算にも対応しており、初心者にも使いやすいライブラリに感じる。環境構築three.jsを利用するには、npmを利用する方法とcdnを利用する方法が一般的である。npmのインストール等は敷居が高く感じるため、今回はthree.jsライブラリを手動でダウンロードして利用する方法を紹介する。エディタとして、以下をインストールするatomgithubが公開しているテキストエディタ。atomを開き以下のプラグインを入れる。install」と開き、プラグイン名で検索してインストールする。scriptをサーバ環境で実行するためのプラグイン。scriptをローカルで実行すると、ファイル読み込みできないため、3Dモデルのファイル読み込みに必要。3Dの基本3Dモデルを表示するために最低限必要なものは以下のとおり。scene3Dオブジェクト光源カメラレンダリングエンジン3Dの世界に該当するsceneというクラスに表示したいもの(オブジェクトや光源)を配置して、カメラで撮影する。その処理結果をレンダリングエンジンが、画面に表示する画像に変換しているというイメージ。サンプルthree.jsで3Dモデルを表示するサンプルプログラムを以下に示す。Dance)形式のファイルをブラウザで表示して、アニメーションさせる。フォルダ構成フォルダ構成は以下のとおり。jsファイルはリンク先(three.jsのCDN)からダウンロードしてindex.htmlと同階層に配置する。3Dモデル(.pmx)とモーション(.vmd)は任意のものに変えてもOK。ページ読み込み時に、モデルとモーションデータを読み込んで表示する。Data()...」は、ブラウザによるファイルキャッシュを回避して、ライブラリファイルの入れ替え時に新しいファイルが常に読み込まれるようにしている。【26〜47行目】基本オブジェクトの配置WebGLRenderer.render関数に、シーンとカメラを渡すことで画面に描写することができる。このタイミングでは、シーンに光源しか追加していないので、WebGLRenderer.setClearColor関数で設定した背景色のみ表示される。【56〜67行目】3Dモデル読込loadMMD(82〜86行目)により、モデル(mesh)とモーション(clip)を読み込んでsceneに追加している。THREE.MMDLoader().loadWithAnimation関数でライブラリを用いて、MMDの各ファイルを読み込んでおり、第三引数にファイル読み込み完了時の関数(onLoad関数)を渡している。onLoad関数では、読み込んだオブジェクト(obj)をPromise.resolve関数に渡すことにより、非同期関数の戻り値に設定している。このためawaitで、非同期関数であるloadMMD関数の処理完了を待つようにしている。【70〜78行目】アニメーションループrequestAnimationFrame関数は最大60FPS(1秒間に60回)となるように、引数に与えられた関数を呼び出す。これにより、animate関数を再帰的に呼び出している。helper.update関数で3Dモデルの状態を更新してrenderer.render関数で画面に描画している。server」を選択すると、自動でブラウザが開き、index.htmlを表示する。MDDのモーションに必要なボーンがモデルにある等、モデルとモーションの組み合わせが問題ない場合には、アニメーションが開始される。Macの各OSへの実行可能形式ファイルを出力できることが挙げられる。ライセンスはMITライセンス。worldプログラムを作成する方法を見ていく。今回はwebカメラや動画内に映る人物の3次元姿勢推定によるポーズ作成をやってみる。)ブラウザ上において、複数画像からSNSに投稿可能な動画形式(MP4,Mov)に変換するwebアプリを作りたいと思い、技術的・ライセンス的に調査・実験した結果をメモしておく。babel今回は、新しい構文で記載したjavascriptをブラウザで動作するようにするため、webpackとbabelの環境構築と利用方法を見ていく。Da@.メニューホーム検索トップサイドバータイトルとURLをコピーしました。