Forem: Wassim SAMAD

How to Create a VTuber Studio with Three.js, React & VRM

Wassim SAMAD — Fri, 25 Apr 2025 12:07:04 +0000

Want to build your own VTuber studio on the web? Thanks to modern tools like Three.js, VRM models, and Mediapipe, creating an interactive 3D avatar that mimics your facial expressions is totally possible—even in your browser.

In this guide, we’ll go over how to bring a VTuber avatar to life using Three.js with React. For detailed code and implementation, check out the full walkthrough video below.

Watch the video version on YouTube

What is a VRM?

Let’s have a look at what VRM are.

VRM stands for Virtual Reality Model. It’s a 3D avatar format widely used by VTubers and in games, thanks to its standardized structure that makes it easy to reuse the same character across different platforms and experiences.

You can find free avatars or create your own using the free tool VRoid Studio.

There are also utility libraries available to load VRM models into engines like Unity and Three.js, making integration super accessible for developers.

👉 For more info, visit the official VRM documentation.

Find VRM Models

If you’re just getting started, the fastest way is to download pre-made avatars from the community.

🎨 Explore a huge library of user-created characters here:

👉 hub.vroid.com

Once downloaded, you’ll get a .vrm file, which you can load directly into your Three.js scene using the right loader.

Build Your VRM

Want to create a custom avatar?

VRoid Studio is your go-to tool. It’s a free app for Windows and macOS that lets you:

Design anime-style avatars with a visual editor
Customize facial features, hair, clothing, and more
Export the finished avatar in the .vrm format. Here is a link to the documentation on how to export the VRM model.

The exported file will be ready to use in any VTuber application—including your own studio.

Load and Control VRM with Three.js

To bring your avatar into a web environment, you’ll need Three.js and the VRM Loader with @pixiv/three-vrm library.

The basic steps are:

Set up your Three.js scene
Load the .vrm file with the VRMLoader
Add it to your scene and animate it with custom logic

The VRM file includes bones and expressions that you can control the usual way. Either manually, through FBX animations, or with camera tracking.

Use Mediapipe with Kalidokit to Control the Avatar

For real-time face and body tracking, Google’s Mediapipe is incredible. It runs in the browser using WebAssembly and gives you landmark data for:

Eyes
Mouth
Face mesh
Hands
Pose

But Mediapipe only gives you raw data. This is where Kalidokit comes in. It maps Mediapipe’s landmarks to a VRM model's facial expressions and bones.

Here’s how it works:

Mediapipe tracks your webcam feed and extracts landmark data.
Kalidokit interprets that data and calculates bone rotations.
You apply these values to your VRM model in Three.js.

It’s like motion capture, but in real time and in your browser.

Checkout Kalidoface made by the creators of Kalidokit. It’s a very well polished app that uses the same technology to track your face and apply it to a VRM model.

Conclusion

By combining VRM avatars, Three.js rendering, Mediapipe tracking, and Kalidokit’s mapping magic, you can build your very own VTuber Studio—all with web technologies.

Whether you’re planning to stream, build a game, or just experiment with 3D avatars, this setup gives you a powerful and accessible starting point.

🧠 Want to see it all in action?

Watch the full video tutorial above for a step-by-step guide.
Check out the code on GitHub
Check the final project at https://vrm.wawasensei.dev/

wawa-vfx: Open-Source VFX + Particle System for React Three Fiber Projects

Wassim SAMAD — Tue, 15 Apr 2025 05:57:02 +0000

Add visual effects, particles, and trails to your 3D web apps with ease with wawa-vfx engine.

wawa-vfx is a lightweight, composable, and performance-focused visual effects engine tailored for React Three Fiber. Ideal if you're building a game, a product configurator, or an interactive 3D website, this library helps you adding GPU-accelerated particles, bursts, and trails with minimal effort.

Preview of the wawa-vfx engine in action!

💡 Why `wawa-vfx` Exists

Through multiple projects, I found myself needing a simple yet powerful VFX engine that could easily integrate with Three.js and React Three Fiber. I wanted to create stunning visual effects without the complexity of traditional game engines or the steep learning curve of shader programming.

I often found myself re-inventing the wheel, creating custom shaders and effects from scratch. This was time-consuming and inefficient, while the code was often very similar across projects. I wanted to focus on building experiences rather than getting bogged down in the technical details of VFX.

During my course development, I realized there was a real need for a modular, React-friendly VFX system that doesn't rely on bulky engines or require advanced shader knowledge. So I built wawa-vfx to teach core VFX concepts while keeping it practical, performant, and production-ready.

This is the VFX engine we build together in this lesson from my course: React Three Fiber: The Ultimate Guide to 3D Web Development.

Then, I dedicated two lessons to learn how to leverage the engine to create lovely vfx.

The first one is the Fireworks lesson 🎇 where we create a landing page allowing us to trigger different types of fireworks.

Preview of the Fireworks lesson or follow this link to try it out yourself!

