How do you change the background color for the displacementSphere and the color of the sphere itself from blue to something else?

Question

How do you change the background color for the displacementSphere and the color of the sphere itself from blue to something else?

Harris-Usmani opened this issue 3 years ago · 14 comments

Hey!

I cannot seem to figure out how you would change the color of the background applied to the sphere itself.

I want to put something right before the the sphere, but after applying my z-index, I found out that the sphere has a background of its own which i cannot seem to figure out how to get rid of.

Any help would be appreciated.

Thank you!

Answer 1 · 2021-06-29T00:11:58.000Z

Hey, you can change the background to transparent in DisplacementSphere.js by adding alpha: true to the renderer

    renderer.current = new WebGLRenderer({
      canvas: canvasRef.current,
      antialias: false,
      powerPreference: 'high-performance',
      alpha: true, // <- add this
    });

and then you just need to remove the scene background on line 102

scene.current.background = new Color(...rgbToThreeColor(rgbBackground)); // Remove this line

Answer 2 · 2021-06-29T05:14:35.000Z

Thank you so much, that worked perfectly.

Anyway to change the color of the sphere itself?

Also, upon the reloading of the website, the sphere has a 3 second ease in animation, where would I edit that?

Answer 3 · 2021-06-29T06:27:18.000Z

The ease-in animation that I'm talking about also effects any text that I place over the projects sections/right after the hero section, so I would like to know how to remove/modify the effect itself so that it dosent effect any text that I place after it.

Answer 4 · 2021-06-29T12:39:26.000Z

Lastly, I'm trying to add in text which is outlined aka hollowed out on the homepage through this CSS code:

.taglineMain { font-family: Metropolis; display: flex; justify-content: center; align-content: center; font-weight: bold; font-size: 7em; color: transparent; -webkit-text-stroke: 1px white; text-transform: uppercase; }
however, upon turning on white mode, the text stays white. Any way to combat this?

Apologies for sending all of these questions your way haha, just trying to figure it out :)

Answer 5 · 2021-06-30T00:02:05.000Z

To change the sphere color you need to edit the shader in sphereFragShader.js. E.g. for more of a green

vec3 finalColors = vec3(color.b * 1.5, color.r * 2.0, color.b * 1.8);

If you want to change the fade in animation you can edit the timeout of the Transition in DisplacementSphere.js as well as the css transition duration in DisplacementSphere.css.

E.g. to make its fade 200ms instead of 3s

  return (
    <Transition appear in onEnter={reflow} timeout={200}>
      {status => (
        <canvas
          aria-hidden
          className={classNames('displacement-sphere', `displacement-sphere--${status}`)}
          ref={canvasRef}
          {...props}
        />
      )}
    </Transition>
  );

and

.displacement-sphere {
  transition-duration: 200ms;
}

Answer 6 · 2021-06-30T00:06:20.000Z

As for the outlined text, you're on the right track, just need to add -webkit-text-fill-color

  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgb(var(--rgbText));

Answer 7 · 2023-02-22T05:20:41.000Z

i wanted to add a glb file but i am unable to do that i have added the same in model and home page but cant find it after compiling

Answer 8 · 2023-03-12T20:07:58.000Z

Why the animations not working?

Answer 9 · 2023-08-17T07:45:00.000Z

how to change the theme? its not changing from code.module.css

Answer 10 · 2023-08-18T23:55:20.000Z

how to change the theme? its not changing from code.module.css

You have to change the values inside Navbar > ThemeProvider > theme.js
const dark is responsible for dark mode and const light for light mode.

Answer 11 · 2024-01-15T06:30:24.000Z

i want only displacement sphere animation code. Can you provide to me

Answer 12 · 2024-01-17T21:55:32.000Z

Pretty much everything about the displacement sphere is at src > layouts > Home > DisplacementSphere.js
Good luck

Answer 13 · 2024-01-17T22:00:31.000Z

Also take a look at displacementSphereFragment.glsl and displacementSphereVertex.glsl under the same parent folder at src > layouts > Home.
Based on what you want to tweak around, you might have to make some adjustments to the vectors and their calculations. I happened to make some minor changes to some of them.

Answer 14 · 2024-02-27T12:58:42.000Z

I'm getting below Errors when deploying on vercel. How To fix this?

at #assembleAndUpdateConfig (/vercel/path0/node_modules/miniflare/dist/src/index.js:8916:13) -- 16:42:22.056 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5) 16:42:22.056 | at async Mutex.runWith (/vercel/path0/node_modules/miniflare/dist/src/index.js:3864:16) 16:42:22.056 | at async #waitForReady (/vercel/path0/node_modules/miniflare/dist/src/index.js:8966:5) 16:42:22.056 | at async Miniflare._getProxyClient (/vercel/path0/node_modules/miniflare/dist/src/index.js:9071:5) 16:42:22.056 | at async Miniflare.getBindings (/vercel/path0/node_modules/miniflare/dist/src/index.js:9090:25) 16:42:22.056 | at async getBindingsProxy (/vercel/path0/node_modules/wrangler/wrangler-dist/cli.js:168478:20) 16:42:22.056 | at async Object.remixConfig (/vercel/path0/node_modules/@remix-run/dev/dist/vite/presets/cloudflare.js:36:9) 16:42:22.056 | at async /vercel/path0/node_modules/@remix-run/dev/dist/vite/plugin.js:280:56 16:42:22.056 | at async Promise.all (index 0) { 16:42:22.056 | code: 'ERR_RUNTIME_FAILURE', 16:42:22.056 | cause: undefined 16:42:22.056 | } 16:42:22.106 | Error: Command "npm run build" exited with 1