60L.design へのメールフォームです。 ご質問、お問合せ、お見積り等、お気軽にお送りください。
データの送信は firestorage 等の転送サービスをご利用ください。

お名前 ※必須項目 お名前を入力してください
会社様名
お返事先メールアドレス ※必須項目 お名前を入力してください
お問合せ種別

お問合せ内容 ※必須項目 お問合せ内容を入力してください
次の2つの数字を足して入力してください。 ※必須項目 半角数字を入力してください。

+

=

閉じる
お気軽にお見積り、
お問合せ下さい
Three.jsでOrbitControls.jsのドラッグ方向を逆転させたい

webブラウザ上で3D空間を描画するThree.jsというライブラリがありますが、web制作上のコンテンツとして現在勉強中です。
その中で、カメラの向き(視線)をマウスドラッグで簡単に変えられる追加のライブラリ『OrbitControls.js』も試しています。

OrbitControls.jsを使うと、カメラのパンがドラッグでできるので非常に楽です…が、ドラッグする方向とパンする方向が…!?
まずは公式のサンプルを見ていただくと早いかと思います。マウスをドラッグするとカメラが動きます。

three.js – orbit controls example

このサンプルではあまり分かりづらいのですが、ドラッグ方向を逆転したいと思いました。
スマートフォンなどのスワイプだと直感と逆の方向になります。Macで言うところの『スクロールの方向がナチュラル』であって欲しいのです。(ちなみにMacではマウスのスクロールがスマフォのスワイプのようにナチュラル方向であるのが基本となっています)

調べてみても設定でカメラの動きを逆にするものはないようでしたが、海外のフォーラムでヒントがあったので参考にしたところ成功したので、備忘録として残します。

ds2016072201

OrbitControls.jsの中で、水平方向、垂直方向へのカメラの角度の変更部分を、逆に書き換えれば済みました。
77行目あたり、84行目あたりにある

thetaDelta -= angle ;
phiDelta -= angle ;

部分で角度を減算していますが、

thetaDelta += angle ;
phiDelta += angle ;

と、加算に変更するだけで動作がナチュラル方向になりました。
まだ試験中ですが、スマフォ向けコンテンツでOrbitControls.jsを使う場合、この変更が活きるかもしれません。
念のためにOrbitControls_inverse.jsなどにファイル名を変更すると少し安心だと思います。

OrbitControls.js自体は処理でカメラの制御に制限が出たりと、扱いが難しい面もありますが、手軽にマウスドラッグ、スワイプが使えるので簡単なコンテンツ表示には有用そうです。
有識者の方には当たり前だったり不要な内容だったかもしれませんが、私と同じことで困った方に参考になれば幸いです。

『ふうらい姉妹1巻』読んでいて主人公の生活が非常に不安になる、超シュール系4コマ。

『LIAR GAME 18』最終戦、四国志ゲーム開始!19巻は4月中に発売なので完結直前です!

『野崎まど劇場』なんて酷いラノベだ…と、爆笑しました。フリーダムな短編集。将棋のアレも…。

『iPhoneアプリ開発の教科書』カラーでイラスト多くて、まずはこれを読んでみようと購入しました。

『数論の世界』高校レベルの知識での面白い数論の話。高校の時にこの本を知っていたら…。

『ミーティアわんわん』古賀亮一先生の電撃新連載!もったいないので少しずつ読んでます。

『新ゲノム5』相変わらずの古賀亮一マンガです。とにかくギャグの密度が高い…!

『HTML5&CSS3ポケットリファレンス』技術評論社のPRシリーズは鉄板です。

『容疑者Xの献身』今更ながら、こんなに面白い邦画に出会えるとは…!悪い予想を上回る結末。

『ゆるめいつ』シュール系脱力4コマ!この作品に触発されて4コマを描き始めました。