Three.js メモ

  • 投稿日:
  • by

■iOS12.2からsafariでジャイロのチェック入れないと動かない。


■iOS12.2からhttps環境でないとDeveceOrientationControlsが動かなかった。


■Orbitcontrolsの回転の向き
・水平方向、垂直方向へのカメラの角度の変更部分を、逆に書き換えればOK。
・77行目あたり、84行目あたりにある
・回転速度もここで調整できる
thetaDelta += angle ;
phiDelta += angle ;


■OrbitContlosの停止と接続
停止
controls.dispose();
接続
controls.connect();


■DeviceOrientationControlsの停止と接続
停止
controls..disconnect();
接続
controls.connect();
*これはないから作る。
*バージョンによってメッソド名違う。

■ OrbitContlosの回転スピード
スマホとPCは別で調整したほうがいい。
if(sp) controls.rotateSpeed = 1.0/20; else controls.rotateSpeed = 1.0/10;

■余談 aタグで関数実行の場合
<a href="#" onClick="hoge();return false;">
*return falseしないとURLに#つく

THREE.OrbitControlsとalert

  • 投稿日:
  • by
  • カテゴリ:

Three.jsでOrbitControlsを使用するときに
クリック判定させたくて別にタッチイベントやマウスイベントを設定。
*そもそもOrbitControlsには設定してある

独自のタッチイベントハンドラー内で
チェック用にalertを使用したらiphoneだけ反応が遅かった。
OrbitControlsをコメントアウトしたら反応速度は通常に。
alertなしの場合は、例えばcssをjsで制御とかはスムーズに反応する。

OrbitControlsを使用する場合、別途タッチイベント等を使用する場合は
そのことを考慮しておくとあせらない。
iphoneのみでandroid派スムーズだった。

■OrbitControls + 独自タッチイベント
→alertいれると反応遅い

■独自タッチイベントのみ
→alertいれても反応スムーズ

■OrbitControlsのみ(OrbitControls内に記述)
→alertいれると反応遅い

メモ。

lightwaveでのテクスチャ

オブジェクトを作っているとき
実際にテクスチャ画像を当ててみたいときは
1.新規UVテクスチャを作る(flaで利用するようにアトラス)
2.色・質感編集でパネルを開いて「T」を押す。
3.投影でUV選ぶと、その下にUV選ぶプルダウンが出てくるので
 さっき作ったUVテクスチャを選択。
4.画像を選ぶ

テクスチャが上下や左右逆の場合は
UVのポイントを調整。

初心者メモ。

190122_1.jpg

190122_2.jpg

190122_3.jpg

claptaps project[8]

ここにきてちょっといろいろ問題が。

<問題点1>
まずlightwaveの背面ビューは裏側・・・。ナンテコッタ
→正面ビューを基準にする。
 左右がわかりやすいように左耳は飛び出させた。
190402_1.png



で、flashにて生成。
この時点では、結構シンプルにdrawtriangleでつなぐ。
とりあえずflashに持ってく時点で、綺麗に描画されるようもろもろためして下記を調整。
・マッピングのuvtのyのみ1から引く形で調整。
・drawtrianglesの結び方も調整。ここでは反時計回り。
190402_2.png


えー、lightwaveでは正面を向いているのに
flashだと後ろ向いて上下左右が逆ですね。

こっからは、憶測的。
lightwave左手座標系、flashは右手座標系。
flashはyの正方向が下。zの正方向は奥。
なので、これの計算を入れないと行けない。

lightwave 正面パネル x:左 y:上 z:手前
flash         x:右 y:下 z:奥


左手座標系→右手座標系にしないといけない
-xでいけるそうな??
右手(X, Y Z) → 左手(-X, Y, Z)
190125_4.jpg 
参考:http://k-key.hatenablog.com/entry/2016/08/18/141830


多分、初期表示の向きを気にしなければ
-xしただけでオブジェクト的にはlwのオブジェクトが再現できる。
回転で正面向ければ、lwに揃うと思う。
マッッピングは調整すればいい。

ただ、lwの正面の向きをflash再生時に正面に来るようにしようとすると
上下、左右、奥行きが違うので全てにマイナスをかける必要がありそう。

とりあえず-yした。

190402_3.png

なんかおかしい。
drawtrianglesの結び方を逆回りに。
190402_4.png

OK。
左右&奥行きを逆にすればいけそう。
-x。
190402_5.png

また、なんかおかしい。
drawtrianglesの結び方を逆回りに。

190402_6.png

OK。
実際は右耳が飛び出てるのが正しいけど、
回転ではなく、ポイント移動で調整しているから
奥行きの逆にしたら右耳が飛び出てることになるはず。

で。-z。
190402_8.png

