Saturday, June 28, 2025
News PouroverAI
Visit PourOver.AI
No Result
View All Result
  • Home
  • AI Tech
  • Business
  • Blockchain
  • Data Science & ML
  • Cloud & Programming
  • Automation
  • Front-Tech
  • Marketing
  • Home
  • AI Tech
  • Business
  • Blockchain
  • Data Science & ML
  • Cloud & Programming
  • Automation
  • Front-Tech
  • Marketing
News PouroverAI
No Result
View All Result

Creating an Interactive 3D Bulge Text Effect with React Three Fiber

March 20, 2024
in Front-Tech
Reading Time: 4 mins read
0 0
A A
0
Share on FacebookShare on Twitter


In this tutorial, we will learn how to create an engaging bulge effect on text using React Three Fiber.

Over the past few weeks, I have been experimenting with combining 3D and 2D elements to create interesting effects. Today, I will walk you through the process of replicating a bulge effect on text.

To simplify the process and maintain a structured approach to combining HTML with 3D, we will utilize React Three Fiber.

Let’s get started!

Setup

First, let’s set up our 3D scene by creating:

– a plane (where our text bulge effect will be displayed).
– our HTML text element.

With drei, you can directly insert HTML elements inside your Scene components using the HTML component. This is useful in our case as we will need access to our HTML within our 3D scene.

It is also important to wrap the title within a single div that spans the entire viewport width and height. Similarly, for the plane, with R3F’s useThree() hook, we can easily retrieve the viewport sizes.

For now, let’s set the plane’s opacity to 0 to see our HTML element:

“`jsx
function Scene() {
const { viewport } = useThree();

return (
<>

WHEN
WILL
WE
MEET ?





);
}
“`

Converting HTML to Texture

Now, the main trick for this effect is to convert our div into a texture that we will apply to our plane. For that, we will use the html2canvas library to generate an image from our DOM element and then convert it into a texture.

To streamline this process for future projects, let’s create a custom hook named useDomToCanvas.

“`jsx
const useDomToCanvas = (domEl) => {
const [texture, setTexture] = useState();

useEffect(() => {
if (!domEl) return;
const convertDomToCanvas = async () => {
const canvas = await html2canvas(domEl, { backgroundColor: null });
setTexture(new THREE.CanvasTexture(canvas));
};
convertDomToCanvas();
}, [domEl]);

return texture;
};
“`

We can also enhance the hook to handle resizing, as the div may remain behind the canvas. We simply need to recall the function when the window is resized. To prevent excessive draw calls, let’s incorporate a debounce.

“`jsx
const debouncedResize = debounce(() => {
convertDomToCanvas();
}, 100);

window.addEventListener(“resize”, debouncedResize);
“`

Implementing the Bulge Effect

Now, to achieve the bulge effect, we will use shader programs to access the vertices of the plane. Although shader programming might seem difficult, don’t worry – in our case, it will be a simple effect. We will break it down into three small steps so you can easily follow what’s happening.

For an introduction to shaders, you can also refer to the Lewis Lepton YouTube series.

First, let’s use a shaderMaterial as the material for the plane and create our fragment and vertex shaders.

“`jsx
// Scene.jsx
…

“`

Step 1: First, the idea is to draw a circle on our plane. To achieve this, we will utilize the UV coordinates and the GLSL distance function. Let’s encapsulate the code into a function to enhance clarity.

“`glsl
// fragment.glsl
…
float circle(vec2 uv, vec2 circlePosition, float radius) {
float dist = distance(circlePosition, uv);
return 1. – smoothstep(0.0, radius, dist);
}

void main() {
float circleShape = circle(vUv, vec2(0.5), 0.5);
gl_FragColor = vec4(vec3(circleShape), 1.);
}
“`

Step 2: Now, we will dynamically adjust the circle’s origin position based on mouse movement. With R3F, accessing normalized mouse positions is straightforward using useFrame(). By passing mouse positions as uniforms to the fragment shader, we will observe the circle’s movement.

“`jsx
// Scene.jsx
…
useFrame((state, delta) => {
const mouse = state.mouse;
materialRef.current.uniforms.uMouse.value = mouse;
});

// fragment.glsl
…
void main() {
vec2 mousePositions = uMouse * 0.5 + 0.5;
float circleShape = circle(vUv, mousePositions, 0.5);
gl_FragColor = vec4(vec3(circleShape), 1.);
}
“`

Step 3: Now, we just need to call the circle function in the vertex shader and adjust the z position based on the circle. And… voilà! We have our bulge effect! (Also, don’t forget to replace the texture in the fragment shader.)

“`glsl
// vertex.glsl
void main() {
vec3 newPosition = position;

// Elevation
vec2 mousePositions = uMouse * 0.5 + 0.5;
float circleShape = circle(uv, mousePositions, 0.2);
float intensity = 0.7;
newPosition.z += circleShape * intensity;

gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
}

// fragment.glsl
uniform sampler2D uTexture;
varying vec2 vUv;

void main() {
vec4 finalTexture = texture2D(uTexture, vUv);
gl_FragColor = vec4(finalTexture);
}
“`

Adding Lighting

