日々の記録 2025-03-02
menu の処理修正
エレメントが重なった時の描画順をコントロール
z-index を指定すればよいみたい
うまくいかない。
chrome の開発ツールをみると position: static だと意味をなさない。とのこと。
まだ出ない。と思ったけど、重なる部分の背景が黒で文字色も黒だったのが原因でした。
menu の background-color を yellow とか指定したらきちんと出ていました。
iPad で期待した挙動にならない
タッチした瞬間に :hover にならず。長押しすると :hover になる。
ネットで調べるとタッチするとすぐ :hover になって、逆に :hover 状態が維持されてしまう。みたいな感じの記事が多い。
下記サイトに答えを発見。
ontouchstart = "" を指定すればよいみたい。
TypeScript で ontouchstart = "" はどんな感じになるのだろう ?
menuRoot.ontouchstart = null
これではダメ
menuRoot.ontouchstart = (event) => { event.preventDefault(); };
これで期待した動作になった。
ただ menuRoot で設定すると menuRoot の範囲でしか :hover の挙動が変わらないので、メニューを非表示にするためにメニュー外をタップさせるとき、 menuRoot 配下をタップしないと menu が閉じなくなった。
ontouchstart = "" はもっと広範囲に影響する位置での記載がよさそう。
シンプルに上位にしただけではダメ ?
ontouchstart="" ではなく ontoucchstart="event.preventDefault();" にしてみる。
これもダメ。
html 側の ontouchstart は消して、typescript 側で ontouchstart = (event)=> { event.preventDefault(); }; 追加。
これで期待した挙動になった。
メニューが期待した挙動になった
ontouchstart の挙動を menu.ts で行うのは変
main.ts の方に処理を移動させる
canvas 上タップしても menu の hover が解除されない
だったら ontouchstart は menu_root のみでもよいかも ? と思った。
ひとまず保留。
と思ったけど、すぐに renderer の親が body になっていて、ontouchstart の影響下にいない事が判明。
renderer の親を body から contents に変更してタッチ挙動が期待した事になる事を確認。
scene の切り替えを行いたい
やりたい事
メニューで表示したいシーンを選択したら、画面に指定したシーンが表示される。
html の切り替えではなく javascript 内で切り替えるみたいな感じにしたい
実装するために必要そうな事
-
読み込む javascript ファイルの切り替え
-
既存の scene 情報の全削除
-
scene に必要なものを追加
-
animate の挙動切り替え
-
動的スクリプト管理を用意
-
シーンのインターフェース定義
-
シーン管理を用意
Three.js の Scene とは ?
調べよう。
Discussion