MisskeyRoom #5267

Merged

syuilo merged 97 commits from room into develop

syuilo commented (Migrated from github.com)

Summary

部屋を作れるように

TODO

難しい

家具同士の当たり判定
esnextに戻す
なんかやけに重いのをどうにかする

普通

家具をドラッグで移動できるようにする
カスタムテクスチャをCSSのcoverみたいな挙動にする
部屋情報をエクスポートしたりインポートする機能

簡単

設定でグラフィッククオリティを設定できるようにする
設定で平行投影か近視投影か設定できるようにする
ナビゲーションにRoomへの導線を追加する

## Summary 部屋を作れるように ## TODO ### 難しい - [ ] 家具同士の当たり判定 - [x] esnextに戻す - [ ] なんかやけに重いのをどうにかする ### 普通 - [x] 家具をドラッグで移動できるようにする - [ ] カスタムテクスチャをCSSのcoverみたいな挙動にする - [ ] 部屋情報をエクスポートしたりインポートする機能 ### 簡単 - [x] 設定でグラフィッククオリティを設定できるようにする - [x] 設定で平行投影か近視投影か設定できるようにする - [x] ナビゲーションにRoomへの導線を追加する

❤️ 3 🎉 1

AyaMorisawa (Migrated from github.com) reviewed

AyaMorisawa commented (Migrated from github.com)

src/client/app/tsconfig.json の module が esnext から commonjs になっているのは要注意

https://misskey.m544.net/notes/716c8a8c36dc62a573d1510c

CodeSplittingがされなくなったとか、設定でプロフィールが見れなくなってる (langmapがエラー) とかがあるわ

src/client/app/tsconfig.json の `module` が `esnext` から `commonjs` になっているのは要注意 https://misskey.m544.net/notes/716c8a8c36dc62a573d1510c > CodeSplittingがされなくなったとか、設定でプロフィールが見れなくなってる (langmapがエラー) とかがあるわ

👍 1

syuilo commented (Migrated from github.com)

commonjsだとWebpackのCodeSplittingが効かない問題があるみたいです

@syuilo CodeSplittingがされなくなったとか、設定でプロフィールが見れなくなってる (langmapがエラー) とかがあるわ

https://misskey.io/notes/7wd985i4io

commonjsだとWebpackのCodeSplittingが効かない問題があるみたいです > @syuilo CodeSplittingがされなくなったとか、設定でプロフィールが見れなくなってる (langmapがエラー) とかがあるわ https://misskey.io/notes/7wd985i4io

syuilo commented (Migrated from github.com)

オブジェクト同士の当たり判定をどうすればいいのかわからない

syuilo commented (Migrated from github.com)

家具の底面からレイを床の方向に飛ばして、レイが衝突した座標にスナップすれば良さそうだけどThreejsにそういう機能はなさそう(レイが衝突したオブジェクトを取得する機能はあるけど座標を取得する機能はない)

syuilo commented (Migrated from github.com)

オブジェクトの座標が分かっても形を考慮しないといけないしオブジェクトが回転しているかもしれないから意味ない

acid-chicken (Migrated from github.com) reviewed

acid-chicken (Migrated from github.com) left a comment

<HTMLElement>ev.target の箇所は ev.target as HTMLElement の方が良さそうな気がしますが、いかがですか？

`<HTMLElement>ev.target` の箇所は `ev.target as HTMLElement` の方が良さそうな気がしますが、いかがですか？

AyaMorisawa commented (Migrated from github.com)

家具の作成ってBlenderでしか行えないんですか？(Blenderで作られたものしか受け付けないんですか？) そうであればCONTRIBUTING.mdに明記しておいた方が良さそう。

syuilo commented (Migrated from github.com)

おそらく他のソフトでも行えると思いますがBlenderしか持ってないので詳しくは分かりません＞＜
ただ無料なのはBlenderだけだと思うので他の開発者も編集できることを考えるとBlenderが良さそう

おそらく他のソフトでも行えると思いますがBlenderしか持ってないので詳しくは分かりません＞＜ただ無料なのはBlenderだけだと思うので他の開発者も編集できることを考えるとBlenderが良さそう