To enhance the 3D appearance, let’s incorporate lighting effects. While coding custom lighting effects within the fragment shader can be complex, we can leverage existing libraries like customShaderMaterial. With customShaderMaterial, we will seamlessly integrate standardMaterial and a pointLight to achieve stunning shading effects.

“`jsx
// Scene.jsx
“`

Congratulations! You have successfully implemented the effect.

I have included a GUI within the repository so you can play with positions and light color. I would love to see your creations and how you build upon this demo. Feel free to share your experiments with me on Twitter!

Pushing the Web Forward: Address Most Web Animation Limitations with One Tool



Source link

Tags: BulgeCreatingEffectFiberInteractiveReactreact three fiber text effectTextwebgl text effect
Previous Post

Helukabal TOPFLEX® 600 Variable Frequency Drive (VFD) Cable

Next Post

Braun Series 9 Pro vs Philips Norelco 9800 – Ryan Swanstrom

Related Posts

The essential principles of a good homepage
Front-Tech

The essential principles of a good homepage

June 7, 2024
How to measure and improve user retention
Front-Tech

How to measure and improve user retention

June 6, 2024
Push Animation on Grid Items
Front-Tech

Push Animation on Grid Items

June 5, 2024
How to build a Rails API with rate limiting
Front-Tech

How to build a Rails API with rate limiting

June 4, 2024
Introduction to the B.I.A.S. framework
Front-Tech

Introduction to the B.I.A.S. framework

June 3, 2024
Blue Ridge Ruby is exactly what we need
Front-Tech

Blue Ridge Ruby is exactly what we need

June 3, 2024
Next Post
Braun Series 9 Pro vs Philips Norelco 9800 – Ryan Swanstrom

Braun Series 9 Pro vs Philips Norelco 9800 – Ryan Swanstrom

9 SSH Key Management Best Practices You Need to Know

9 SSH Key Management Best Practices You Need to Know

Mysten Labs Technology Prototype on Sui Provides First Proof of Elastic Blockchain Scaling – Blockchain News, Opinion, TV and Jobs

Mysten Labs Technology Prototype on Sui Provides First Proof of Elastic Blockchain Scaling – Blockchain News, Opinion, TV and Jobs

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Trending
  • Comments
  • Latest
23 Plagiarism Facts and Statistics to Analyze Latest Trends

23 Plagiarism Facts and Statistics to Analyze Latest Trends

June 4, 2024
How ‘Chain of Thought’ Makes Transformers Smarter

How ‘Chain of Thought’ Makes Transformers Smarter

May 13, 2024
Amazon’s Bedrock and Titan Generative AI Services Enter General Availability

Amazon’s Bedrock and Titan Generative AI Services Enter General Availability

October 2, 2023
Is C.AI Down? Here Is What To Do Now

Is C.AI Down? Here Is What To Do Now

January 10, 2024
The Importance of Choosing a Reliable Affiliate Network and Why Olavivo is Your Ideal Partner

The Importance of Choosing a Reliable Affiliate Network and Why Olavivo is Your Ideal Partner

October 30, 2023
Managing PDFs in Node.js with pdf-lib

Managing PDFs in Node.js with pdf-lib

November 16, 2023
Can You Guess What Percentage Of Their Wealth The Rich Keep In Cash?

Can You Guess What Percentage Of Their Wealth The Rich Keep In Cash?

June 10, 2024
AI Compared: Which Assistant Is the Best?

AI Compared: Which Assistant Is the Best?

June 10, 2024
How insurance companies can use synthetic data to fight bias

How insurance companies can use synthetic data to fight bias

June 10, 2024
5 SLA metrics you should be monitoring

5 SLA metrics you should be monitoring

June 10, 2024
From Low-Level to High-Level Tasks: Scaling Fine-Tuning with the ANDROIDCONTROL Dataset

From Low-Level to High-Level Tasks: Scaling Fine-Tuning with the ANDROIDCONTROL Dataset

June 10, 2024
UGRO Capital: Targeting to hit milestone of Rs 20,000 cr loan book in 8-10 quarters: Shachindra Nath

UGRO Capital: Targeting to hit milestone of Rs 20,000 cr loan book in 8-10 quarters: Shachindra Nath

June 10, 2024
Facebook Twitter LinkedIn Pinterest RSS
News PouroverAI

The latest news and updates about the AI Technology and Latest Tech Updates around the world... PouroverAI keeps you in the loop.

CATEGORIES

  • AI Technology
  • Automation
  • Blockchain
  • Business
  • Cloud & Programming
  • Data Science & ML
  • Digital Marketing
  • Front-Tech
  • Uncategorized

SITEMAP

  • Disclaimer
  • Privacy Policy
  • DMCA
  • Cookie Privacy Policy
  • Terms and Conditions
  • Contact us

Copyright © 2023 PouroverAI News.
PouroverAI News

No Result
View All Result
  • Home
  • AI Tech
  • Business
  • Blockchain
  • Data Science & ML
  • Cloud & Programming
  • Automation
  • Front-Tech
  • Marketing

Copyright © 2023 PouroverAI News.
PouroverAI News

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In