Demo on Codrops | Blender file | YouTube video | Codrops article | Live site
This repo contains code of a fan museum for Codrops!
npm install
npm run dev
If you see something wrong in the article please let me know!! I'll post a list of corrections and/or updates for the code and article here~ Thank you in advance!
- When it comes to "bad" topology, sometimes it's actually good for optimization as in, it may have less verticies and geometry data which saves on file size. You may also use bad toplogy in certain scenarios as a "trick" to have a certain effect. Of course bad topology can do the opposite as well, as in, if it's really bad it will cause issues (lighting/shading, performance, etc).
- You'll see a lot of websites also use other file formats like .jpg and there are pros and cons to that. For one .jpg is more widely supported and WebP has additional time to decode so it really kind of depends on your use case. I'm using solid baked textures so I'm aiming for max compression with WebP and KTX rather than .jpg which might be ideal for more granular details or normal textures etc.
- Because GLTF/GLB is basically a glorified JSON object storing things like vertex positions, you might see a lot of websites use .bin files or .JSON files or some other custom vertex data format rather than a GLB file. However, GLBs are still very common to use.
- Ignore the curve rotation section with the create functional spline, I did not end up using that method. Simplified it way more.
- Try not to useState when it comes to 3D experiences to avoid rerenders if possible. I did because I wanted to save time. For something like scrollProgress we could use useRef() for better performance.
Of course huge shoutout to the whole community for making things possible!! Three.js and Blender are so so amazing!!! Here are a list of the original creators for some of the things I used in this project:
- The Adam | Blender techniques
- sketching in blender | Blender techniques
- PolyHaven | Blender HDRI & Textures/PBR materials
- BlenderKit | Textures/PBR materials
- ambientCG | Textures/PBR materials
- Fire Shader
- Background music
- Thump SFX
- Torch SFX
- Font
- DivyeSh's torch model
- distant_voices' lectern model
- Sky_Hunter's medieval brazier model
- GremorySaiyan's bird model
See all tools on the Codrops article!