Threejs

概要 React Three Fiber を使用して GLTF モデルを表示した際、テクスチャがぼやけて見える、または荒く表示される問題に遭遇しました。本記事では、その原因と解決策を解説します。 症状 GLTF モデルのテクスチャがぼやけて表示される 他の 3D ビューアでは正常に表示される同じモデルが、自作のビューアでは荒く見える dpr（デバイスピクセル比）や antialias を設定しても改善しない 原因 Three.js r152 以降、デフォルトの出力カラースペースが変更されました。 GLTF モデルのテクスチャは通常 sRGB 色空間 で保存されています。しかし、Three.js のデフォルト設定では出力が Linear 色空間 になっているため、以下の問題が発生します： テクスチャの補間処理が Linear 空間で行われる ミップマップの生成が正しい色空間で行われない 結果として、テクスチャがぼやけたり、色がおかしくなる 解決策 Canvas の onCreated コールバックで outputColorSpace を設定します。 Before（問題のあるコード） i < m C / p a c d g < C o n a p l S a r v m r = c n t a e = { e v s r { { n a { a [ e s = 1 a > C { , n a { t n 2 i v p ] a a o } l s s i i a } t s i : f o r n t o : r m u [ e ' 5 @ , } r } e 5 a , c t 5 - ] t , h r f e o e v / : f i 5 b 0 e r } ' } ; After（修正後のコード） i i < m m C / p p a c d g } o } < C o o n a p l } n } S a r r v m r = a p p t t C g c n t t a e = { n r o o o r l e v s r { { t e w n n e . n a { a M i s e e e a o e s = a a e r M M t u > C a { t l r P a a e t a s { h i v r p p d p n . a e e p p = u v T p m s D f i i { t a H o i : r e n n ( C s R s n a r g g { o E i ( t w e : E l } E t w r i n x g o i i u n c T p l r f f o n e g e H o S r r n d , B : R s } p o o : o u E u ) a m m w f ' E r c [ . f h . e = e ' ' 5 d e i A : > @ t , e r g C = r h v : h E 1 { e r 5 i - S , T a e , c t p F H c e e r e i R t ' 5 P u r l E - ; ] i e f m E t , x , o i . h e r c S r f l m T R e o R a o G e v a n n B / : t c e C f i e M o i 5 o ' a l b 0 , , p o e p r r } 2 i S ' } ) n p ; } g a , c e ; 各設定の説明 outputColorSpace: THREE.SRGBColorSpace 最も重要な設定 。出力カラースペースを sRGB に設定することで、テクスチャが正しく表示されます。 ...

Sketchfab APIを使って3DモデルをGLBファイルとしてダウンロードし、ブラウザ上でThree.jsで表示するWebアプリを作成しました。本記事では、セキュリティを考慮したアーキテクチャ設計から実装まで解説します。 やりたかったこと Sketchfab上の3DモデルをGLB形式でダウンロードしたい ダウンロードしたGLBをブラウザ上で3D表示したい APIトークンを安全に管理したい 技術スタック Next.js 16（App Router） React Three Fiber / @react-three/drei TypeScript 最初に試したこと：クライアントサイドのみで実装 最初はシンプルにHTML + JavaScriptだけで実装しようとしました。 c ) c c o ; o o n ` { } n n S s h s s k t t h } t o e t e l t r p a ' d e c e s d A a . h s : e u t l f p r t a o a / s h g b n a : o = ( s p r d A e i { i a a P . z w t I = s a a a か k t i . ら a e i t g ダ w t o l ウ a c n r b ン i h ' e . ロ t f : s u ー a p r ド f b ` o l U e . T n ) R t c o s ; L c o k e を h m e . 取 ( / n j 得 v s 3 $ o 署 / { n 名 m a ( 付 o p ) き d i ; S e T 3 l o s k U / e R $ n L { } m ` o d e l U i d } / d o w n l o a d ` , これ自体は動作しましたが、2つの問題がありました。 ...

概要 Next 15（React 19 を使用）で、@react-three/fiberを使う際、以下のように説明されています。 R3F v8 is not compatible with React 19 or Next 15, which uses React 19. Use the R3F v9 RC instead which can be installed with @react-three/fiber@rc. （日本語訳）R3F v8 は React 19 や Next 15（React 19 を使用）と互換性がありません。代わりに R3F v9 RC を使用してください。インストールするには @react-three/fiber@rc を使用してください。 一方、マウス操作を行うために以下を追加しましたが、@react-three/fiber@rcとは相性が悪いようでした。 https://www.npmjs.com/package/@react-three/drei この問題に対する対処法の備忘録です。 方法 本記事執筆時点（2025-02-06）の情報です。 まず、@react-three/fiber@rcではなく、@react-three/fiber@alphaをインストールする必要がありました。（@betaでもよいかもしれません。） そして、dreiについては、@react-three/drei@10.0.0-rc.1をインストールしました。結果、以下のような組み合わせでは、無事にインストールすることができました。 " " @ @ r r e e a a c c t t - - t t h h r r e e e e / / d f r i e b i e " r : " : " ^ " 1 ^ 0 9 . . 0 0 . . 0 0 - - r a c l . p 1 h " a , . 8 " , まとめ 考慮が不十分な点があるかもしれませんが、参考になりましたら幸いです。 ...

概要 以下のリポジトリを試す機会がありましたので、備忘録です。 https://github.com/theringsofsaturn/virtual-museum-tour-threejs 以下でチュートリアル動画も公開されていました。 https://www.youtube.com/watch?v=8oQC0ICNtL0 フォーク リポジトリをフォークして、一部修正を加え、GitHub Pagesでビルド結果を確認できるようにしました。 https://nakamura196.github.io/virtual-museum-tour-threejs/ まとめ Three.jsを使ったアプリ開発にあたり、参考になるかと思います。