The second one is the Wizard Game in which we create a game where you can shoot different spells (Fire, Ice, Void) to fight orcs. 🧙

Preview of the Wizard Game lesson or follow this link to try it out yourself!

⚡ Features

Here is what the wawa-vfx engine offers:

💻 Built for React Three Fiber (R3F-first design)
✨ Declarative effects like particles, bursts, and trails
⚙️ GPU-powered and optimized for real-time rendering
🧱 Custom geometries
🎓 Fully explained in my course for complete understanding
🤝 Open to contributions and community-driven improvements

📦 Installation

npm install wawa-vfx

yarn add wawa-vfx

Usage

To use the wawa-vfx engine, you need to use the two main components: VFXParticles and VFXEmitter.

VFXParticles: Defines the particle system and its rendering properties
VFXEmitter: Controls where, when and how particles are emitted into the scene

Basic Example

import { VFXEmitter, VFXParticles } from "wawa-vfx";

const MyEffect = () => {
  return (
    <>
      {/* Step 1: Define your particle system */}
      <VFXParticles
        name="particles" // A unique identifier for this particle system
        settings={{
          nbParticles: 100000, // Maximum number of particles to allocate
          gravity: [0, -9.8, 0], // Apply gravity (x, y, z)
          fadeSize: [0, 0], // Size fade in/out settings
          fadeOpacity: [0, 0], // Opacity fade in/out settings
          renderMode: "billboard", // "billboard" or "mesh"
          intensity: 3, // Brightness multiplier
        }}
      ></VFXParticles>

      {/* Step 2: Define your emitter */}
      <VFXEmitter
        debug // Show debug visualization
        emitter="particles" // Target the particle system by name
        settings={{
          loop: true, // Continuously emit particles (only if `spawnMode` is 'time')
          duration: 1, // Emission cycle duration in seconds
          nbParticles: 100, // Number of particles to emit per cycle
          spawnMode: "time", // Emission mode: 'time' or 'burst'
          delay: 0, // Time delay before starting emission

          // Particle lifetime range [min, max]
          particlesLifetime: [0.1, 1],

          // Position range (min/max)
          startPositionMin: [-0.1, -0.1, -0.1],
          startPositionMax: [0.1, 0.1, 0.1],

          // Rotation range (min/max)
          startRotationMin: [0, 0, 0],
          startRotationMax: [0, 0, 0],
          // Rotation speed range (min/max)
          rotationSpeedMin: [0, 0, 0],
          rotationSpeedMax: [0, 0, 0],

          // Direction range (min/max)
          directionMin: [-1, 0, -1],
          directionMax: [1, 1, 1],

          // Particle size range [min, max]
          size: [0.01, 0.25],

          // Particle speed range [min, max]
          speed: [1, 12],

          // Color at start - an array of strings for random selection
          colorStart: ["white", "skyblue"],

          // Color at end - an array of strings for random selection
          colorEnd: ["white", "pink"],
        }}
      ></VFXEmitter>
    </>
  );
};

Explore the source code of the examples you can find on the demo page of the VFXEngine to see how to use the engine in different scenarios.

🚀 Open for Contributions

The project is open-source and community-driven!
Feel free to check out the repo, submit issues, contribute ideas, or open pull requests.

🔗 GitHub Repository

What is a 3D website? Explanation for beginners

Wassim SAMAD — Tue, 15 Apr 2025 05:51:30 +0000

From flat pages to immersive digital worlds, here’s what makes a 3D website — and why they’re shaping the future of the web.

🆚 2D vs. 3D Websites

Most websites you use every day — blogs, shops, social platforms — are 2D. They present content like text, images, and videos in a scrollable, flat layout. You view information, click links, and move from one page to another.

But with 3D websites, you don’t just scroll — you explore. These experiences add depth, interaction, and immersion, creating a digital space you can move through, like a virtual environment or game.

🧠 What Makes a Website 3D?

Despite the name, 3D websites don’t need to be fully three-dimensional. They can be a mix of 2D and 3D elements, but they all share a few key features:

3D Models: Objects created in 3D software (like Blender or Maya) that can be manipulated and viewed from different angles.
Interactive Elements: Users can click, drag, or hover over objects to trigger animations or changes in the scene.
Dynamic Lighting and Shadows: Real-time lighting effects that change based on the scene and user interactions, adding depth and realism.
Animations: Objects can move, rotate, or change shape in response to user actions or events.
Camera Controls: Users can navigate the scene using mouse or touch controls, allowing them to explore the environment from different perspectives.
Advanced Rendering Techniques: 3D can be used to create advanced sliders, carousels, and other UI elements that feel more alive and engaging.

🎨 Interactive Visual Experience

Learning with a virtual teacher

Realistic lighting, textures, and materials

Instead of static images, 3D websites use real-time lighting and rich textures to create scenes that feel tangible — like walking into a showroom or gallery.

Explore virtual objects and environments

Imagine rotating a 3D product, zooming into a design, or walking through a digital building — all in your browser.

Immersion that feels like a digital world

Users don’t just observe — they experience. This kind of depth and interaction makes content far more engaging.

🕹️ Enhanced User Engagement

3D car slider

Real-time interactions make content feel alive

3D websites respond dynamically to user input, allowing people to move around, manipulate objects, or follow interactive stories.

Control the experience

From custom camera views to clickable 3D elements, users feel more in control of their journey through the site.

Increased engagement and retention

The more engaging your website is, the longer people stay — and the more likely they are to remember your brand or product.

🔧 Powered by Modern Web Technologies

Built using WebGL/WebGPU

Technologies like WebGL, WebGPU allows our browsers to render 3D graphics directly, without needing plugins or special software.

Frameworks like Three.js, React Three Fiber and Babylon.js make it easy to create complex 3D scenes that run smoothly in the browser.

No plugins or downloads needed

Everything runs natively in the browser — no special software or extensions required.

Responsive across devices

Whether on desktop or mobile, 3D websites can be optimized for performance and accessibility.

🎓 Want to Build One Yourself?

If you’re excited by the idea of creating your own interactive 3D website — you can absolutely learn to do it.

Check out my course:

👉 React Three Fiber: The Ultimate Guide to 3D Web Development

In it, I walk you through the process of building fully interactive 3D experiences using React Three Fiber, even if you’re new to 3D or React.

Through project-based learning, you’ll gain hands-on experience with the tools and techniques used to create stunning 3D websites:

3D fundamentals
Cameras, lights, shadows, and materials
How to find, prepare, and import 3D models
Interactivity & animations
Performance optimization
Shaders, VFX & post-processing
New technologies WebGPU and Three.js Shading Language (TSL)

Preview of the camera controls lesson

Preview of the image slider lesson

To finish by building a professional 3D website portfolio that showcases your work and skills.

The portfolio we build together in the course!

🧭 Conclusion

3D websites are opening the door to a new kind of digital experience — one that’s immersive, interactive, and deeply engaging. As more businesses and creators seek to stand out online, the demand for 3D web experiences will only grow.

With the right tools and a bit of curiosity, anyone can start building their own.

Start exploring, start building — and maybe, your next website won’t just be seen — it’ll be experienced.

🔗 Want to get started?

Join hundreds of developers learning React Three Fiber today:

👉 https://wawasensei.dev/courses/react-three-fiber

Creating a 3D Table Configurator with React Three Fiber

Wassim SAMAD — Tue, 21 Feb 2023 01:00:25 +0000

Let's create a 3D Table Configurator using the following libraries:

Vite
React
Tailwind
Three.js
React Three Fiber
Material UI

🔥 This tutorial is a good starting point to create a product configurator for an exciting shopping experience.

The main topics covered are:

how to load a 3D model
how to modify it using a user interface
how to scale and move items smoothly

A video version is also available where you can watch the final render:

Project Setup

I prepared you a starter pack including:

a React app created with Vite
a MUI User Interface
three.js/React Three Fiber installed including a Canvas displaying a cube to get started
the 3D model of the table in public/models

The table model contains all the different legs layout

I separated in different meshes the left and right legs to make it simple when we will expand the table width.

*Clone the repo and run *

yarn
yarn dev

You should see a cube and be able to rotate around it thanks to <OrbitControls />

Staging

Now let’s create a better staging environment. I rarely start from scratch, I recommend you to go through React Three Fiber examples to find a good starting point.

I chose one named stage presets, gltfjsx

It contains nice lighting and shadows settings.

We start by copying the canvas with the camera settings and enabling shadows.

<Canvas shadows camera={{ position: [4, 4, -12], fov: 35 }}>
...
</Canvas>

I set y position of the camera to 4

Then we copy the stage component and orbitcontrols and instead of using their model, we use the cube for now.

<Stage intensity={1.5} environment="city" shadows={{
  type: "accumulative",
  color: "#85ffbd",
  colorBlend: 2,
  opacity: 2,
}}
  adjustCamera={2}
>
...
<OrbitControls makeDefault minPolarAngle={0} maxPolarAngle={Math.PI / 2} />

I assigned the color to the one of the gradient in the CSS index file.
It helps to build good looking shadows on the floor. I also changed adjustCamera to 2 to zoom out a little bit.

minPolarAngle and maxPolarAngle are limits you can define on OrbitControls to avoid going below or over the model.

Adjust those parameters to what you prefer.

We can’t see shadows yet even if the canvas and stage have shadows enabled.

We need to tell our mesh to castShadows.

Now we can see the very smooth shadow generated by the stage component.

Load the table

Let’s render our table instead of the default cube.

To do so we use the gltfjsx client with

npx gltjfs public/models/Table.gltf

It generates a Table.js file containing a React component with the extracted meshes from the table model file.

Let’s copy everything, delete the file, and create a new one in the components folder named Table.jsx

By default it’s named Model, rename it to Table. We need to fix the path adding ./models for both useGltf and the preload call.

The final component code should looks like this

Now let’s replace the cube with the table in Experience.jsx.

