作業に役立った情報とか、ちょっとした日常を書いておくブログ。2019/05/20自分のサイトで自分のキャラクターを浮遊させたくて、重い腰を上げて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を作るしかなさそうだ。shares背景を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()内のを除去するだけでうまく動くようになった。コメントをキャンセルメールアドレスは公開されませんのでご安心ください。付いている欄は必須項目となりますので、必ずご記入をお願いします。コメント内容に問題なければ、下記の「コメント送信」ボタンを押してください。コメントデータの処理方法の詳細はこちらをご覧ください。