You know, sometimes I see such amazing looking portfolio websites that has these sparkly 3D elements into it and left me thinking, "why do people are so good?". Graduating from university where I once took course about computer graphics, I know how painful it is to build your own renderer from scratch. Using WebGL is not an easy feat with all the buffer and texture setups, which further discourage me to even try.

But something clicks inside me. "They used THREE.js for sure. But ew am I going to really use libraries-that-not-made-by-myself?". This was such a faulty way of thinking of mine that prevented me from actually doing stuff. I'd been always trying to go from bottom-up and I realized recently that it wasn't ideal right now. It generated more of unneeded questions that further stop me from actually executing or attempting anything.

And finally, I installed react-three-fiber .

React + THREE.js = React Three Fiber

I've taken notice about this library several years before from a talk in convention, which of course, I completely forgot about. Not only that, there was this way of thinking that "React is already slow, adding 3D will definitely make it even slower". Later I realized that most of the slow parts when I develop using React was from my own fault: unnecessary re-rendering, no memoization, a mess of state and dependency arrays. As I learned more and more into how to properly use React hooks, I learned that... IT WAS MY OWN FAULT ALL ALONG :D

And so, I tried react-three-fiber . And boi, the development experience was good!

Setting Up Scene

Setting up your scene is as easy as creating a canvas and then add stuffs whatever you like. I just recently added a playground page on my root domain website, and all the code I needed is this.

import { createLazyFileRoute } from "@tanstack/react-router";
import { Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import Box from "../components/three-objects/Box";
import "./playground.css";
import { Scroll, ScrollControls } from "@react-three/drei";


const Playground = () => {
    return (
        <div id="canvas-container" className="w-full h-screen">
            <Suspense fallback={<span>Loading...</span>}>
                <Canvas>
                    <ambientLight intensity={Math.PI / 2} />
                    <spotLight
                        position={[20, 10, 10]}
                        angle={0.15}
                        penumbra={1}
                        decay={0}
                        intensity={Math.PI}
                    />
                    <pointLight
                        position={[-10, -10, -10]}
                        decay={0}
                        intensity={Math.PI}
                    />
                    <Box position={[-1.2, 0, 0]} rotateDir="x" />
                    <Box position={[1.2, 0, 0]} rotateDir="x" />
                    <Box position={[0, 1, 0]} rotateDir="y" />
                    <Box position={[0, -1, 0]} rotateDir="y" />
                    <ScrollControls pages={1} damping={0}>
                        <Scroll html>
                            <section className="w-screen h-screen flex justify-center items-center">
                                <h2 className="text-3xl">Awoo</h2>
                            </section>
                        </Scroll>
                    </ScrollControls>
                </Canvas>
            </Suspense>
        </div>
    );
};


export const Route = createLazyFileRoute("/playground")({
    component: Playground,
});

I used Tanstack Router for routing since it's a new shiny thing. I might gonna cover it on separate post, but here is what basically the scene of my playground page.

Additionally, I can make reusable component since it's a very React thing to do, so the Box component above is made by this code.

import { useRef, useState } from "react";
import { MeshProps, useFrame } from "@react-three/fiber";
import { Mesh } from "three";

interface Props extends MeshProps {
    rotateDir: "x" | "y" | "z";
}

export default function Box(props: Props) {
    const ref = useRef<Mesh>(null!);
    const [hovered, hover] = useState(false);
    const [clicked, click] = useState(false);
    useFrame((state, delta) => {
        ref.current.rotation[props.rotateDir] += delta;
    });
    return (
        <mesh
            {...props}
            ref={ref}
            scale={clicked ? 1.5 : 1}
            onClick={(event) => click(!clicked)}
            onPointerOver={(event) => (event.stopPropagation(), hover(true))}
            onPointerOut={(event) => hover(false)}
        >
            <boxGeometry args={[1, 1, 1]} />
            <meshStandardMaterial color={hovered ? "hotpink" : "orange"} />
        </mesh>
    );
}

Not only that it can really ease the process of making dynamic components, you can treat it like how you would do with React components. A pretty heavy React component, that is.

Going Forward

Knowing that React Three Fiber is this easy to use, I think I want to re-invest my time on actually improving my showcasing skill. I already have the basics of 3D modeling and rendering, so I think this would really benefit my portfolio website later on. The only thing that I concern is the limitation of the renderer capability and how flexible it is. I might need to write GLSL shaders because I need one, but there also some internal things that I need to take a look regarding the library. this is not mentioning that THREE.js is also a entirely different beast to tackle.

All in all, I think I found a new hobby to add into my repetoire :)

Loading...

There will be awesome contents here

Log 0x1C : Going 3D