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から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に#つく
]]>テクスチャが上下や左右逆の場合は
UVのポイントを調整。
初心者メモ。
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から引かない。
つぎはアニメーション設定かな。
]]>androidのタブレットで
スクロール時にsetIntervalが止まった。
対応策1
スクロールで発火させる。
$(window).on('scroll', function() {
scrollDirection();
});
$('body').on('touchmove', function() {
scrollDirection();
});
うまくいく。
ただし、スクロールが止まった場合には、
処理が当然止まる。
でこれを試す。
うまくいく。
window.requestAnimationFrame(hoge);
スクロール中のsetInterval&setTimeoutの停止は
負荷処理問題と思ったけど、違った。
仕様っぽいです。
sp&tbでありがちな罠。
まあrequestAnimationFrameは高速で回ってしまうので
その分処理の負荷を気にしながら作んないとですね。
]]>textureloader.load( _file , function( map ) {
sphere.material.map = map;
sphere.material.needsUpdate = true;
}
とかでtextureloader使うときは
読み込んだmapがnew THREE.Texture();されている。
あらかじめjsとかで読み込んだ画像使う場合は
var aa=new THREE.Texture(imageObj);
aa.needsUpdate = true;
sphere.material.map = aa;
みたいにする。
]]>