There’s no shadows yet. So let’s add the castShadow prop on every meshes on the Table component.

<mesh casthShadows />

Now our table renders shadows correctly, but all the legs layouts are displayed at the same time.

Legs layout

To be able to display only one layout at a time let’s create a folder named contexts and a file named Configurator.jsx

Let's create a context Boilerplate with createContext ConfiguratorProvider and useConfigurator.

Ok, now we want to have the choice between our legs layout, so we define legs and setLegs with useState.
Our layouts will be 0, 1 and 2. so let’s default to 0.

const [legs, setLegs] = useState(0);

Go back to our table and get the legs from useConfigurator.

const { legs } = useConfigurator();

And we will simply do conditional rendering for our legs.

If it’s 0, we render the first one, if it’s 1 we render the second layout, and if it’s 2 we render the last one.

{legs === 0 && (
        <>
          <mesh
            castShadow
            geometry={nodes.Legs01Left.geometry}
            material={materials.Metal}
            position={[-1.5, 0, 0]}
          />
          <mesh
            geometry={nodes.Legs01Right.geometry}
            material={materials.Metal}
            position={[1.5, 0, 0]}
            castShadow
          />
        </>
      )}
      {legs === 1 && (
        <>
          <mesh
            geometry={nodes.Legs02Left.geometry}
            material={materials.Metal}
            position={[-1.5, 0, 0]}
            castShadow
          />
          <mesh
            geometry={nodes.Legs02Right.geometry}
            material={materials.Metal}
            position={[1.5, 0, 0]}
            castShadow
          />
        </>
      )}
      {legs === 2 && (
        <>
          <mesh
            geometry={nodes.Legs03Left.geometry}
            material={materials.Metal}
            position={[-1.5, 0, 0]}
            castShadow
          />
          <mesh
            geometry={nodes.Legs03Right.geometry}
            material={materials.Metal}
            position={[1.5, 0, 0]}
            castShadow
          />
        </>
      )}

In a real project you could refactor it more nicely.

Now jump into main.jsx and wrap the app in our ConfiguratorProvider to make our context available everywhere.

Wrapping the App in the Configurator provider

It works, now we only see the first legs layout!

Let’s add the Interface component I prepared for you next to the canvas.

<Canvas shadows camera={{ position: [4, 4, -12], fov: 35 }}>
  <Experience />
</Canvas>
<Interface />

You now can see the different options available.

Now let's go to our Interface code.

I commented the full settings so we don’t mess up with the naming.

Let’s grab legs and setLegs from our configurator.

const [legs, setLegs] = useConfigurator();

...and let’s uncomment the value and onChange on our layout radio buttons.

Now when we switch, the legs change correctly...

...but the shadows are not re-rendered because the scene doesn’t know something changes.

A simple way to tell it is to get the legs value in the experience component to force the re-rendering.

const { legs } = useConfigurator();

Add this line to the Experience component.

Now the shadows are re-generated when we switch.

Legs color

Let’s change the legs color. Go to the Configurator and create legsColor and setLegsColor with the same default value we have in the interface. Feel free to change it.
Don't forget to add it to the exposed values from the context.

Let's apply the color to the Table.

const { legs, legsColor, setLegsColor } = useConfigurator();

We add a useEffect with legsColor so every time it changes, this function will get called.

useEffect(() => {
  materials.Metal.color = new Three.Color(legsColor);
}, [legsColor]);

We need to add this import line manually:

import * as Three from "three";

On the interface let’s add the legsColor and setLegsColor and uncomment the value and onChange.

<FormControl>
  <FormLabel>Legs Color</FormLabel>
  <RadioGroup
    value={legsColor}
    onChange={(e) => setLegsColor(e.target.value)}
>

Now the color of our legs changes every time we apply it.

Table width

Last step, let’s change the width from our table!

In our Configurator context create a tableWidth state with a default value of 100 (centimeters)

Our final context should looks like this

Get it into the Table component, and let’s calculate a scalingPercentage by diving the tableWidth per one hundred.

const tableWidthScale = tableWidth / 100;

On the plate, change the scale with the tableWidthScale on the x axis, and keep the y and z to 1.

In the Interface let’s uncomment the slider value and onChange.

const { tableWidth, setTableWidth, legs, setLegs, legsColor, setLegsColor } =
    useConfigurator();
...
<FormControl>
  <FormLabel>Table width</FormLabel>
  <Slider
  sx={{
  width: "200px",
  }}
  min={50}
  max={200}
  value={tableWidth}
  onChange={(e) => setTableWidth(e.target.value)}
  valueLabelDisplay="auto"
  />
</FormControl>

Now our table width change but we need to move the legs accordingly, we can do it simply by multiplying the x position by the tableWidthScale.

Adjusting the x position of the table legs

Now it works correctly, but still the movement is not very smooth

Smooth animation

To make a smooth animation when we changes the table width, let’s store references of our plate, left legs and right legs.

const plate = useRef();
const leftLegs = useRef();
const rightLegs = useRef();

