Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Harris-Usmani opened this issue Jun 25, 2021 · 14 comments

Comments

@Harris-Usmani
Copy link

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!

@HamishMW
Copy link
Owner

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

@Harris-Usmani
Copy link
Author

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?

@Harris-Usmani
Copy link
Author

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.

@Harris-Usmani
Copy link
Author

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 :)

@HamishMW
Copy link
Owner

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;
}

@HamishMW
Copy link
Owner

HamishMW commented Jun 30, 2021

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));

@arpitguptagithub
Copy link

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

@shuvocd
Copy link

shuvocd commented Mar 12, 2023

Why the animations not working?

@Cap043
Copy link

Cap043 commented Aug 17, 2023

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

@manitofigh
Copy link

manitofigh commented Aug 18, 2023

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.

@sujalk2211
Copy link

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

@manitofigh
Copy link

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

@manitofigh
Copy link

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.

@uxipandey
Copy link

uxipandey commented Feb 27, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants