event.preventDefault();だけじゃなく{passive: false}入れとかないとダメ。
addEventListener( 'touchstart', jyroTouchStartHandler, {passive: false} );
参考:https://kanoto.info/202001/679/
event.preventDefault();だけじゃなく{passive: false}入れとかないとダメ。
addEventListener( 'touchstart', jyroTouchStartHandler, {passive: false} );
参考:https://kanoto.info/202001/679/
メモ
window.addEventListener('touchstart', function foo(e) {
alert(e)//object touchevent
alert(e.target)//object htmldivelement
alert(this)//object window これが正しい参照だった
this.removeEventListener('touchstart',foo);
});
■iOS12.2からsafariでジャイロのチェック入れないと動かない。
PCのようにorbitcontrol(sp=false)でやるか、iOS13以降の
DeviceMotionEvent.requestPermission()で許可させる。
ただしクリックイベントに入れる必要あり。要はユーザーアクションで許可させる。
*許可/拒否は一度選択するとキャッシュされるから注意。
■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.jsでOrbitControlsを使用するときに
クリック判定させたくて別にタッチイベントやマウスイベントを設定。
*そもそもOrbitControlsには設定してある
独自のタッチイベントハンドラー内で
チェック用にalertを使用したらiphoneだけ反応が遅かった。
OrbitControlsをコメントアウトしたら反応速度は通常に。
alertなしの場合は、例えばcssをjsで制御とかはスムーズに反応する。
OrbitControlsを使用する場合、別途タッチイベント等を使用する場合は
そのことを考慮しておくとあせらない。
iphoneのみでandroid派スムーズだった。
■OrbitControls + 独自タッチイベント
→alertいれると反応遅い
■独自タッチイベントのみ
→alertいれても反応スムーズ
■OrbitControlsのみ(OrbitControls内に記述)
→alertいれると反応遅い
メモ。
タップ時に画面が暗くなってしまう場合の対処。
cssで下記を記載。メモ。
-webkit-tap-highlight-color:transparent;
参考:https://qiita.com/sabineko/items/0c30713fe9fadaa88cf0
オブジェクトを作っているとき
実際にテクスチャ画像を当ててみたいときは
1.新規UVテクスチャを作る(flaで利用するようにアトラス)
2.色・質感編集でパネルを開いて「T」を押す。
3.投影でUV選ぶと、その下にUV選ぶプルダウンが出てくるので
さっき作ったUVテクスチャを選択。
4.画像を選ぶ
テクスチャが上下や左右逆の場合は
UVのポイントを調整。
初心者メモ。
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の数に関係なくいくらでもマテリアル設定は作れる。
この場合は3つ分書き出される(a2/a3/Default)。
今回は、この辺の環境光とかは特に設定しない予定なので
いつか使用する場合は、この数値をもとに設定するとしよう。
ちなみにobjファイルは、サーフェイスを複数作った場合
頂点座標はまとめて表記だけど、fはそれぞれ別で表記されてた。
以前のブログだと、サーフェイス特に設定していなかったので
fの部分もまとめて表記されていたので、ちょっとだけ変わる。
まあ、colladaファイルをそのまま読み込んだほうが早そうだけど
1ポイントだけ動かしたり、途中でテクスチャ変更したり
細かい事しようとすると、スクラッチなこのやり方のほうがいいかな。
勉強にもなるし。
はい。
今回は単位平面を2つlightwave上で生成して
flashにもってきてみました。
結果としては、一つの場合とやり方は同じで問題無し。
objファイルも単位平面2つぶん一気に書き出しされてるし
テクスチャーも問題無し。
プレビュー時はこんな感じ。
ステージサイズ調整してないからかけてるけど。。。
次は、いよいよ移動&アニメーションかな。
追記:下記記事の理解はおそらく違う。
座標系の変換や、lightwaveの正面ビュー基準で作っていない。
こういうことがおきたという現象の参考程度に。
多分、気づきに対しての解が間違っていると思う。
lightwaveでobjファイルを書き出して
flashで描画してたんだけど、諸々検証して
なんでかわからないけどできてる、という状態だったので整理した。
こんな感じでlightwaveで単位平面作って
xy座標で正面になるように回転させてobjファイル書き出しをした。
ちなみにlightwave正面パネルってz軸が正(奥側)からみた風景なのでx軸の左が正。
背面パネルが慣れ親しんだxy座標(右が正)だけどこれって後ろ側なんですね。。。
座標軸の+-記号みて気づいたけどあってる?
でこの頂点座標をもとに
f 2/3/1 3/4/2 4/2/3 1/1/4の順番に変更。
これは以前書いたけど、objの順番とflash上に入れる座標の順番は
このfで変更された順番になてtます。
それと数値が小さいのでflashで使うように、座標に10かけてます。
そうするとこんな感じに。
で、ここで疑問点が。。。
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で結んでいるのが
時計回りと反時計回りが逆になるのでカリングの設定も逆にしないといけない。
つまりこういうこと。
・結び目に関しては時計回り/反時計回りどちらでもいいが
それぞれの回り方にあわせてPOSITIVE or NEGATIVEに設定すればよい。
今回は時計回り&POSITIVEに設定。
・lightwaveにあわせると上下逆になるので
1.vertexのy座標に-1を掛けない。
2.uvtのy座標を1から引かない。
つぎはアニメーション設定かな。