【3DCG・MMD】カメラレンズによる見え方シミュレータ作成について

公開日: : 3DCG, JavaScript/jQuery, MMD, Three.js, ツール, 画像処理

スポンサーリンク

カメラのレンズが違うことでどのくらい出来上がる写真に差が出てくるのかを確かめることのできるシミュレーションを作成しました。描画にはThree.jsのラッパーライブラリであるjThree.jsを使っており同ライブラリのプラグインであるjThree.MMD.jsでMMDのキャラクター描画も行っております。こちらから見れるようになっています(多少重いかもしれません)。

カメラシミュレータサンプル
↑開くとこんな画面が出てきます。一応3Dでぐりぐり回せるようになっています。

カメラの焦点距離と撮像面の縦横寸法を設定すると結果の画面が表示されます。3D画面上でマウスを右クリックもしくは左クリックしながらドラッグするとカメラを平行移動および回転させることができます(jThree.Trackball.jsのおかげ)。また、見えている画面を画像として落とし込むこともできるようにしてあります。

一応これを作成するにあたっていくつか面倒な点がありました。それはだいたい2つあって、ひとつはjThree.jsで表示している3D画面をキャプチャすることについて。そして2つ目はカメラパラメータを変更する方法や視野についての知識についてです。もし気になる方はリンク先を覗いてみてください。(※カメラやレンズはにわか知識なのでもしかしたら間違いや改善点が出てくると思いますが、指摘していただけるとありがたいです。)

スポンサーリンク
  • このエントリーをはてなブックマークに追加

関連記事

WordPressサイトのSSL対応(HTTPS化)手順のまとめ【さくらサーバー】

先週頃にこのサイトをSSL対応しましたのでその流れについてまとめておき

【Google Charts】動的にグラフを更新する方法

はじめに Webサイト上でグラフを描こうと思った場合、いくつかのJa

体重変化量計算シミュレータ【ダイエット/肥満】

ツール本体 入力 カロリー入力 1日の余剰摂取/消費カロリー

おサイフケータイ対応ストレージ32GBのSIMフリースマホまとめ【2017年秋版】

はじめに SIMフリーの格安スマホのおサイフケータイ機能付きのもので

リクルート期間限定ポイントの有効な使い道

はじめに  先日クレジットカードの見直し活動の一環でポイント還元率の

初心者がお金を貯めるための節約・財テク手法まとめ【ポイント還元・投資・税金対策】

はじめに  最近なるべく節約しようと思い、お金周りに関して色々調べて

動画講座を効率的にキャプチャして復習する方法

はじめに  最近、動画媒体の講座などをたまに視聴しています。独学だと

→もっと見る

  • Author : ががんぼ
    プログラミングやWeb関係で気付いたことについてメモしていく予定。だいたいが備忘録ですが、自分でサンプルを作って動かしてみたりしています。
PAGE TOP ↑