Hatena Blog Tags
はてなブログ トップ
react-three-fiber
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

react-three-fiber

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
DDDDbox Tech Blog•2ヶ月前

クリック判定が逆転する？Three.jsレイキャストの落とし穴

nanobanana pro こんにちは、DDDDbox事業部で日々3D開発を行っている鈴木です。 先日、こんな現象に遭遇しました。 「手前にあるはずの線オブジェクトをクリックしたいのに、奥にあるメッシュオブジェクトが選択されてしまう」 カメラに近い線が優先されると想定していたのですが、なぜか奥にあるメッシュの方が近いと判定されてしまうという現象です。 今回はこの問題の調査結果を整理してみます。 TL;DR 現象: Line2（境界線）をクリックしたいのに、奥にあるMeshが選択されてしまう 原因: MeshとLine2でレイキャストのdistanceの定義が異なる（Meshは「交点」、Lin…

#Three.js#3Dモデル#react-three-fiber

関連ブログ

Spacely Tech Blog•3年前

3DのWebサービス開発で宣言的なWebGLライブラリを導入して感じた保守運用上のメリット

1 はじめに スペースリーでエンジニアをしている長谷川です。 最近は3DのWebアプリの開発を担当していて、弊社でリリースしている「パノラマ変換3Dプレイヤー」のコンテンツ作成機能などを開発しています。 3DのWebアプリを開発する際には「React/Vue × WebGL系ライブラリ」という構成が代表的なケースの1つであり、弊社でもその構成を選択しました。 ところが、3D Webアプリはサービスの数としては多くないので保守運用まで考慮した設計ノウハウはまだまだ十分に共有されてはおらず、開発を進めるにあたって以下のような懸念点がありました。（詳細は次章） 「宣言的なReact/VueのWebア…

#Three.js#react-three-fiber#A-frame#react#Vue3
Activ8 Tech Blog•3年前

Next.js(TypeScript) + react-three-fiberでVRMを表示する

こんにちは、フロントエンドエンジニアの堀江（@nandemo_3_）です。 前回、Babylon.jsを使って簡単に、Web上に3Dモデルを描画しました。 synamon.hatenablog.com 元々は、Web上でVRMを描画したかったので、今回はそちらにチャレンジしていきたいと思います。 VroidHubのアバタープレビュー画面ですね。 すでに、いろんな方がやられているので、そこまで真新しさはありませんが、 Next.jsでトライしてみましたので、参考になれば幸いです。 はじめに 当初は、Babylon.jsをベースに、Web上にVRMを表示しようと考えていました。 babylon-v…

#NextJs#TypeScript#JavaScript#react#threejs#react-three-fiber#three-vrm#VRM#BabylonJS