Scroll, Refraction and Shader Effects in Three.js and React
Home Page: http://tympanus.net/Tutorials/the-substance/
License: MIT License
Discover how to use react-three-fiber and combine some common techniques to create a Three.js powered layout with shader effects. By Paul Henschel.
yarn
yarn start
I've tried updating to the latest version of react-three-fiber and running this project, after making a few necessary updates to the code including changing the vertex shader functions texture2d to texture, replacing <Dom> with <Html> from Drei, and changing the <bufferGeometry> attribute {...gltf.__$[1].geometry} to {...gltf.nodes.pCone1_lambert1_0.geometry}.
The project now runs, but much slower than using the 4.x implementation of react-three-fiber. Its adding the Diamonds class that appears to slow it down, specifically the setRenderTarget method calls. Using the latest version of three 0.121.0 and react-three-fiber 4.2.1 it is fast.
What changed in 5.0.x that's causing the slowdown?
Thank you for this example, it's really interesting to see this methodology.
In the article you mention there's lots of ways to build the decorative scroll rig. However, I'm struggling to come up with a way that decouples the content section heights from the screen height, so that sections can be driven by the amount of content within it and therefore removing the large gaps between sections, and creating uniform gaps between sections with different amounts of content within them.
Is there a method for achieving this? It seems challenging to do this as the position of a section would depend on the heights of preceding sections...
Hey there!
First of all: very nice project, I really like it!
I just tried out, how to start the scrolling from bottom but I am not really able to enable that correctly.
If Im trying to set the state.top.current = scrollArea.current.scrollHeight in Apps Component useEffect function initially and also set scrollArea.current.scrollTo({ top: scrollArea.current.scrollHeight, behavior: 'auto' }); there, it will start from bottom, but first it will scroll down all the way. So the problem is, you see every block scrolling down automatically.
Can you give a hint, how to start from bottom corerctly, withtout the problem that all the components are visible scrolled down?
Thanks and best regards,
Sebastian
Hello everyone.
Very exciting example.
Sorry for such a simple question. I connect to the API of my WP site .How can me render this data that comes from the API, for example, instead of these images from example, display different images received from the API request.
Health to all and Happy Hacking
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.