おかしいので、
いつものdrawtrianglesの結び方を逆回りに。
190402_9.png

再現完了!
190402_10.png


この時点で、やったこと。
・ポイントx,y,zにマイナス
・drawtriangles:POSITIVE,時計回り
・uvtのyのみ1から引く


uvtのyのみ1から引く部分がよくわからない。

uvt:マイナスなし
uvノーマル.png

uvt:xのみマイナス
uv_x.png

uvt:yのみマイナス
uv_y.png

uvt:xyマイナス
uv_xy.png



zの正の向きも違うはずなんだけど・・・。
とりあえず、動かさなければ見た目は同じになった。
座標系の変換した後に、X軸で180度回すとxyzの正の向きが
flashに揃うけど、何が正しいのかわからないのでとりあえずママに。
-x,-yしたのだけ忘れないようにメモ。

とりあえず、uvtのy座標のみ1から引く部分以外は
頭の中で理解できた。

追記:UVの件は、これかなというのが一つあった。
UVの座標はflashと比べるとy座標の正の向きのみ違う。
たぶんこれだ。
190402_15.png


ここから回転とかのアニメーション付ける場合は
上記のマイナスが影響してそっちもマイナスに
しないといけなそうなきがする。やってみないとわからない。

とりあえず-xや-yして頂点を逆位置にしたらこういうことが起きる。
・vertexの各頂点に対応する画像ポイントは、
 かわらないので、左右逆になる。
・indicesは結び目が逆回りになる。
 カリングor結びを逆にする必要あり。

今までのブログでにたようなこと書いたけど
毎回見解がバラバラになってしまっていて反省。
<問題点2>
次にこれ。UV反転。
上がUVで下が正面ビュー。向きが違って気持ち悪いので
調整するようにメモ。

190125_5.png

UVのポイント解除と結合してやるらしい。
ちなみに上記のlightwaveの状態でflashに持っていくとこう。
190402_12.png


uv反転処理等をする。
190402_13.png


flashで再生。
190402_14.png


LightwaveでUV反転してobjファイル書き出しすると
数値が変わっているので特にAS側でマイナス入れるとかはしなくてOK。


<問題点3>
vtの処理:数が多すぎる

こういう書き方だと制限あって、5000くらいでエラー出た。
var v:Vector.<int> = Vector.<int>([0,1,2,3,4,5]);

pushを小分けにすればいけた。メモ。
カリングが欠ける。
正確には奥の描画OKと重なる時にそちらが優先されてしまう。
Zバッファ法で解決。
http://blog.livedoor.jp/take_z_ultima/archives/51717889.html



あとは、objファイルのfのあたいは
3つでも4つでもいける事が判明。
ていうかそういう風に組んであった。
とりあえずここまでである程度、lightwaveで作成したオブジェクトを
問題なくというか、なんでそうなるか頭では理解した状態で
flashで再現するまではできた。
あとは、回転とかモーションだけど、、、
ボーンの設定とかflashでやるならよいのでは?
そうすると完成に一気に近ずく。検討。

mtl

lightwaveでobjファイル書き出しする時にできるmtlファイル。
拡散反射光はオブジェクト自体が持つ色の要素でrgbを0~1で表記。

MTLファイルはOBJファイルと一緒に使われるファイルです。
中身はマテリアル属性(環境光、拡散光、鏡面光、鏡面反射角度、テクスチャ画像ファイル名)が書かれていて、
マテリアル属性ごとに名前が付けられています。

[ ファイル形式の仕様 ]
newmtl マテリアル名
map_Kd テクスチャファイル名
Ka RED GREEN BLUE(環境光データ。0.0~1.0の範囲)
Kd RED GREEN BLUE(拡散光データ。0.0~1.0の範囲)
Ks RED GREEN BLUE(鏡面光データ。0.0~1.0の範囲)
Ns SHININESS(鏡面反射角度。0.0~128.0の範囲)

引用:http://brilliantcurtain.web.fc2.com/text/BrightObject/09_about_mtl.html

objが二つある場合は、二つ分つくる。
lightwaveのModelerで(ショートカットq)、オブジェクトごとにカラー設定しておく。
でないと共通の設定になる(デフォルトの設定一つだけ)。
ちなみにobjの数に関係なくいくらでもマテリアル設定は作れる。

190121_1.jpg

この場合は3つ分書き出される(a2/a3/Default)。
190121_2.jpg


今回は、この辺の環境光とかは特に設定しない予定なので
いつか使用する場合は、この数値をもとに設定するとしよう。


ちなみにobjファイルは、サーフェイスを複数作った場合
頂点座標はまとめて表記だけど、fはそれぞれ別で表記されてた。
以前のブログだと、サーフェイス特に設定していなかったので
fの部分もまとめて表記されていたので、ちょっとだけ変わる。