Because our leftLegs and rightlegs are never rendered at the same time, we can save the 3 legs layouts in the same references.

Let’s remove the tableWidthScale multiplier as we will do it another way.

{legs === 0 && (
        <>
          <mesh
            castShadow
            geometry={nodes.Legs01Left.geometry}
            material={materials.Metal}
            position={[-1.5, 0, 0]}
            ref={leftLegs}
          />
          <mesh
            geometry={nodes.Legs01Right.geometry}
            material={materials.Metal}
            position={[1.5, 0, 0]}
            castShadow
            ref={rightLegs}
          />
        </>
      )}
      {legs === 1 && (
        <>
          <mesh
            geometry={nodes.Legs02Left.geometry}
            material={materials.Metal}
            position={[-1.5, 0, 0]}
            castShadow
            ref={leftLegs}
          />
          <mesh
            geometry={nodes.Legs02Right.geometry}
            material={materials.Metal}
            position={[1.5, 0, 0]}
            castShadow
            ref={rightLegs}
          />
        </>
      )}
      {legs === 2 && (
        <>
          <mesh
            geometry={nodes.Legs03Left.geometry}
            material={materials.Metal}
            position={[-1.5, 0, 0]}
            castShadow
            ref={leftLegs}
          />
          <mesh
            geometry={nodes.Legs03Right.geometry}
            material={materials.Metal}
            position={[1.5, 0, 0]}
            castShadow
            ref={rightLegs}
          />
        </>
      )}

We use the useFrame hook which will be called at each frame.

It provides the state, and the delta time. which is the time between elapsed from the last frame.

We declare a targetScale Vector3 with tableWidthScale on the x axis. And on the plate scale we use the lerp function to transition smoothly from our currentScale into our targetScale.

import { useFrame } from "@react-three/fiber"; 
...
useFrame((_state, delta) => {
  const tableWidthScale = tableWidth / 100;
  const targetScale = new Vector3(tableWidthScale, 1, 1);

  plate.current.scale.lerp(targetScale, delta);
});

Now it animates smoothly, but it’s too slow, let’s define an ANIM_SPEED constant of 12 and multiply the delta by it.

const ANIM_SPEED = 12;
...
plate.current.scale.lerp(targetScale, delta * ANIM_SPEED);

Let’s do the same process for both legs impacting the position instead of the scale:


const ANIM_SPEED = 12;

