Threejs

Overview When displaying a GLTF model using React Three Fiber, I encountered an issue where textures appeared blurry or rough. This article explains the cause and solution. Symptoms GLTF model textures appear blurry The same model that displays correctly in other 3D viewers looks rough in a custom viewer Setting dpr (device pixel ratio) or antialias does not improve the issue Cause Since Three.js r152, the default output color space has been changed. ...

I built a web app that uses the Sketchfab API to download 3D models as GLB files and display them in the browser using Three.js. This article covers everything from the security-conscious architecture design to implementation. What I Wanted to Do Download 3D models from Sketchfab in GLB format Display downloaded GLB files in 3D within the browser Manage API tokens securely Tech Stack Next.js 16 (App Router) React Three Fiber / @react-three/drei TypeScript First Attempt: Client-Side Only Implementation Initially, I tried implementing it with just HTML + JavaScript. ...

Overview When using @react-three/fiber with Next 15 (which uses React 19), the following is stated: 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. However, when I added the following for mouse controls, it did not work well with @react-three/fiber@rc. https://www.npmjs.com/package/@react-three/drei This is a note on how to address this issue. ...

Overview I had the opportunity to try out the following repository, so this is a memo of my experience. https://github.com/theringsofsaturn/virtual-museum-tour-threejs A tutorial video was also available at the following link. https://www.youtube.com/watch?v=8oQC0ICNtL0 Fork I forked the repository, made some modifications, and made the build results available on GitHub Pages. https://nakamura196.github.io/virtual-museum-tour-threejs/ Summary This should be a useful reference for developing apps with Three.js.