syuilo commented (Migrated from github.com)

HiDPIディスプレイだと家具選択ができない模様

mei23 commented (Migrated from github.com)

~~posY, rotX, rotY, rotZ の方向が感覚的に逆に感じる？~~
posZ, rotX, rotZ, rotY の方向が感覚的に逆に感じる？

→説明中のZとY逆だったわ

![image](https://user-images.githubusercontent.com/30769358/63086730-6f4a2400-bf8b-11e9-9b68-6e52ceee33b7.png) ~~posY, rotX, rotY, rotZ の方向が感覚的に逆に感じる？~~ posZ, rotX, rotZ, rotY の方向が感覚的に逆に感じる？ →説明中のZとY逆だったわ

👍 1

syuilo commented (Migrated from github.com)

直します～

❤️ 1

u1-liquid commented (Migrated from github.com)

家具の底面からレイを床の方向に飛ばして、レイが衝突した座標にスナップ

編集モードに限って重力を適用すれば勝手に落ちて何とかなりそう

> 家具の底面からレイを床の方向に飛ばして、レイが衝突した座標にスナップ編集モードに限って重力を適用すれば勝手に落ちて何とかなりそう

👀 1

AyaMorisawa commented (Migrated from github.com)

pinguinのblendファイルが欠けている？

👍 1

syuilo commented (Migrated from github.com)

pinguinはblenderじゃないみたいですね
プロジェクトファイルは「可能であれば」でも良いかも

pinguinはblenderじゃないみたいですねプロジェクトファイルは「可能であれば」でも良いかも

👀 1

syuilo commented (Migrated from github.com)

カスタムテクスチャ(額縁とかモニターに任意の画像を表示できる機能)を使用した際に画像がはみ出す問題は修正しました
ただアスペクト比が一致しない場合(モニターの画面は横長なのに正方形の画像を表示するときなど)画像が引き伸ばされますできればCSSのcoverみたいな挙動にしたい

カスタムテクスチャ(額縁とかモニターに任意の画像を表示できる機能)を使用した際に画像がはみ出す問題は修正しましたただアスペクト比が一致しない場合(モニターの画面は横長なのに正方形の画像を表示するときなど)画像が引き伸ばされますできればCSSのcoverみたいな挙動にしたい

syuilo commented (Migrated from github.com)

あとカスタムテクスチャを設定したときにいったんページをリロードしないと反映されないのを直したい

u1-liquid commented (Migrated from github.com)

texture mesh に needsUpdate = true にしたらできるらしい

❤️ 1

syuilo commented (Migrated from github.com)

あー、それはすでにしてるんですけど、画像のURL情報はTHREEのオブジェクト自体に保存しているわけではないので、プロパティの更新と同時にそっちのテクスチャも貼りなおさないといけない感じですね
今モデル読み込み時にやってる処理を再利用可能な形に抽出してプロパティ更新時もそれを呼ぶようにするとかでいけそう

あー、それはすでにしてるんですけど、画像のURL情報はTHREEのオブジェクト自体に保存しているわけではないので、プロパティの更新と同時にそっちのテクスチャも貼りなおさないといけない感じですね今モデル読み込み時にやってる処理を再利用可能な形に抽出してプロパティ更新時もそれを呼ぶようにするとかでいけそう

👍 1

syuilo commented (Migrated from github.com)

リロードしないと反映されないのを修正

❤️ 1

syuilo commented (Migrated from github.com)

部屋の床の色も変えられるようにしたい

❤️ 1

syuilo commented (Migrated from github.com)

家具のドラッグでの移動は難しい
THREE標準でそういう機能あるけど使い方の説明がない
https://github.com/mrdoob/three.js/blob/master/examples/js/controls/TransformControls.js

家具のドラッグでの移動は難しい THREE標準でそういう機能あるけど使い方の説明がない https://github.com/mrdoob/three.js/blob/master/examples/js/controls/TransformControls.js

syuilo commented (Migrated from github.com)

あーなんかできた

syuilo commented (Migrated from github.com)

表示できたけど使い勝手が悪かった

具体的には、ハンドルを掴んで移動させようとしたときにクリックした位置の下にほかのオブジェクトがあるとそれをクリックしたものと判定されてしまう
それを防ぐために、ハンドルをクリックしたのにゃら弾く処理を追加したんだけど、にゃぜかハンドルの当たり判定がめっちゃ広く作られていて、今度はハンドルにかすらにゃい場所をクリックしてもハンドルをクリックしたものと判定されるようににゃってしまった

結論としてはやっぱり家具のドラッグ移動は無理

表示できたけど使い勝手が悪かった具体的には、ハンドルを掴んで移動させようとしたときにクリックした位置の下にほかのオブジェクトがあるとそれをクリックしたものと判定されてしまうそれを防ぐために、ハンドルをクリックしたのにゃら弾く処理を追加したんだけど、にゃぜかハンドルの当たり判定がめっちゃ広く作られていて、今度はハンドルにかすらにゃい場所をクリックしてもハンドルをクリックしたものと判定されるようににゃってしまった結論としてはやっぱり家具のドラッグ移動は無理

syuilo commented (Migrated from github.com)

その過程でレイキャスターにレイの衝突した座標を格納するプロパティがあることに気づいたので家具同士の当たり判定が実装できるかもしれない

syuilo commented (Migrated from github.com)

使い勝手悪くなっちゃうけど家具の選択解除は選択解除ボタンを押さないとできないようにするしかないな

syuilo commented (Migrated from github.com)

というより移動モードにするのと移動モード解除

syuilo commented (Migrated from github.com)

家具をドラッグで移動できるようになった

syuilo commented (Migrated from github.com)

esnextでthreeをimportできない問題の解決策募集中

❤️ 1

AyaMorisawa commented (Migrated from github.com)

esnextでthreeをimportできない問題の解決策募集中

d.tsを自前で用意する or
requireを使う

> esnextでthreeをimportできない問題の解決策募集中 * d.tsを自前で用意する or * requireを使う

u1-liquid commented (Migrated from github.com)

esnextでthreeをimportできない問題の解決策募集中

🍮 #5286
恐らくmoduleResolutionのおかげ

> esnextでthreeをimportできない問題の解決策募集中 🍮 #5286 恐らく`moduleResolution`のおかげ

❤️ 1

AyaMorisawa commented (Migrated from github.com)

https://misskey.io/notes/7wjdajk73s

Misskey Room、自分のドライブのglbファイルをロードできたらどうかにゃ（ｺ｀・ﾍ・´ｹ）

面白そうなアイデアなのでここに

https://misskey.io/notes/7wjdajk73s > Misskey Room、自分のドライブのglbファイルをロードできたらどうかにゃ（ｺ｀・ﾍ・´ｹ）面白そうなアイデアなのでここに

❤️ 1

AyaMorisawa commented (Migrated from github.com)

https://misskey.io/notes/7wjbu50ap9

three.jsがesnextでimportできない問題さえ解決できれば今すぐにでもリリースしたいぞ

らしいので、リリース後、TODOをそれぞれIssueとして開くのが良さそう

https://misskey.io/notes/7wjbu50ap9 > three.jsがesnextでimportできない問題さえ解決できれば今すぐにでもリリースしたいぞらしいので、リリース後、TODOをそれぞれIssueとして開くのが良さそう

👍 2

u1-liquid (Migrated from github.com) reviewed

u1-liquid commented (Migrated from github.com)

TransformControls、公式のexample https://threejs.org/examples/misc_controls_transform.html では
Ctrl を押していると setTranslationSnapとsetRotationSnapで移動・回転のsnapができるので活用したいと思います

TransformControls、公式のexample https://threejs.org/examples/misc_controls_transform.html では Ctrl を押していると setTranslationSnapとsetRotationSnapで移動・回転のsnapができるので活用したいと思います

👀 1

syuilo (Migrated from github.com) reviewed

u1-liquid (Migrated from github.com) reviewed

syuilo commented (Migrated from github.com)

パンできるようにしようと思ったけど、右クリックは視点回転だし、左クリックは家具選択なので空きがなかった