XiQing

｜爱听音乐/欣赏图画
/小白＜code＞/🥰热爱新知识//❤️提供价值｜英推：@xiaohe_code

[Xiaohe @xiaohe_code]

Just made a flowing energy sphere material with Three.js Torus Shader Language. You can tweak color, flow speed, brightness, distortion strength in real time, and copy the full code with one click when you're happy!Pro tip: Use a high-poly mesh (highly subdivided sphere or IcosahedronGeometry with several subdivisions) for super smooth results. Low-poly will look broken or even tank your FPS… trust me, I learned the hard way

#threejs

[XiQing @XIQING_code]

@NeverOrderWorld 什么事？

[Xiaohe @xiaohe_code]

My Three.js art space just got a new feature—a dissolve effect! ✨

I've integrated and updated this super cool dissolve characteristic into my online demo space. Now, you can witness firsthand how objects gradually "vanish" under the magic of TSL. Experience the dissolve effect now: https://t.co/CAQdZuNwUm

Heads up, I've optimized for mobile smoothness, but the best viewing experience is on a desktop!

#threejs #TSL #WebGPU #Shader #DissolveEffect #WebDevelopment #Frontend

demoVideo：👇

[Xiaohe @xiaohe_code]

🚀 Thrilled to announce! I've brought a Three.js dream space to life! ✨

After much exploration, I've finally completed this art-infused 3D exhibition space, successfully integrating the rotating, color-shifting octahedron I previously made with TSL!

The biggest highlight this time is my extensive use of the mx_fractal_noise_float function in TSL (Three.js Shading Language) to give the entire floor and display stands unique procedural textures. This means I'm no longer relying on traditional images; instead, I'm generating complex, vibrant details directly on the GPU in real-time through code. The visual impact is simply a leap forward! 🎨

Watch as my rotating, color-shifting octahedron perfectly settles on the display stand, creating an intriguing dialogue with its surrounding procedurally generated environment. This freedom of building art through code is truly captivating!

In the future, I plan to add more interactive experiences and diverse types of art exhibits to this space. What are your thoughts on TSL-driven immersive spaces like this? I'd love to hear from you!

#ThreeJS #ReactThreeFiber #TSL #WebGPU #ShaderArt #GenerativeArt #WebDevelopment #FrontendDev

Demo Video👇

[Xiaohe @xiaohe_code]

Hey everyone, new project sneak peek! ✨ I've been tinkering with a Three.js exhibition space recently, and I tried something new that I'm really excited about!

To give the floor and display stands a more unique, organic texture, I've extensively used the mx_fractal_noise_float function in TSL (Three.js Shading Language) for the first time to generate textures. Moving beyond traditional image textures and generating complex details directly on the GPU in real-time feels fantastic! This not only makes the visuals more expressive but also provides a more dynamic backdrop for the animated pieces that will be placed on the stands.

Exploring TSL had its challenges, but seeing the potential of generating spaces directly with code, without needing images, truly makes me feel the future is bright! 🚀

What are your thoughts or experiences with this kind of procedural generation in 3D spaces? Let's chat!

#threejs #ReactThreeFiber #TSL #WebGPU #Shader #WebDevelopment #前端
Video👇👇

[Xiaohe @xiaohe_code]

Hold on, everyone, and check this out! 🚀

I spent the entire weekend diving deep and successfully enabled WebGPU and TSL (Three.js Shading Language) in React Three Fiber! From navigating the various WebGPU configuration pitfalls to finally seeing this shimmering octahedron rotate on my screen, all the "head-scratching" was absolutely worth it! 🤯

Why go through all this "trouble"?

Goodbye Performance Anxiety 👋: WebGPU's powerful performance gives me full confidence in complex scenes, no more worrying about dropped frames!
No More GLSL "Pain" 🎨: TSL is truly a blessing for shader development; finally, no need to manually write those mind-bending .glsl files!
Curious how I did it? The code and detailed configuration are all here: https://t.co/dHbqaO9r7a

#ReactThreeFiber #WebGPU #TSL #ThreeJS #WebDevelopment #Frontend

[Xiaohe @xiaohe_code]

Just built a super cool customizable space background generator using React Three Fiber and GLSL Shaders! 🚀

With Leva UI, you can control layers, speed, flicker, star appearance, and color — all in real time.
And yes, the code is open source too!
Check out 3 different effects in the demo 👇
🐙 GitHub:https://t.co/vjooWLLVlg
Live Demo

#react #threejs #R3F #GLSL #Shaders #LevaJS #Frontend #Web制作

[Xiaohe @xiaohe_code]

🚀 Check out this dynamic background built with @react-three/fiber and GLSL! 🤯
With the Leva control panel, you become a real-time visual effects tuner, adjusting various parameters to generate completely different patterns.
code：https://t.co/KhJ7alae1k
🎥 Watch the live demo in the video!

#generativeart #Realtime #Interactive #WebGraphics #Frontend #threejs #Developer

[Xiaohe @xiaohe_code]

🌟 Transforming images into stunning particle effects using React and Three.js!

🚀 Implementation process:

📷 Created a custom Hook (useImageToParticles) to extract pixel data from images and generate 3D particle coordinates.

