three.jsを使ってみた
自分のサイトで自分のキャラクターを浮遊させたくて、重い腰を上げてjavascriptで実装することにした。
ついでにドラッグでキャラクターを回転できるようにもすることにした。
今回はその試行錯誤の過程を。
OrbitControls.jsを最初は使った。
これでとりあえずドラッグができるようになった。これは大きい。
でも、縦の回転がなぜか制限される。縦に360度回転できない。
上の頂点か下の頂点に来るとそれ以上回転できない。
Spherical.phiの値で縦回転が決まるみたいだけど、どこで値が制限されているのか分からない。
制限するようなコードはコメントアウトしたけど、それでもうまくいかない。
リファレンスも貧弱で、欲しい情報が書いていない。
日本語の情報もない。
そもそも「OrbitControls.jsを使う」と書くまでで、その中に詳しく言及しているような文献がない。
今度はTrackballControls.jsを使ってみた。今度は縦回転も横回転も自由にできるようになった。
でも、制御方法がOrbitControls.jsと全然違ったせいで、ドラッグで動かせる方向をZ軸の回転にだけ制限するようなコードに改変できない。
また、光源の位置を動かさずにオブジェクトを動かす方法もわからない。
TrackballControls.jsでは、カメラを動かすことでオブジェクトが回転しているように見せているようだったが、これは僕の期待してたものと違う。
この時、TrackballControls.jsにcameraを引数として渡していたので、これをmodelを渡すように変えればイケるかと思ったけど、どうも実際渡されているのはNone。
contrillerの宣言以前にmodelが作成されるはずなんだけど、どうも順番が違って、controllerの宣言後にmodelが設定されるみたいでうまくcontrollerにオブジェクトを渡せない。
javascriptは上から下に処理が進むわけじゃないので、この辺の動作が分かりづらい。
習熟してないのもある。もっと分かってれば順序を踏まえたうえでデバッグできるんだろうが・・・
結局、下のサイトを参考にして、自分でcontrollerを作るしかなさそうだ。
背景をCSSで書いて、その上にthree.jsでのモデルを表示ってのをやりたかったが、上手くいかない。
上手くいってるサイトの通りにやってもうまくいかない。
色々探して、どうもthree.jsに変更があったのでは、と勘付いた。
うまくいっているサイトのthree.jsを探して見たら、やっぱりいくつか関数名がリネームされててる。
THREE.PointCloudMaterialをTHREE.ParticleBasicMaterialに、
THREE.PointCloudをTHREE.ParticleSystemに
名前を戻したら、バシッとうまく動くようになった。
つまり、バージョンアップ後のthree.jsでは背景をCSSで動かす、みたいなことができないのかもしれない。
こういうこともあるのか・・・
スマホだとリンクをタップしても遷移できなくなってる問題について。
色々調べた結果、event.preventDefault()がonDocumentMouseDown()とonDocumentMouseMove()内で宣言されていたせいだった。
これがあると、いろいろと動作を無効にするらしい。
かといって、onDocumentMouseMove()内のevent.preventDefault()まで除去してしまうと、iOSのsafariとかでスクロールが効いてしまって画面全体が上下に動いてしまう。
onDocumentMouseDown()内のを除去するだけでうまく動くようになった。
この記事へのコメントはこちら