export function Table(props) {
  const { nodes, materials } = useGLTF("./models/Table.gltf");

  const { legs, legsColor, tableWidth } = useConfigurator();

  const plate = useRef();
  const leftLegs = useRef();
  const rightLegs = useRef();

  useEffect(() => {
    materials.Metal.color = new Three.Color(legsColor);
  }, [legsColor]);

  useFrame((_state, delta) => {
    const tableWidthScale = tableWidth / 100;
    const targetScale = new Vector3(tableWidthScale, 1, 1);

    plate.current.scale.lerp(targetScale, delta * ANIM_SPEED);

    const targetLeftPosition = new Vector3(-1.5 * tableWidthScale, 0, 0);
    leftLegs.current.position.lerp(targetLeftPosition, delta * ANIM_SPEED);

    const targetRightPosition = new Vector3(1.5 * tableWidthScale, 0, 0);
    rightLegs.current.position.lerp(targetRightPosition, delta * ANIM_SPEED);
  });

Yes! Our table configurator now works perfectly!

Conclusion

Congratulations you now have a great starting point to build a 3D product configurator using React Three Fiber and Material UI.

Live preview

The code is available here:
https://github.com/wass08/table-configurator-three-js-r3F-tutorial-final

I highly recommend you to read React Three Fiber documentation and check their examples to discover what you can achieve and how to do it.

For more React Three Fiber tutorials you can check my Three.js/React Three Fiber playlist on YouTube.

Thank you, don't hesitate to ask your questions in the comments section 🙏

Scroll animations with React Three Fiber and GSAP

Wassim SAMAD — Wed, 15 Feb 2023 12:40:05 +0000

Let's animate our 3D model and our user interface to follow the page scroll with:

Vite
React
Tailwind
Three.js
React Three Fiber
GSAP

🔥 This tutorial is a good starting point to prepare a good looking portfolio.

A video version is also available where you can watch the final render:

Project Setup

Let's start by creating a React app with Vite

yarn create vite

Select the react/javascript template

Now add the dependencies for React Three Fiber

yarn add three @react-three/drei @react-three/fiber
yarn dev

Go to index.css and remove everything inside (keep the file we will use it later)

In App.css replace everything with

#root {
  width: 100vw;
  height: 100vh;
  background-color: #d9afd9;
  background-image: linear-gradient(0deg, #d9afd9 0%, #97d9e1 100%);
}

Now create a folder named components and inside create an Experience.jsx file. It's where we'll build our 3D experience.

Inside let's create a cube and add OrbitControls from React Three Drei:

import { OrbitControls } from "@react-three/drei";

export const Experience = () => {
  return (
    <>
      <OrbitControls />
      <mesh>
        <boxBufferGeometry />
        <meshNormalMaterial />
      </mesh>
    </>
  );
};

Now let's open App.jsx and replace the content with a Canvas that will hold our Three.js components and the Experience component we just built

import { Canvas } from "@react-three/fiber";
import "./App.css";
import { Experience } from "./components/Experience";

function App() {
  return (
    <Canvas>
      <Experience />
    </Canvas>
  );
}

export default App;

Save and run the project with

yarn dev

You should see a cube and be able to rotate around it with your mouse (thanks to OrbitControls)

Loading the 3D Model

You can get the model from here

Don't forget to say thanks to Thaís for building this beautiful model for us 🙏

Now in your terminal run

npx gltfjsx publics/models/WawaOffice.glb

gtlfjsx is a client to automatically create a react component from your 3D model. It even supports TypeScript.

You should have this WawaOffice.js generated

Copy everything and create Office.jsx in the components folder and paste the component.

Rename the component from Model to Òffice and fix the path to ./models/WawaOffice.glb

Now your office should be like that

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/

import React, { useRef } from 'react'
import { useGLTF } from '@react-three/drei'

export function Office(props) {
  const { nodes, materials } = useGLTF('./models/WawaOffice.glb')
  return (
    <group {...props} dispose={null}>
      <mesh geometry={nodes['01_office'].geometry} material={materials['01']} />
      <mesh geometry={nodes['02_library'].geometry} material={materials['02']} position={[0, 2.11, -2.23]} />
      <mesh geometry={nodes['03_attic'].geometry} material={materials['03']} position={[-1.97, 4.23, -2.2]} />
    </group>
  )
}

useGLTF.preload('./models/WawaOffice.glb')

Now in Experience.jsx replace the mesh with the <Office /> component and add an <ambientLight intensity={1}/> to avoid seeing the model in black.

By the ways, this model contains baked textures (this is why it is quite big). What it means is that all lighting and shadows were made in Blender and baked using raytracing into a texture file to have this good looking result.

Animate the model on scroll

Let's wrap our Office component into ScrollControls from React Three Drei

<ScrollControls pages={3} damping={0.25}>
    <Office />
</ScrollControls>

pages is the number of pages you want. Consider a page equals the height of the viewport.
damping is the smoothing factor. I had good results with 0.25

Additional info in the documentation.

You should see a scrollbar appearing but you can't scroll because the OrbitControls are catching the scroll event.

Simply disable it as follows

<OrbitControls enableZoom={false} />

To have control over our office animation we need to install gsap library

yarn add gsap

Go to the Office.jsx and store a refto the main group.

const ref = useRef();

return (
    <group
      {...props}
      dispose={null}
      ref={ref}

Let's create ou gsap timeline inside a useLayoutEffect and we will update the group y position from it's current position to -FLOOR_HEIGHT * (NB_FLOORS - 1) for a duration of 2 seconds.

export const FLOOR_HEIGHT = 2.3;
export const NB_FLOORS = 3;

export function Office(props) {
...

useLayoutEffect(() => {
    tl.current = gsap.timeline();

    // VERTICAL ANIMATION
    tl.current.to(
      ref.current.position,
      {
        duration: 2,
        y: -FLOOR_HEIGHT * (NB_FLOORS - 1),
      },
      0
    );

We use a duration of 2 seconds because we have 3 pages:

The first page and initial position is 0 second
The second is 1 second
The third page is the end of the animation (2 seconds)

We scroll in reverse order the office based on the Y axis because we scroll the office and not the camera. As we go from bottom to top we need to decrease the vertical position of the office.

Now let's play our animation. We have access to the scroll with useScroll hook it contains an offset property with a value between 0 and 1 to represent the current scroll percentage.

const scroll = useScroll();

useFrame(() => {
    tl.current.seek(scroll.offset * tl.current.duration());
  });

Now our Office scroll vertically following our page scroll.

Let's use the same principles to animate the floors positions and rotation.

Here is what I ended with, but feel free to adjust it to what you prefer!

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/

import { useGLTF, useScroll } from "@react-three/drei";
import { useFrame } from "@react-three/fiber";
import gsap from "gsap";
import React, { useLayoutEffect, useRef } from "react";

export const FLOOR_HEIGHT = 2.3;
export const NB_FLOORS = 3;

export function Office(props) {
  const { nodes, materials } = useGLTF("./models/WawaOffice.glb");
  const ref = useRef();
  const tl = useRef();
  const libraryRef = useRef();
  const atticRef = useRef();

  const scroll = useScroll();

  useFrame(() => {
    tl.current.seek(scroll.offset * tl.current.duration());
  });

  useLayoutEffect(() => {
    tl.current = gsap.timeline();

    // VERTICAL ANIMATION
    tl.current.to(
      ref.current.position,
      {
        duration: 2,
        y: -FLOOR_HEIGHT * (NB_FLOORS - 1),
      },
      0
    );

    // Office Rotation
    tl.current.to(
      ref.current.rotation,
      { duration: 1, x: 0, y: Math.PI / 6, z: 0 },
      0
    );
    tl.current.to(
      ref.current.rotation,
      { duration: 1, x: 0, y: -Math.PI / 6, z: 0 },
      1
    );

    // Office movement
    tl.current.to(
      ref.current.position,
      {
        duration: 1,
        x: -1,
        z: 2,
      },
      0
    );
    tl.current.to(
      ref.current.position,
      {
        duration: 1,
        x: 1,
        z: 2,
      },
      1
    );

    // LIBRARY FLOOR
    tl.current.from(
      libraryRef.current.position,
      {
        duration: 0.5,
        x: -2,
      },
      0.5
    );
    tl.current.from(
      libraryRef.current.rotation,
      {
        duration: 0.5,
        y: -Math.PI / 2,
      },
      0
    );

    // ATTIC
    tl.current.from(
      atticRef.current.position,
      {
        duration: 1.5,
        y: 2,
      },
      0
    );

    tl.current.from(
      atticRef.current.rotation,
      {
        duration: 0.5,
        y: Math.PI / 2,
      },
      1
    );

    tl.current.from(
      atticRef.current.position,
      {
        duration: 0.5,

        z: -2,
      },
      1.5
    );
  }, []);

  return (
    <group
      {...props}
      dispose={null}
      ref={ref}
      position={[0.5, -1, -1]}
      rotation={[0, -Math.PI / 3, 0]}
    >
      <mesh geometry={nodes["01_office"].geometry} material={materials["01"]} />
      <group position={[0, 2.11, -2.23]}>
        <group ref={libraryRef}>
          <mesh
            geometry={nodes["02_library"].geometry}
            material={materials["02"]}
          />
        </group>
      </group>
      <group position={[-1.97, 4.23, -2.2]}>
        <group ref={atticRef}>
          <mesh
            geometry={nodes["03_attic"].geometry}
            material={materials["03"]}
          />
        </group>
      </group>
    </group>
  );
}

useGLTF.preload("./models/WawaOffice.glb");

You now have nice animations based on your page scroll.

Preparing the UI with Tailwind

Let's create a UI. You can use whatever you want to style it but I chose my lover Tailwind!

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

It will generate a tailwind.config.cjs replace the content with

/** @type {import('tailwindcss').Config} */

const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      serif: ["Playfair Display", ...defaultTheme.fontFamily.sans],
      sans: ["Poppins", ...defaultTheme.fontFamily.sans],
    },
  },
  plugins: [],
};

It tells tailwind to watch into the .html and .jsx files and it changed the default fonts to one I chose from Google Fonts.

Now in index.css add:

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&family=Poppins&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

The first line is the Google font import

Ok now we have Tailwind installed let's create our UI.

Create a component named Overlay with the following content

import { Scroll } from "@react-three/drei";

const Section = (props) => {
  return (
    <section className={`h-screen flex flex-col justify-center p-10 ${
        props.right ? "items-end" : "items-start"
      }`}
      <div className="w-1/2 flex items-center justify-center">
        <div className="max-w-sm w-full">
          <div className="bg-white  rounded-lg px-8 py-12">
            {props.children}
          </div>
        </div>
      </div>
    </section>
  );
};

export const Overlay = () => {
  return (
    <Scroll html>
      <div class="w-screen">
        <Section>
          <h1 className="font-semibold font-serif text-2xl">
            Hello, I'm Wawa Sensei
          </h1>
          <p className="text-gray-500">Welcome to my beautiful portfolio</p>
          <p className="mt-3">I know:</p>
          <ul className="leading-9">
            <li>🧑‍💻 How to code</li>
            <li>🧑‍🏫 How to learn</li>
            <li>📦 How to deliver</li>
          </ul>
          <p className="animate-bounce  mt-6">↓</p>
        </Section>
        <Section right>
          <h1 className="font-semibold font-serif text-2xl">
            Here are my skillsets 🔥
          </h1>
          <p className="text-gray-500">PS: I never test</p>
          <p className="mt-3">
            <b>Frontend 🚀</b>
          </p>
          <ul className="leading-9">
            <li>ReactJS</li>
            <li>React Native</li>
            <li>VueJS</li>
            <li>Tailwind</li>
          </ul>
          <p className="mt-3">
            <b>Backend 🔬</b>
          </p>
          <ul className="leading-9">
            <li>NodeJS</li>
            <li>tRPC</li>
            <li>NestJS</li>
            <li>PostgreSQL</li>
          </ul>
          <p className="animate-bounce  mt-6">↓</p>
        </Section>
        <Section>
          <h1 className="font-semibold font-serif text-2xl">
            🤙 Call me maybe?
          </h1>
          <p className="text-gray-500">
            I'm very expensive but you won't regret it
          </p>
          <p className="mt-6 p-3 bg-slate-200 rounded-lg">
            📞 <a href="tel:(+42) 4242-4242-424242">(+42) 4242-4242-424242</a>
          </p>
        </Section>
      </div>
    </Scroll>
  );
};

Note that our main div is wrapped inside a Scroll component with the html prop to be able to add html inside our Canvas and have access to the scroll later.

Now add the Overlay component next to the Office

<ScrollControls pages={3} damping={0.25}>       
    <Overlay />
    <Office />
</ScrollControls>

The interface is ready and as each Section height is 100vh the scroll is already good. But let's add some opacity animation.

Animating the UI on scroll

We will change the opacity of our sections based on the scroll.

To do so we store their opacity in a state

const [opacityFirstSection, setOpacityFirstSection] = useState(1);
  const [opacitySecondSection, setOpacitySecondSection] = useState(1);
  const [opacityLastSection, setOpacityLastSection] = useState(1);

Then in useFrame we animate them using the scroll hook methods available (more info here)

useFrame(() => {
    setOpacityFirstSection(1 - scroll.range(0, 1 / 3));
    setOpacitySecondSection(scroll.curve(1 / 3, 1 / 3));
    setOpacityLastSection(scroll.range(2 / 3, 1 / 3));
  });

We add the opacity as a prop to our sections

<Section opacity={opacityFirstSection}>
...
<Section right opacity={opacitySecondSection}>
...
<Section opacity={opacityLastSection}>
...

Now in our Section component we adjust the opacity using this prop

<section
      className={`h-screen flex flex-col justify-center p-10 ${
        props.right ? "items-end" : "items-start"
      }`}
      style={{
        opacity: props.opacity,
      }}
    >

Conclusion

Congratulations you now have a great starting point to build your own portfolio with React Three Fiber and Tailwind.

Live preview

The code is available here:
https://github.com/wass08/r3f-scrolling-animation-tutorial

I highly recommend you to read React Three Fiber documentation and check their examples to discover what you can achieve and how to do it.

For more React Three Fiber tutorial you can check my Three.js/React Three Fiber playlist on YouTube.

Thank you, don't hesitate to ask your questions in the comments section 🙏

Full height sections perfectly centered with flex

Wassim SAMAD — Sat, 11 Jan 2020 10:13:01 +0000

Hello Dev community! This is my first post here and as this place is a great source of inspiration for me I wanted to take part of it. Let's go!

Introduction

Have you ever needed to display perfectly centered (vertically and horizontally) content on your sections whatever the content height is? There are multiple options to achieve this but my favorite one is to use flexbox.

A long time ago I would have done display table-cell and vertical-align middle, but come on... Web evolves (and so do I)!

Flex

Display flex provides you easy ways to center the content both horizontally and vertically of an HTML element:

align-items: center; // for vertical alignment
justify-content: center; // for horizontal alignment

To go deeper into flexbox go to https://www.w3schools.com/css/css3_flexbox.asp

Flex direction

By default, the flex-direction of an element is set to row which means its direct children will act as columns in a row displayed horizontally. You can decide to do the opposite by setting flex-direction to column so its direct children will be displayed as the content of a column: one above the other.

Note that using flex-direction column align-items and justify-content will be inverted.

Full height sections

To have full height sections I simply used height to 100vh. It means that the section will take 100% of the Viewport Height whatever the size of the screen is.

🔥 Bonus

To give a better user experience when navigating to your full height sections website you can add this snapping scroll effect on the container of the sections:

scroll-snap-type: y mandatory;

And add this property to tell your section to snap to the scroll of its container:

scroll-snap-align: start;

Everything you need to know about scroll-snap https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type

✨Final result

Adding a nice font and some color adjustments and we're ready to go!

Wish you liked it! Don't hesitate if you have any questions. Do you have any suggestions about a topic you would like me to cover, it would be a pleasure!

Forem: Wassim SAMAD

How to Create a VTuber Studio with Three.js, React & VRM

What is a VRM?

Find VRM Models

Build Your VRM

Load and Control VRM with Three.js

Use Mediapipe with Kalidokit to Control the Avatar

Conclusion

wawa-vfx: Open-Source VFX + Particle System for React Three Fiber Projects

💡 Why wawa-vfx Exists

⚡ Features

📦 Installation

Usage

Basic Example

🚀 Open for Contributions

What is a 3D website? Explanation for beginners

🆚 2D vs. 3D Websites

🧠 What Makes a Website 3D?

🎨 Interactive Visual Experience

🕹️ Enhanced User Engagement

🔧 Powered by Modern Web Technologies

🎓 Want to Build One Yourself?

🧭 Conclusion

Creating a 3D Table Configurator with React Three Fiber

Project Setup

Staging

Load the table

Legs layout

Legs color

Table width

Smooth animation

Conclusion

Scroll animations with React Three Fiber and GSAP

Project Setup

Loading the 3D Model

Animate the model on scroll

Preparing the UI with Tailwind

Animating the UI on scroll

Conclusion

Full height sections perfectly centered with flex

Introduction

Flex

Flex direction

Full height sections

🔥 Bonus

✨Final result

💡 Why `wawa-vfx` Exists