🎨 Developed a custom GLSL shader (ParticleMaterial) to enhance particle animation with dynamic noise, mouse interactions, and color gradients.
🙏 Special thanks to @techartist_ for sharing amazing shader code—follow them for more impressive shader effects!
🧩 Built the ParticlePlane component using BufferGeometry, enabling particle image animations from scratch.

🎥 Demo video & detailed code breakdown below 👇
code：https://t.co/X5Xe6BuD3I

💡 By changing images and adjusting parameters, you can create a variety of visual effects.

#threejs #React #WebGL #Shader #Animation #WebDev

[XiQing @XIQING_code]

制作了一个文本转语音网站，使用不需要登陆，完全免费使用，不储存用户数据。安全使用无忧！

[Xiaohe @xiaohe_code]

🎉 Big Update is Live! My Text-to-Speech website TextSpeakHub just got a major upgrade!

✅ Brand-new UI with theme switching and multilingual support — and the API exposure issue is now fixed!
✨ Added several cool particle animations using Three.js for a more stunning visual experience!
🌐 Give it a try now 👉 https://t.co/oiIKqDNPfC 💬
I'd love to hear your thoughts

#TTS #Threejs #React #UI #CreativeCoding #WebDev

[Xiaohe @xiaohe_code]

🎉 Big Update is Live! My Text-to-Speech website TextSpeakHub just got a major upgrade!

✅ Brand-new UI with theme switching and multilingual support — and the API exposure issue is now fixed!
✨ Added several cool particle animations using Three.js for a more stunning visual experience!
🌐 Give it a try now 👉 https://t.co/oiIKqDNPfC 💬
I'd love to hear your thoughts

#TTS #Threejs #React #UI #CreativeCoding #WebDev

[Xiaohe @xiaohe_code]

🚀 Neon Gradient Fluid Effect in Infinite Tunnel!

I applied a custom shader to the tunnel walls, achieving a stunning neon gradient fluid effect! If this animation perfectly matches the design by GPT-4o, further adjustments will still be needed for fine-tuning.

You can grab the code and tweak it yourself—play around with different colors and effects!

🎨 Custom shader with neon fluid animation

🌐 Seamless integration into 3D tunnel

🛠️ Ongoing adjustments for perfect design match

🔧 Try customizing colors and effects yourself!

📹 Demo & Source Code:https://t.co/6lEcjeNwlJ

#WebDesign #React #threejs #CustomShader #WebAnimation #CreativeCoding

[Xiaohe @xiaohe_code]

🚀 Just created a mesmerizing Shader Wave Effect with React Three Fiber and Leva controls!

🎮 Play around and tweak parameters to discover amazing visualizations.

🎥 Demo video + full code shared below👇, fork it and have fun experimenting!
code:https://t.co/x3B1hXlSos

#threejs #reactjs #shader #webgl #creativecoding #webdevelopment #ReactThreeFiber

[Xiaohe @xiaohe_code]

🚀 Infinite Tunnel Effect with React & Three.js

Just built an interactive, infinite 3D tunnel scene using React, Three.js, and Leva for dynamic controls—made easy thanks to Gemini 2.5 Pro!

✨ Smooth endless tunnel animation

🎛️ Real-time parameter adjustments via Leva

💡 Enhanced visuals with Bloom & reflections

📹 Demo & Source Code: https://t.co/6lEcjeNwlJ
#threejs #Gemini #CreativeCoding #aicode #WebDevelopment

[Xiaohe @xiaohe_code]

🌟 Created a "dispersing" animation using React + #threejs!
🚀 From convergence to explosion, the entire process is driven by parameters—tweak them to craft your own unique visual style!
🧠 Code + explanations are on GitHub (with comments and parameter guides!)
👉 Fork it, play with the values, and see what kind of visual tricks you can pull off!
code：https://t.co/vvvlMN4LDT

🎬 A demo video is ready too—come feel the visual impact!

If you like it, give it a share—maybe someone you like will try it out too 😉

#threejs #WebGL #webdev #creativecoding #FrontendDevelopment #3D

[XiQing @XIQING_code]

最近在尝试用代码实现一些动画和交互效果，进展都更新在 @xiaohe_code，感兴趣的话可以一起交流！

[Xiaohe @xiaohe_code]

While learning texture mapping, I casually tried the MeshDistortMaterial in Drei and randomly tweaked some parameters—
didn't expect it would look this cool! 🔥

code:https://t.co/PhQr9ZScoh

#threejs #WebGL #WebDevelopment #FrontendDevelopment #3D

Check demo 👇

[Xiaohe @xiaohe_code]

✨ Playing with visuals! ✨
Just created this interactive animated scene with Three.js + React Fiber!
📌 Controlled by GUI panel (leva) to tweak parameters in real-time. Endless visual possibilities!

Wanna explore? Check the demo & tweak the params yourself! code👇
https://t.co/S9Ds8W7jL7

#threejs #WebGL #webdev #creativecoding #FrontendDevelopment #3D

[XiQing @XIQING_code]

@GBDScoin 8kqAC35WdL4wTx9RWPJYMo52Qv5tWNGwTu31ngy59LMc
Good!

[XiQing @XIQING_code]

@cabelo_escobar sol： 8kqAC35WdL4wTx9RWPJYMo52Qv5tWNGwTu31ngy59LMc

[XiQing @XIQING_code]

@cabelo_escobar Is there a chance for me to win the $100,000 BTC reward now?