福野泰介の一日一創

「AR megane - plane-detection」 src on GitHub forked from Three.js examples
LiDAR搭載のQuest3では、部屋の壁や天井を自動認識してくれます。そのデータをWebXRからも使用することができるので、めがねフェスのとき作ったメガネ3Dオブジェクトを、部屋の中でぐるぐる回してみました。Quest 1/2/Proでも手で部屋を設定すれば動きます！

Three.jsを使ったオクルージョンの仕方
- new THREE.MeshBasicMaterial({ colorWrite: false }) を使用
- 作成したメッシュの renderOrder を -1 に (msh.renderOrder = -1 )
（参考、【Three.js×AR】マスクでポータルや擬似オクルージョンを実装する - bagelee（ベーグリー））

部屋の外は見えない処理、オクルージョンで自然に見えます。面だけでなく、メッシュでオクルージョンも可能なはずなので、次チャレンジします。

鯖江で流行ってる、Quest3！
Let's create own AR world!