React-The substance: Scroll, Refraction and Shader Effects in Three.js and React

Scroll, Refraction and Shader Effects in Three.js and React

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.

Featured Image

Article on Codrops

Demo

Installation

yarn
yarn start

Credits

Comments

  • Bump acorn from 5.7.3 to 5.7.4
    Bump acorn from 5.7.3 to 5.7.4

    Mar 14, 2020

    Bumps acorn from 5.7.3 to 5.7.4.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Start everything from bottom
    Start everything from bottom

    Mar 15, 2020

    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

    Reply
  • render from API
    render from API

    Apr 27, 2020

    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

    Reply
  • Bump websocket-extensions from 0.1.3 to 0.1.4
    Bump websocket-extensions from 0.1.3 to 0.1.4

    Jun 7, 2020

    Bumps websocket-extensions from 0.1.3 to 0.1.4.

    Changelog

    Sourced from websocket-extensions's changelog.

    0.1.4 / 2020-06-02

    • Remove a ReDoS vulnerability in the header parser (CVE-2020-7662, reported by Robert McLaughlin)
    • Change license from MIT to Apache 2.0
    Commits
    • 8efd0cd Bump version to 0.1.4
    • 3dad4ad Remove ReDoS vulnerability in the Sec-WebSocket-Extensions header parser
    • 4a76c75 Add Node versions 13 and 14 on Travis
    • 44a677a Formatting change: {...} should have spaces inside the braces
    • f6c50ab Let npm reformat package.json
    • 2d211f3 Change markdown formatting of docs.
    • 0b62083 Update Travis target versions.
    • 729a465 Switch license to Apache 2.0.
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Updating to react-three-fiber 5.0.x slows the project down
    Updating to react-three-fiber 5.0.x slows the project down

    Oct 5, 2020

    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?

    Reply
  • Other strategies for scroll rig
    Other strategies for scroll rig

    Oct 5, 2020

    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...

    Reply