190121_4.jpg


まあ、colladaファイルをそのまま読み込んだほうが早そうだけど
1ポイントだけ動かしたり、途中でテクスチャ変更したり
細かい事しようとすると、スクラッチなこのやり方のほうがいいかな。
勉強にもなるし。

claptaps project[7]

はい。

今回は単位平面を2つlightwave上で生成して

flashにもってきてみました。

結果としては、一つの場合とやり方は同じで問題無し。

objファイルも単位平面2つぶん一気に書き出しされてるし

テクスチャーも問題無し。

190108_1.jpg

190108_2.jpg

プレビュー時はこんな感じ。

ステージサイズ調整してないからかけてるけど。。。

190108_3.jpg

次は、いよいよ移動&アニメーションかな。

claptaps project[6]

追記:下記記事の理解はおそらく違う。

座標系の変換や、lightwaveの正面ビュー基準で作っていない。

こういうことがおきたという現象の参考程度に。

多分、気づきに対しての解が間違っていると思う。

lightwaveでobjファイルを書き出して

flashで描画してたんだけど、諸々検証して

なんでかわからないけどできてる、という状態だったので整理した。

こんな感じでlightwaveで単位平面作って

xy座標で正面になるように回転させてobjファイル書き出しをした。

181225_1.jpg

ちなみにlightwave正面パネルってz軸が正(奥側)からみた風景なのでx軸の左が正。

背面パネルが慣れ親しんだxy座標(右が正)だけどこれって後ろ側なんですね。。。

座標軸の+-記号みて気づいたけどあってる?

181225_2.jpg

でこの頂点座標をもとに

f 2/3/1 3/4/2 4/2/3 1/1/4の順番に変更。

これは以前書いたけど、objの順番とflash上に入れる座標の順番は

このfで変更された順番になてtます。

それと数値が小さいのでflashで使うように、座標に10かけてます。

そうするとこんな感じに。

181225_3.jpg

で、ここで疑問点が。。。

lightwaveってy座標は上が正だけどflashってしたが正。

なんでちゃんとできてんだろう??

y座標にマイナス1かけるのが正しくない?

もろもろ、検証したけっか下記に至る。

・lightwave(左手座標)とflash(右手座標)ではy軸の正の向きが違う。

・試行錯誤して作ってた時は、反時計回りで結んでNEGATIVE設定。

 マイナス1をvertexのy座標にかけていなかった。

 ただし、uvtは1から引いて上下逆になるようにしていた。

・y座標にマイナス1をかけるのが理屈として正しい。

 その場合は、下記をするのが正しい。

 1.vertexのy座標に-1を掛けて上下逆に。

 2.uvtのy座標を1から引いて上下逆に。

・y座標にマイナス1をかけるとindecesで結んでいるのが

 時計回りと反時計回りが逆になるのでカリングの設定も逆にしないといけない。

つまりこういうこと。

181225_4.jpg

・結び目に関しては時計回り/反時計回りどちらでもいいが

 それぞれの回り方にあわせてPOSITIVE or NEGATIVEに設定すればよい。

 今回は時計回り&POSITIVEに設定。

・lightwaveにあわせると上下逆になるので

 1.vertexのy座標に-1を掛けない。

 2.uvtのy座標を1から引かない。

つぎはアニメーション設定かな。

youtubeのiframe埋め込みが表示されない

  • 投稿日:
  • by
  • カテゴリ:

mac chromeで表示されませんでした。。。
出るときもあるし、リロードすると出ないときもある。
chromeでバッカーのネットワークでみてたら、
ステートメントにキャンセルとでてて
途中で処理がとまった?

なるべくサイト演出の処理と被らないように
ページ読み込み終わってから、jsで埋め込みコード記入するようにしたら
とりあえずは問題なく表示されるようになりました。
細かい原因はいまのところ不明だが、上記対策は試す価値あり。

androidでスクロール時にsetIntervalが止まる

  • 投稿日:
  • by
  • カテゴリ:

androidのタブレットで

スクロール時にsetIntervalが止まった。

対応策1

スクロールで発火させる。

$(window).on('scroll', function() {

scrollDirection();

});

$('body').on('touchmove', function() {

scrollDirection();

});

うまくいく。

ただし、スクロールが止まった場合には、

処理が当然止まる。

でこれを試す。

うまくいく。

window.requestAnimationFrame(hoge);

スクロール中のsetInterval&setTimeoutの停止は

負荷処理問題と思ったけど、違った。

仕様っぽいです。

sp&tbでありがちな罠。

まあrequestAnimationFrameは高速で回ってしまうので

その分処理の負荷を気にしながら作んないとですね。